Tailwind Shades Generator

Kicking off the new year with a new tool!

I've been using Tailwind for a while now and I've always found myself creating shades of colors for my projects. There's a few apps out there that do this but I wanted better copy/paste experience.

So, that's why I built Tailwind Shades Generator. It's a simple tool that generates shades of colors and css variables for you to use in your project.

😎 Cool, but why CSS Variables?

I needed a way to control a subset of colors defined in a custom React component library built with TailwindCSS. The tricky part was the library was already compiled and published. I needed a way to change the colors without recompiling the library. CSS Variables to the rescue!

With CSS Variables, I could define the color shades in the project's css file. The component library would then use those variables to set the colors. This way, I could change the colors in the project and the component library would automatically update.

Tailwind supports CSS variables, but it's a bit of a pain to define them. That's where Tailwind Shades Generator comes in. It generates the CSS variables for you.

🔍 Color Shades Explained

The initial hex color is converted into 10 different shades. The 500 shade is the base color, and the other shades are calculated from that. The 50 shade is the lightest and the 900 shade is the darkest.

From there, the hex colors are converted into RGB values so Tailwind can use the var function and the custom <alpha-value> variable to control opacity.

🥳 Added Bonus

I didn't always want to use the CSS variables, so there's a tailwind.config.js snippet that just contains the color shades as hex values.