Skip to content

Commit f350aae

Browse files
phuctm97phuctm97
committed
🎉 Start project
0 parents  commit f350aae

File tree

9 files changed

+182
-0
lines changed

9 files changed

+182
-0
lines changed

‎.github/dependabot.yml

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
version: 2
2+
3+
updates:
4+
- package-ecosystem: npm
5+
directory: /
6+
schedule:
7+
interval: weekly

‎.gitignore

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Node.js
2+
/node_modules/
3+
npm-debug.log*
4+
yarn-debug.log*
5+
yarn-error.log*
6+
7+
# Misc
8+
.DS_Store
9+
.AppleDouble
10+
.LSOverride
11+
logs
12+
*.log

‎.vscode/extensions.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["esbenp.prettier-vscode"]
3+
}

‎.vscode/settings.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
// Code style
3+
"files.trimTrailingWhitespace": true,
4+
"files.trimFinalNewlines": true,
5+
"files.insertFinalNewline": true,
6+
"editor.defaultFormatter": "esbenp.prettier-vscode",
7+
"editor.formatOnSave": true,
8+
9+
// Misc
10+
"files.exclude": {
11+
"node_modules/": true,
12+
"yarn.lock": true
13+
}
14+
}

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020-2021 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.

‎README.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# 🎨 tailwindcss-text-fill
2+
3+
[![npm version][npm badge]][npm url]
4+
[![GitHub license][license badge]][license url]
5+
6+
Add TailwindCSS utilities 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+
## Install
9+
10+
```bash
11+
yarn add tailwindcss-text-fill
12+
```
13+
14+
Or if you use `npm`:
15+
16+
```bash
17+
npm i --save tailwindcss-text-fill
18+
```
19+
20+
## Usage
21+
22+
Add to `plugins` in your **tailwind.config.js**:
23+
24+
```js
25+
module.exports = {
26+
// ...
27+
plugins: [
28+
require("tailwindcss-text-fill"),
29+
// Other plugins.
30+
],
31+
};
32+
```
33+
34+
Style your components `text-fill-{color}`, e.g. `text-fill-gray-100`, `text-fill-gray-200`, `text-fill-red-500`, etc.
35+
36+
```jsx
37+
<input className="text-fill-gray-100" />
38+
```
39+
40+
## Requirements
41+
42+
- Node.js 12+
43+
44+
- TailwindCSS 2
45+
46+
---
47+
48+
Made by [@phuctm97].
49+
50+
<!-- Badges -->
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+
<!-- Links -->
58+
59+
[@phuctm97]: https://phuctm97.com
60+
[tailwindcss-autofill]: https://github.com/phuctm97/tailwindcss-autofill

‎index.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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;

‎package.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "tailwindcss-text-fill",
3+
"version": "0.1.0",
4+
"description": "🎨 TailwindCSS utilities to override foreground fill color of text content.",
5+
"keywords": [
6+
"tailwindcss",
7+
"tailwindcss-plugin",
8+
"tailwindcss-extension",
9+
"tailwindcss-utility"
10+
],
11+
"repository": "https://github.com/phuctm97/tailwindcss-text-fill",
12+
"main": "index.js",
13+
"files": [
14+
"index.js"
15+
],
16+
"author": {
17+
"name": "Minh-Phuc Tran",
18+
"email": "[email protected]",
19+
"url": "https://phuctm97.com"
20+
},
21+
"license": "MIT",
22+
"private": false,
23+
"scripts": {
24+
"style:check": "prettier --check .",
25+
"style:format": "prettier --write ."
26+
},
27+
"dependencies": {
28+
"flatten-tailwindcss-theme": "^0.1.1"
29+
},
30+
"peerDependencies": {
31+
"tailwindcss": "^2.0.2"
32+
},
33+
"devDependencies": {
34+
"prettier": "^2.2.1"
35+
}
36+
}

‎yarn.lock

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2+
# yarn lockfile v1
3+
4+
5+
flatten-tailwindcss-theme@^0.1.1:
6+
version "0.1.1"
7+
resolved "https://registry.yarnpkg.com/flatten-tailwindcss-theme/-/flatten-tailwindcss-theme-0.1.1.tgz#c74a06aeb98e110b8f711ec26a973be74fc62a0b"
8+
integrity sha512-H4VV6pXPVX+NZMy4Ddky+Ae3y8hRrDmYn1piauHx3nPWa/4YS6ufL2G4crxqisGawHGztSTJ5TjZkmiyTA035Q==
9+
10+
prettier@^2.2.1:
11+
version "2.2.1"
12+
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
13+
integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==

0 commit comments

Comments
 (0)