How do you apply custom colors in Tailwind's config file?

Ask any question about Tailwind CSS here... and get an instant response.

Post this Question & Answer:

How do you apply custom colors in Tailwind's config file?

Asked on Nov 19, 2025

Answer

In Tailwind CSS, you can apply custom colors by extending the default color palette in the `tailwind.config.js` file. This allows you to define your own color names and values, which can then be used throughout your project using Tailwind's utility classes.

// tailwind.config.js
    module.exports = {
      theme: {
        extend: {
          colors: {
            'brand-blue': '#1E40AF',
            'brand-red': '#DC2626',
          },
        },
      },
    };

Additional Comment:

To use your custom colors, apply them as classes like "bg-brand-blue" or "text-brand-red".
Ensure you restart your development server after updating the configuration file to see changes.
Custom colors can be defined using any valid CSS color format, such as HEX, RGB, or HSL.
Using descriptive names for custom colors helps maintain readability and consistency in your codebase.

✅ Answered with Tailwind CSS best practices.

Ask any question about Tailwind CSS here... and get an instant response.

How do you apply custom colors in Tailwind's config file?

Asked on Nov 19, 2025

Answer

Real Questions. Clear Answers.