How do 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 do I customize the default color palette in Tailwind?

Asked on Nov 06, 2025

Answer

To customize the default color palette in Tailwind CSS, you can extend or override the colors in your `tailwind.config.js` file. This allows you to define your own color scheme that Tailwind will use throughout your project.

// BEGIN COPY / PASTE
    module.exports = {
      theme: {
        extend: {
          colors: {
            customBlue: '#1E40AF',
            customGreen: '#10B981',
          },
        },
      },
    }
    // END COPY / PASTE

Additional Comment:

Use the `extend` key to add new colors without removing existing ones.
To completely replace the default colors, define your colors directly under `theme` instead of using `extend`.
After updating the configuration, use the new colors in your HTML with classes like `bg-customBlue` or `text-customGreen`.
Run `npx tailwindcss build` to apply changes if you're using a build process.

✅ Answered with Tailwind CSS best practices.

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

How do I customize the default color palette in Tailwind?

Asked on Nov 06, 2025

Answer

Real Questions. Clear Answers.