How to add custom colors in tailwind css?

Ayyaz

@AyyazTech

Introduction

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!

Method 1: Add Custom Color in Tailwind Config File

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].

1. First, open your tailwind.config.js file and add the following code to extend the colors:

module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#123456',
      },
    },
  },
  variants: {},
  plugins: [],
}

module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#123456',
      },
    },
  },
  variants: {},
  plugins: [],
}

Here, we have added a custom color named 'primary' with the hex value #123456.

1. Now, you can use this custom color in your HTML file:

<h1 class="text-2xl bg-primary p-4">Custom Background Color in Tailwind Config</h1>

<h1 class="text-2xl bg-primary p-4">Custom Background Color in Tailwind Config</h1>

Method 2: Adding Custom Color with Arbitrary Values

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.

1. Add the custom color using the arbitrary value syntax:

<h1 class="text-2xl bg-[#123456] p-4">Custom Background Color One</h1>

<h1 class="text-2xl bg-[#123456] p-4">Custom Background Color One</h1>

Here, we have added a custom background color with the hex value #123456 directly in the HTML file.

Conclusion

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!