2 Ways to Add Custom Colors in TailwindCSS

TailwindCSS comes with a lot of colors that you can use in your project. But, if you still need a custom color for your web pages, here are 2 ways to add custom colors in TailwindCSS.

Method 1: Add Custom Color in Tailwind Config File

This is the preferred way to add custom color if you are going to use it multiple times in your project. For example, if you have a brand color that you are going to set as the primary color for your project, you can add it to the tailwind config (tailwind.config.js) file. Here is a simple code snippet that extends the theme colors and adds a new one keeping all the original colors. You can also check the working demo on the tailwind playground.

This method allows you to add any color you want to the project. This is useful for adding brand colors that you have in your design. If you add any color to the tailwind.config.js file, that color will also be available for every other utility like border , ring , text etc.

Method 2: Adding Custom Color with Arbitrary Value

This method should be used if you are going to use a specific color only once on a web page. TailwindCSS provides a method to add custom values for almost everything. This method is known as arbitrary values in TailwindCSS. Here is a code snippet using an arbitrary value to add a custom color. You can check the working code on the playground of TailwindCSS.


You can add a custom color by extending the colors property in the tailwind config file or you can use arbitrary values in TailwindCSS to add a custom color. Choose the first method if you are going to use color more than once in your project. The second method is useful if you are just going to use a specific color once on a web page.

Latest articles

Leave a reply

Please enter your comment!
Please enter your name here

Related articles