a month ago
Hello everyone! Welcome to this tutorial on how to add custom colors in Tailwind CSS. Tailwind CSS comes with a great default color palette, but sometimes you may need to use custom colors for your project. In this tutorial, we will explore two methods to add custom colors to your Tailwind CSS project. Let's get started!
This method is preferred if you are going to use the custom color multiple times in your project. To add a custom color, you need to extend the colors property in the tailwind.config.js
file[1].
tailwind.config.js
file and add the following code to extend the colors:Loading...
Here, we have added a custom color named 'primary' with the hex value #123456
.
Loading...
You can also use arbitrary values in Tailwind CSS to add a custom color directly in your HTML file[1]. This method is useful when you need to use a custom color only once in your project.
Loading...
Here, we have added a custom background color with the hex value #123456
directly in the HTML file.
In this tutorial, we have learned two methods to add custom colors in Tailwind CSS. The first method involves extending the colors property in the tailwind.config.js
file, which is useful when you need to use the custom color multiple times in your project. The second method uses arbitrary values to add a custom color directly in the HTML file, which is helpful when you need to use the custom color only once. Now you can easily add custom colors to your Tailwind CSS projects and make your designs more appealing. Happy coding!