tailwindcss-alpha
Automatic alpha variants for your Tailwind CSS colors
Why?
If you’re like me your Tailwind CSS color configuration often ends up looking something like this:
moduleexports = // ... backgroundColors: red: '#f00' 'red-10': 'rgba(255, 0, 0, 0.1)' 'red-20': 'rgba(255, 0, 0, 0.2)' 'red-50': 'rgba(255, 0, 0, 0.5)' 'red-80': 'rgba(255, 0, 0, 0.8)' // ... // ...
tailwindcss-alpha
automatically generates alpha variations for each of your background, text, and border colors.
Install
npm install --save-dev tailwindcss-alpha
// tailwind.jsmoduleexports = // ... plugins: modules: backgroundColors: true alpha: '10': 01 '30': 03 // ...
Options
modules
(optional)
Default: { backgroundColors: true, textColors: false, borderColors: false }
Here is where you define which Tailwind modules you would like to generate alpha variants for, and which state variants (responsive, hover, etc.) to generate for each. This option behaves in the same way as the modules
property in the main Tailwind configuration, with one difference: a value of true
means "inherit from the main Tailwind modules
configuration."
alpha
(optional)
This is an object containing the alpha values for your new color utilities. If this is not specified in the plugin options the alpha
property in your main Tailwind configuration will be used. If there is no alpha
property then the opacity
property is used.
The keys of this object appear at the end of the utility class names. For example if you have a background color with a key of red
and an alpha with a key of 25
then a bg-red-25
class would be generated.
Example
moduleexports = // ... backgroundColors: red: '#f00' // ... plugins: modules: backgroundColors: alpha: '25': 025 '50': 05 '75': 075 // ...
The configuration above yields the following utilities: