├── .github ├── dependabot.yml └── workflows │ ├── ci.yml │ ├── pr-metadata.yml │ └── pr-sources.yml ├── .gitignore ├── .husky ├── commit-msg └── pre-commit ├── .vscode ├── extensions.json └── settings.json ├── LICENSE ├── README.md ├── commitlint.config.js ├── cspell.json ├── index.js ├── lint-staged.config.js ├── package.json └── yarn.lock /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | 3 | updates: 4 | - package-ecosystem: npm 5 | directory: / 6 | schedule: 7 | interval: monthly 8 | - package-ecosystem: github-actions 9 | directory: / 10 | schedule: 11 | interval: monthly 12 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | push: 5 | branches: [master] 6 | 7 | jobs: 8 | build-release: 9 | name: Build/Release 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@v3 13 | - uses: actions/setup-node@v3 14 | with: 15 | node-version: 14 16 | cache: yarn 17 | - run: yarn install --frozen-lockfile 18 | - name: Run yarn commitlint --from=head_commit.message 19 | run: echo "${{ github.event.head_commit.message }}" | yarn commitlint 20 | - run: yarn prettier --check . 21 | - run: yarn cspell --no-must-find-files '**' 22 | - run: yarn semantic-release --branches ${{ github.ref_name }} 23 | env: 24 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 25 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 26 | -------------------------------------------------------------------------------- /.github/workflows/pr-metadata.yml: -------------------------------------------------------------------------------- 1 | name: PR / Metadata 2 | 3 | on: 4 | pull_request: 5 | branches: [master] 6 | types: [opened, synchronize, reopened, edited] 7 | 8 | permissions: 9 | pull-requests: write 10 | contents: write 11 | 12 | jobs: 13 | validate-metadata: 14 | name: Validate metadata 15 | runs-on: ubuntu-latest 16 | steps: 17 | - uses: actions/checkout@v3 18 | - uses: actions/setup-node@v3 19 | with: 20 | node-version: 14 21 | cache: yarn 22 | - run: yarn install --frozen-lockfile 23 | - name: Run yarn commitlint --from=pull_request.title 24 | run: echo "${{ github.event.pull_request.title }}" | yarn commitlint 25 | auto-merge: 26 | name: Auto-merge 27 | if: ${{ github.actor == 'dependabot[bot]' }} 28 | runs-on: ubuntu-latest 29 | steps: 30 | - uses: dependabot/fetch-metadata@v1.6.0 31 | id: dependabot-metadata 32 | with: 33 | github-token: "${{ secrets.GITHUB_TOKEN }}" 34 | - run: gh pr merge --auto --squash ${{ github.event.pull_request.html_url }} 35 | if: ${{ steps.dependabot-metadata.outputs.update-type != 'version-update:semver-major' }} 36 | env: 37 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 38 | -------------------------------------------------------------------------------- /.github/workflows/pr-sources.yml: -------------------------------------------------------------------------------- 1 | name: PR / Sources 2 | 3 | on: 4 | pull_request: 5 | branches: [master] 6 | 7 | jobs: 8 | validate-sources: 9 | name: Validate sources 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@v3 13 | - uses: actions/setup-node@v3 14 | with: 15 | node-version: 14 16 | cache: yarn 17 | - run: yarn install --frozen-lockfile 18 | - run: yarn prettier --check . 19 | - run: yarn cspell --no-must-find-files '**' 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn commitlint --edit $1 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn lint-staged 5 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "esbenp.prettier-vscode", 4 | "streetsidesoftware.code-spell-checker", 5 | "vivaxy.vscode-conventional-commits" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "javascript.suggestionActions.enabled": false, 3 | "editor.defaultFormatter": "esbenp.prettier-vscode", 4 | "editor.formatOnSave": true, 5 | "files.trimTrailingWhitespace": true, 6 | "files.trimFinalNewlines": true, 7 | "files.insertFinalNewline": true, 8 | "files.exclude": { 9 | "node_modules": true, 10 | "yarn.lock": true, 11 | ".husky": true 12 | }, 13 | "conventionalCommits.gitmoji": false 14 | } 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020-2022 Minh-Phuc Tran 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🎨 tailwindcss-autofill 2 | 3 | [![npm version][npm badge]][npm url] 4 | [![GitHub license][license badge]][license url] 5 | 6 | TailwindCSS variant to style autocompleted form fields. 7 | 8 | ## Requirements 9 | 10 | - Node.js 12+ 11 | 12 | - TailwindCSS 2+ 13 | 14 | ## Install 15 | 16 | ```bash 17 | yarn add tailwindcss-autofill 18 | ``` 19 | 20 | Or if you use `npm`: 21 | 22 | ```bash 23 | npm i --save tailwindcss-autofill 24 | ``` 25 | 26 | ## Usage 27 | 28 | Add to `plugins` in your **tailwind.config.js**: 29 | 30 | ```js 31 | module.exports = { 32 | // .... 33 | plugins: [ 34 | require("tailwindcss-autofill"), 35 | // ...other plugins 36 | ], 37 | // For TailwindCSS v2 only 38 | variants: { 39 | extend: { 40 | // Enable `autofill` variant for plugins you want 41 | borderColor: ["autofill"], 42 | shadowFill: ["autofill"], 43 | textFill: ["autofill"], 44 | }, 45 | }, 46 | }; 47 | ``` 48 | 49 | 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. 50 | 51 | Style your components using `autofill:`: 52 | 53 | ```jsx 54 | 55 | ``` 56 | 57 | ## Contributing 58 | 59 | ### Requirements 60 | 61 | - Node 12+ 62 | 63 | - Yarn 1.22+ 64 | 65 | ### Setup 66 | 67 | 1. Install requirements 68 | 69 | 2. Clone the repository 70 | 71 | 3. Run `yarn` to install dependencies 72 | 73 | ### Develop 74 | 75 | - 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 76 | 77 | - Submit a PR and make sure required status checks pass 78 | 79 | - When a PR is merged or code is pushed to `master`, Github automatically builds and publishes a new release if there're relevant changes 80 | 81 | ## Author 82 | 83 | - [Minh-Phuc Tran][@phuctm97] 84 | 85 | 86 | 87 | [npm badge]: https://img.shields.io/npm/v/tailwindcss-autofill?logo=npm 88 | [license badge]: https://img.shields.io/github/license/phuctm97/tailwindcss-autofill 89 | [npm url]: https://www.npmjs.com/package/tailwindcss-autofill 90 | [license url]: /LICENSE 91 | 92 | 93 | 94 | [@phuctm97]: https://phuctm97.com 95 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ["@commitlint/config-angular"], 3 | ignores: [(commit) => /^build\((deps|deps-dev)\): bump/.test(commit)], 4 | }; 5 | -------------------------------------------------------------------------------- /cspell.json: -------------------------------------------------------------------------------- 1 | { 2 | "words": ["commitlint", "minh-phuc", "phuctm", "tailwindcss"], 3 | "ignorePaths": ["package.json", "cspell.json", ".vscode"] 4 | } 5 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const plugin = require("tailwindcss/plugin"); 2 | 3 | const autofill = plugin(({ addVariant, e }) => { 4 | addVariant("autofill", ({ modifySelectors, separator }) => { 5 | modifySelectors(({ className }) => { 6 | const newClass = e(`autofill${separator}${className}`); 7 | return [ 8 | `.${newClass}:-webkit-autofill`, 9 | `.${newClass}:-webkit-autofill:hover`, 10 | `.${newClass}:-webkit-autofill:focus`, 11 | ].join(","); 12 | }); 13 | }); 14 | }); 15 | 16 | module.exports = autofill; 17 | -------------------------------------------------------------------------------- /lint-staged.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "*": ["prettier --write --ignore-unknown", "cspell --no-must-find-files"], 3 | }; 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwindcss-autofill", 3 | "version": "0.1.0", 4 | "private": false, 5 | "license": "MIT", 6 | "description": "🎨 TailwindCSS variant to style autocompleted form fields.", 7 | "keywords": [ 8 | "tailwindcss", 9 | "tailwindcss-plugin", 10 | "tailwindcss-extension", 11 | "tailwindcss-utility" 12 | ], 13 | "repository": "https://github.com/phuctm97/tailwindcss-autofill", 14 | "author": { 15 | "name": "Minh-Phuc Tran", 16 | "email": "me@phuctm97.com", 17 | "url": "https://phuctm97.com" 18 | }, 19 | "main": "index.js", 20 | "files": [ 21 | "index.js" 22 | ], 23 | "scripts": { 24 | "prepare": "husky install" 25 | }, 26 | "peerDependencies": { 27 | "tailwindcss": ">=2.0.0" 28 | }, 29 | "devDependencies": { 30 | "@commitlint/cli": "^17.0.2", 31 | "@commitlint/config-angular": "^17.0.0", 32 | "@commitlint/prompt-cli": "^17.0.0", 33 | "cspell": "^6.1.1", 34 | "husky": "^8.0.1", 35 | "lint-staged": "^13.0.3", 36 | "prettier": "^2.6.2", 37 | "semantic-release": "^19.0.2" 38 | } 39 | } 40 | --------------------------------------------------------------------------------