tailwindcss-autofill

1.0.2 • Public • Published

🎨 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

Package Sidebar

Install

npm i tailwindcss-autofill

Weekly Downloads

315

Version

1.0.2

License

MIT

Unpacked Size

4.64 kB

Total Files

4

Last publish

Collaborators

  • phuctm97