How can I add a custom color to the Tailwind configuration and use it in my project?

Question

Q&A Network · Accepted Answer

To add a custom color to your Tailwind CSS project, you need to extend the default theme in your Tailwind configuration file. This allows you to define new color values that can be used throughout your project using Tailwind's utility classes.


    
    // tailwind.config.js
    module.exports = {
      theme: {
        extend: {
          colors: {
            customBlue: '#1E40AF',
          },
        },
      },
    }

ADDITIONAL COMMENT:

After adding the custom color in your configuration, you can use it in your HTML with a class like "bg-customBlue" for background color or "text-customBlue" for text color.
Run "npx tailwindcss build" to regenerate your CSS if you're not using a watcher.
Ensure your Tailwind configuration file is correctly linked in your build process for changes to take effect.

✅ Answered with Tailwind CSS best practices.

How can I add a custom color to the Tailwind configuration and use it in my project?

Asked on Aug 30, 2025

Answer

The Q&A Network