├── .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-text-fill 2 | 3 | [![npm version][npm badge]][npm url] 4 | [![GitHub license][license badge]][license url] 5 | 6 | TailwindCSS utility to override foreground fill color of text content, is especially useful to style autocompleted form fields with [tailwindcss-autofill] because `color` won't work. 7 | 8 | ## Requirements 9 | 10 | - Node.js 12+ 11 | 12 | - TailwindCSS 2+ 13 | 14 | ## Install 15 | 16 | ```bash 17 | yarn add tailwindcss-text-fill 18 | ``` 19 | 20 | Or if you use `npm`: 21 | 22 | ```bash 23 | npm i --save tailwindcss-text-fill 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-text-fill"), 35 | // ...other plugins. 36 | ], 37 | }; 38 | ``` 39 | 40 | Style your components using `text-fill-{color}`, e.g. `text-fill-gray-100`, `text-fill-gray-200`, `text-fill-red-500`, etc. 41 | 42 | ```jsx 43 | 44 | ``` 45 | 46 | ## Author 47 | 48 | - [Minh-Phuc Tran][@phuctm97] 49 | 50 | 51 | 52 | [npm badge]: https://img.shields.io/npm/v/tailwindcss-text-fill?logo=npm 53 | [license badge]: https://img.shields.io/github/license/phuctm97/tailwindcss-text-fill 54 | [npm url]: https://www.npmjs.com/package/tailwindcss-text-fill 55 | [license url]: /LICENSE 56 | 57 | 58 | 59 | [@phuctm97]: https://phuctm97.com 60 | [tailwindcss-autofill]: https://github.com/phuctm97/tailwindcss-autofill 61 | -------------------------------------------------------------------------------- /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 | const flatten = require("flatten-tailwindcss-theme"); 3 | 4 | const textFill = plugin( 5 | ({ addUtilities, variants, theme, e }) => { 6 | const colors = flatten(theme("colors")); 7 | const utils = Object.entries(colors).reduce( 8 | (res, [key, value]) => 9 | Object.assign(res, { 10 | [`.${e(`text-fill-${key}`)}`]: { 11 | "-webkit-text-fill-color": value, 12 | }, 13 | }), 14 | {} 15 | ); 16 | addUtilities(utils, variants("textFill")); 17 | }, 18 | { variants: { textFill: [] } } 19 | ); 20 | 21 | module.exports = textFill; 22 | -------------------------------------------------------------------------------- /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-text-fill", 3 | "version": "0.1.2", 4 | "private": false, 5 | "license": "MIT", 6 | "description": "🎨 TailwindCSS utility to override foreground fill color of text content.", 7 | "keywords": [ 8 | "tailwindcss", 9 | "tailwindcss-plugin", 10 | "tailwindcss-extension", 11 | "tailwindcss-utility" 12 | ], 13 | "repository": "https://github.com/phuctm97/tailwindcss-text-fill", 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 | "dependencies": { 27 | "flatten-tailwindcss-theme": "^1.0.0" 28 | }, 29 | "peerDependencies": { 30 | "tailwindcss": ">=2.0.0" 31 | }, 32 | "devDependencies": { 33 | "@commitlint/cli": "^17.0.2", 34 | "@commitlint/config-angular": "^17.0.0", 35 | "@commitlint/prompt-cli": "^17.0.0", 36 | "cspell": "^6.1.1", 37 | "husky": "^8.0.1", 38 | "lint-staged": "^13.0.0", 39 | "prettier": "^2.6.2", 40 | "semantic-release": "^19.0.2" 41 | } 42 | } 43 | --------------------------------------------------------------------------------