How to update your Tailwind Config

To use your new Tailwind palette you will need to add it to your tailwind.config.js file. If you do not already have that file in the root directory of your project you will need to create it.

Read the complete documentation on the official Tailwind Customizing Colors Page to learn more.

Why did I make this?

I wanted a way to create quickly make a cohesive color theme in Tailwind CSS.

This tool uses cubic spline interpolation to generate colors that are inherently related to your light and dark values, giving the entire palette a cohesive feel.

How should I use it?

For maximum readibility, use text colors that maximize contrast on any given color. Text on the gradient shows the best color for optimal contrast (out of light, dark, #FFFFFF, and #000000).

If you enjoy using this tool send me your project made using it on Twitter @jordantwells42! I would love to see them.