https://github.com/phuctm97/tailwindcss-autofill
🎨 TailwindCSS variant to style autocompleted form fields.
https://github.com/phuctm97/tailwindcss-autofill
tailwindcss tailwindcss-extension tailwindcss-plugin tailwindcss-utility
Last synced: 14 days ago
JSON representation
🎨 TailwindCSS variant to style autocompleted form fields.
- Host: GitHub
- URL: https://github.com/phuctm97/tailwindcss-autofill
- Owner: phuctm97
- License: mit
- Created: 2021-01-09T09:29:44.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-12-01T04:11:57.000Z (about 2 years ago)
- Last Synced: 2025-09-25T19:56:12.807Z (5 months ago)
- Topics: tailwindcss, tailwindcss-extension, tailwindcss-plugin, tailwindcss-utility
- Language: JavaScript
- Homepage:
- Size: 640 KB
- Stars: 29
- Watchers: 1
- Forks: 2
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🎨 tailwindcss-autofill
[![npm version][npm badge]][npm url]
[![GitHub license][license badge]][license url]
TailwindCSS variant to style autocompleted form fields.
## Requirements
- Node.js 12+
- TailwindCSS 2+
## Install
```bash
yarn add tailwindcss-autofill
```
Or if you use `npm`:
```bash
npm i --save tailwindcss-autofill
```
## Usage
Add to `plugins` in your **tailwind.config.js**:
```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](https://github.com/phuctm97/tailwindcss-shadow-fill) and [tailwindcss-text-fill](https://github.com/phuctm97/tailwindcss-text-fill) because `background-color` and `color` won't work.
Style your components using `autofill:`:
```jsx
```
## 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](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit), use `yarn commit` or [Code conventional commits](https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-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][@phuctm97]
[npm badge]: https://img.shields.io/npm/v/tailwindcss-autofill?logo=npm
[license badge]: https://img.shields.io/github/license/phuctm97/tailwindcss-autofill
[npm url]: https://www.npmjs.com/package/tailwindcss-autofill
[license url]: /LICENSE
[@phuctm97]: https://phuctm97.com