How To Define Primary Color In TailwindCSS

By onjsdev

Jan 6th, 2024

To enhance styling in TailwindCSS, a great approach is to add your primary color to the Tailwind config file. Let's explore how to set a primary color for your theme.

How To Set Primary Color To For Theme

With TailwindCSS, you can easily expand your color palette by adding new colors with their custom names such as primary, secondary, accent, and more.

To accomplish this, go to the your Tailwind CSS configuration file. By default, it's named tailwind.config.js, and it should be in the root directory of your project.

Inside the configuration file, you will find a section that defines colors. If it does not exist, you can create one.

Let's say you want to change the primary color to blue. You can do this by adding the following code:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3490dc', // You can change the color code to your desired primary color
      },
    },
  },
  // ...
}

Now, Whenever you add bg-primary to your class list, the background color of the element will be blue. Of course, you can use text-primary, border-primary, and others.

Create A Theme

You are not limited to define only primary colors, you can build your tailwindCSS theme from scratch using different properties, such as primary, secondary, accent, dark, light and more.

Here is an example of it:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3490dc',
        secondary: '#6574cd',
        accent: '#ff9900',
        dark: '#333333',
        light: '#f4f4f4',
        // You can add more colors as needed
      },
    },
  },
  // ...
}

Again, you can now use your custom colors in your HTML and CSS classes by referring to them with the class names you defined. For example:

<div class="bg-primary text-white">Primary Background</div>
<div class="bg-secondary text-white">Secondary Background</div>
<button class="bg-accent text-dark">Accent Button</button>
<p class="text-light">Light Text</p>

These classes will apply the colors you defined in your custom theme.

Lastly, note that to ensure your changes take effect, you may need to recompile your project.

Conclusion

And that's it! You've successfully changed the primary color or your whole theme in Tailwind CSS.

If you want to learn more about TailwindCSS, then you can check the following articles:

Thank you for reading.