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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/** @type {import('tailwindcss').Config} */ module.exports = { theme: { extend: { colors:{ primary: "#f06123" } }, }, plugins: [], } |
|
1 2 3 4 5 6 7 8 9 |
<div class="flex h-screen bg-gray-200 items-center space-y-4 flex-col justify-center"> <h1 class="text-2xl bg-primary p-4"> Custom Background Color in Tailwind Config </h1> </div> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="flex h-screen bg-gray-200 items-center space-y-4 flex-col justify-center"> <h1 class="text-2xl bg-primary p-4">Custom Background Color One </h1> <h1 class="text-2xl bg-[#f061FF] p-4"> Custom Background Color Two </h1> </div> |
Conclusion
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.