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 Dec 09, 2025

Answer

Customizing the default color palette in Tailwind CSS involves extending or overriding the default theme configuration in your `tailwind.config.js` file. This allows you to define your own color values that can be used throughout your project.

<!-- BEGIN COPY / PASTE -->
    // tailwind.config.js
    module.exports = {
      theme: {
        extend: {
          colors: {
            primary: '#1DA1F2',
            secondary: '#14171A',
            accent: '#657786',
          },
        },
      },
    }
    <!-- END COPY / PASTE -->

Additional Comment:

To customize colors, use the `extend` key to add new colors without removing existing ones.
Define colors using any CSS color format, such as HEX, RGB, or HSL.
After updating the configuration, use the new color names as Tailwind utility classes like `bg-primary` or `text-secondary`.
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 can I customize the default color palette in Tailwind?

Asked on Dec 09, 2025

Answer

Real Questions. Clear Answers.