How can I customize the default color palette in Tailwind?

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

Post this Question & Answer:

How can I customize the default color palette in Tailwind?

Asked on Nov 23, 2025

Answer

To customize the default color palette in Tailwind CSS, you can extend the theme configuration in your Tailwind config file. This allows you to add new colors or override existing ones.

<!-- BEGIN COPY / PASTE -->
    // tailwind.config.js
    module.exports = {
      theme: {
        extend: {
          colors: {
            customBlue: '#1E40AF',
            customGreen: {
              light: '#6EE7B7',
              DEFAULT: '#10B981',
              dark: '#047857'
            }
          }
        }
      }
    }
    <!-- END COPY / PASTE -->

Additional Comment:

Use the "extend" key to add new colors without removing Tailwind's default colors.
Define colors in a nested object to create shades (e.g., light, DEFAULT, dark).
After updating the config, use the new color classes like "bg-customBlue" or "text-customGreen-light".
Run your build process to see the changes take effect in your project.

✅ Answered with Tailwind CSS best practices.

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

How can I customize the default color palette in Tailwind?

Asked on Nov 23, 2025

Answer

Real Questions. Clear Answers.