Conversation

Question for Tailwind users who define their colors as CSS variables — what is the motivating reason? I definitely see the utility when you are writing custom CSS but with Tailwind you don't really do that. Trying to find a good example to demo for the v3.1 release this week 👍

107

158

Replying to

If you're building UIs for a hosted service or something that can be white-labeled, it can be helpful to abstract the concept of "the primary color" in the components so you can let different users select different primary colors for their instance of the same UI.

Replying to

and

Bullet Train themes now have this by default. We define a custom `primary` color and map it to `var(--primary-...)`:

github.com

bullet_train-themes-light/tailwind.light.config.js at cdee48a40596d1466ea7d3957d2b53aaf4beb40b ·...

Contribute to bullet-train-co/bullet_train-themes-light development by creating an account on GitHub.

8:52 PM · May 30, 2022

Replying to

and

Then we have a `colors.css` where we configure multiple color themes. In this example it's all custom colors, but in other themes these mappings are as simple as `theme('colors.blue.500')`... e.g. default Tailwind colors.

github.com

bullet_train-themes-light/colors.css at main · bullet-train-co/bullet_train-themes-light

Contribute to bullet-train-co/bullet_train-themes-light development by creating an account on GitHub.