Expose specific colors from your Tailwind CSS theme as CSS variables. This is useful if you want to use the colors in your Theme
in your CSS. Maybe conditionally choose a variable in JS and use it in your CSS.
Important
This is a complete rewrite of the snippet I provided in the Gist wich started this conversation. As I saw the usage potential of this piece of code I decided to turn it into a package, with enhancements and even more use cases. Enjoy! 😃
colors
:string[]
- The color keys from the
Theme
you want to expose. - Default:
["red"]
- The color keys from the
shades
:string[]
- The shades you want to expose. (Ps.
DEFAULT
values are exposed as--tw-primary
as it is with Tailwind classes) - Default:
["500"]
- The shades you want to expose. (Ps.
prefix
:string
- The prefix to use for the CSS variables.
- Default:
"--tw"
This is how a tailwind.config.ts
file could look like with this plugin.
export default {
theme: { extend: {} },
content: ["./src/**/*.{ts,tsx}"],
plugins: [exposeColors({ colors: ["red", "green", "blue"] })]
} satisfies Config
In your HTML you will now have access to the following CSS variables.
::root {
--tw-red-500: 239, 68, 68;
--tw-green-500: 34, 197, 94;
--tw-blue-500: 59, 130, 246;
}
And in your CSS you can use them like this.
body {
background: rgba(var(--tw-red-500), 0.1);
}
This code is licensed under the Apache License, Version 2.0: LICENSE