Ask any question about Tailwind CSS here... and get an instant response.
Post this Question & Answer:
How can I use Tailwind CSS to create a custom theme with different color palettes?
Asked on Mar 24, 2026
Answer
To create a custom theme with different color palettes in Tailwind CSS, you can extend the default configuration using the `tailwind.config.js` file. This allows you to define custom colors that can be used throughout your project.
<!-- BEGIN COPY / PASTE -->
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
light: '#6D28D9',
DEFAULT: '#5B21B6',
dark: '#4C1D95',
},
secondary: {
light: '#FBBF24',
DEFAULT: '#F59E0B',
dark: '#D97706',
},
},
},
},
}
<!-- END COPY / PASTE -->Additional Comment:
- Use the `extend` key to add new colors without overriding Tailwind's default colors.
- Access these colors in your HTML using classes like `bg-primary` or `text-secondary-dark`.
- Ensure you rebuild your CSS after modifying the configuration to see the changes.
- This approach allows for easy theme customization and consistency across your application.
Recommended Links:
