How can I customize the default colors in Tailwind?

Question

Q&A Network · Accepted Answer

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


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

ADDITIONAL COMMENT:

The "extend" key allows you to add new colors without removing the existing default colors.
Use the "colors" key to define your custom color names and values.
After configuring, you can use these colors in your HTML with classes like "bg-primary" or "text-secondary".
Run "npx tailwindcss build" to apply changes if you are using a build process.

✅ Answered with Tailwind CSS best practices.

How can I customize the default colors in Tailwind?

Asked on Sep 26, 2025

Answer

The Q&A Network