How to add custom colors in Tailwind CSS?

Photo by Lucas K on Unsplash

Tailwind CSS is a powerful utility-first framework that offers a rich default color palette to cater to most design needs. However, there are instances when developers might need to integrate custom colors to align with a specific design theme or branding guidelines. In this article, we will delve deep into two distinct methods to add custom colors to your Tailwind CSS project.

Prerequisites

Before we proceed, it’s pivotal to have Tailwind CSS set up in your development environment. If you haven’t done this yet, no worries! Check out the comprehensive tutorial on how to install Tailwind CSS in Visual Studio Code . Once you’ve set up Tailwind CSS, you’re ready to dive into the details.

Method 1: Extending the Colors Property

This method is most beneficial if you’re planning to use the custom color repeatedly in your project.

1. Modify the tailwind.config.js File: Begin by navigating to your project directory and opening the tailwind.config.js file.
2. Extend the Colors Property: Inside the configuration file, extend the colors property as shown below:

module.exports = {
    theme: {
        extend: {
            colors: {
                primary: '#HEXCODE' // Replace '#HEXCODE' with your…