All credit goes to Merott. I simply took his code and made it into a package, because I wanted a cleaner looking tailwind.config.js
in one of my projects.
From the original gist:
This is a simple Tailwind plugin to expose all of Tailwind's colors, including any custom ones, as custom css properties on the
:root
element.There are a couple of main reasons this is helpful:
- You can reference all of Tailwind's colors—including any custom ones you define—from handwritten CSS code.
- You can define all of your colors within the Tailwind configuration, and access the final values programmatically, which isn't possible if you did it the other way around: referencing custom CSS variables (defined in CSS code) from your Tailwind config.
Used the edited code from Maybach91's comment to expose --color-<name>
instead of --color-<name>-DEFAULT
.
Install the plugin with your preferred package manager:
npm install @r3ps4j/tailwindcss-color-variables --save-dev
Then add the plugin to your tailwind.config.js
file:
module.exports = {
//...
plugins: [require("@r3ps4j/tailwindcss-color-variables")],
};
Now you can use Tailwind's colors as CSS variables:
div {
background-color: var(--color-blue-500);
}