How do I customize Tailwind's default color palette?

Question

Q&A Network · Accepted Answer

To customize Tailwind's default color palette, you can extend or override the colors in your `tailwind.config.js` file. This allows you to define a custom set of colors that Tailwind will use throughout your project.


    
    // tailwind.config.js
    module.exports = {
      theme: {
        extend: {
          colors: {
            primary: '#1DA1F2',
            secondary: '#14171A',
            accent: '#657786',
          },
        },
      },
    }

ADDITIONAL COMMENT:

Use the "extend" key to add new colors without removing Tailwind's default colors.
To completely replace the color palette, define your colors directly under "theme" without using "extend".
After updating the configuration, rebuild your CSS to see the changes take effect.
Custom colors can be used with Tailwind's utility classes, e.g., "bg-primary" or "text-secondary".

✅ Answered with Tailwind CSS best practices.

How do I customize Tailwind's default color palette?

Asked on Oct 07, 2025

Answer

The Q&A Network