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

How can I customize Tailwind's color palette?

Asked on Oct 31, 2025

Answer

To customize Tailwind's color palette, you can extend the default theme in the `tailwind.config.js` file. This allows you to add or modify colors according to your design needs.

<!-- BEGIN COPY / PASTE -->
    // tailwind.config.js
    module.exports = {
      theme: {
        extend: {
          colors: {
            customBlue: {
              light: '#3a86ff',
              DEFAULT: '#00509e',
              dark: '#001f54',
            },
          },
        },
      },
    }
    <!-- END COPY / PASTE -->

Additional Comment:

To apply the custom colors in your HTML, use classes like "bg-customBlue", "text-customBlue-light", or "border-customBlue-dark".
Extending the theme ensures you keep the default colors while adding your custom ones.
Remember to restart your development server after making changes to the configuration file.

✅ Answered with Tailwind CSS best practices.

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

How can I customize Tailwind's color palette?

Asked on Oct 31, 2025

Answer

The Q&A Network