To get you started, we’ve provided a generous palette of great looking colors that are perfect for prototyping, or even as a starting point for your color palette. That said, don’t hesitate to them for your project.

By default Tailwind defines the entire color palette in a object at the top of your Tailwind config file. These colors are then assigned to textColors, backgroundColors and borderColors. This approach works well since it provides a consistent naming system across all the utilities. However, you’re welcome to modify them independently of one-another as well.

You’ll notice above that the color palette is also assigned to the colors key of your Tailwind config. This makes it easy to access them in your custom CSS using the config() function. For example:

In the default color palette we’ve used literal color names, like red, green and blue. Another common approach to naming colors is choosing functional names based on how the colors are used, such as primary, secondary, and .

You can also choose different approaches to how you name your color variants. In the default color palette we’ve again used literal variants, like light, dark, and darker. Another common approach here is to use a numeric scale, like 100, 200 and .

You should feel free to choose whatever color naming approach makes the most sense to you.