Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/soueuls/tailwind-color-alpha
Automatic alpha variants for your Tailwind CSS colors based on your opacity config
https://github.com/soueuls/tailwind-color-alpha
css rgba tailwind tailwind-css tailwindcss tailwindcss-plugin
Last synced: 3 months ago
JSON representation
Automatic alpha variants for your Tailwind CSS colors based on your opacity config
- Host: GitHub
- URL: https://github.com/soueuls/tailwind-color-alpha
- Owner: soueuls
- License: mit
- Created: 2020-03-06T22:38:54.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-04-07T01:06:01.000Z (about 4 years ago)
- Last Synced: 2024-03-18T23:47:19.064Z (3 months ago)
- Topics: css, rgba, tailwind, tailwind-css, tailwindcss, tailwindcss-plugin
- Language: JavaScript
- Homepage:
- Size: 5.86 KB
- Stars: 21
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-tailwindcss - CSS Alpha Colors - Adds opacity variants to existing colors. (Plugins)
README
> Automatic alpha variants for your Tailwind CSS colors based on your opacity config
## Why?
Tailwind only supports opacity but sometimes you need to apply semi-transparent background/border or text.
You could tweak your Tailwind configuration like this
```javascript
module.exports = {
theme: {
colors: {
primary: "#2b2e4a",
"primary-10": "rgba(43,46,74, 0.1)",
"primary-20": "rgba(43,46,74, 0.2)",
"primary-75": "rgba(43,46,74, 0.75)",
// ...
},
// ...
},
};
```
But it's repetitive, confusing and error prone. We can do better.
## Install
`npm install --save-dev tailwind-color-alpha`
```javascript
module.exports = {
// ...
plugins: [require("tailwind-color-alpha")()],
};
```
The plugin will automatically use your colors and opacity config to generate all the corresponding rgba values for your text, background, border, fill and stroke utility classes respecting your variant settings for each.
## Examples
```javascript
module.exports = {
theme: {
colors: {
primary: "#2b2e4a",
},
opacity: {
"25": ".25",
"50": "0.5",
},
},
};
```
The configuration above yields the following utilities:
```css
.bg-primary-alpha-25 {
background-color: rgba(43, 46, 74, 0.25);
}
.bg-primary-alpha-50 {
background-color: rgba(43, 46, 74, 0.5);
}
.text-primary-alpha-25 {
color: rgba(43, 46, 74, 0.25);
}
.text-primary-alpha-50 {
color: rgba(43, 46, 74, 0.5);
}
.border-primary-alpha-25 {
border-color: rgba(43, 46, 74, 0.25);
}
.border-primary-alpha-25 {
border-color: rgba(43, 46, 74, 0.5);
}
.hover\:text-primary-alpha-25:hover {
color: rgba(43, 46, 74, 0.25);
}
.focus\:text-primary-alpha-50:focus {
color: rgba(43, 46, 74, 0.5);
}
/* and more... */
```
Notice that a color named `red.default` will end up generating `text-red` and so we follow Tailwind's convention with `bg-red-alpha-${opacity}`