🎨 tailwindcss-autofill

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

• Minh-Phuc Tran