Skip to content

🎨 TailwindCSS variant to style autocompleted form fields.

License

Notifications You must be signed in to change notification settings

phuctm97/tailwindcss-autofill

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

91 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🎨 tailwindcss-autofill

npm version GitHub license

TailwindCSS variant to style autocompleted form fields.

Requirements

  • Node.js 12+

  • TailwindCSS 2+

Install

yarn add tailwindcss-autofill

Or if you use npm:

npm i --save tailwindcss-autofill

Usage

Add to plugins in your tailwind.config.js:

module.exports = {
  // ....
  plugins: [
    require("tailwindcss-autofill"),
    // ...other plugins
  ],
  // For TailwindCSS v2 only
  variants: {
    extend: {
      // Enable `autofill` variant for plugins you want
      borderColor: ["autofill"],
      shadowFill: ["autofill"],
      textFill: ["autofill"],
    },
  },
};

This plugin is often used with the tailwindcss-shadow-fill and tailwindcss-text-fill because background-color and color won't work.

Style your components using autofill::

<input className="autofill:border-gray-900 autofill:shadow-fill-white autofill:text-fill-gray-900" />

Contributing

Requirements

  • Node 12+

  • Yarn 1.22+

Setup

  1. Install requirements

  2. Clone the repository

  3. Run yarn to install dependencies

Develop

  • Commit adhering to Angular commit convention, use yarn commit or Code conventional commits to commit interactively

  • Submit a PR and make sure required status checks pass

  • When a PR is merged or code is pushed to master, Github automatically builds and publishes a new release if there're relevant changes

Author