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

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

Post this Question & Answer:

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

Asked on Aug 30, 2025

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.

<!-- BEGIN COPY / PASTE -->
    // tailwind.config.js
    module.exports = {
      theme: {
        extend: {
          colors: {
            customBlue: '#1E40AF',
          },
        },
      },
    }
    <!-- END COPY / PASTE -->

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.

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

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

Asked on Aug 30, 2025

Answer

Real Questions. Clear Answers.