Ask any question about Tailwind CSS here... and get an instant response.
How can I customize Tailwind's color palette?
Asked on Oct 31, 2025
Answer
To customize Tailwind's color palette, you can extend the default theme in the `tailwind.config.js` file. This allows you to add or modify colors according to your design needs.
<!-- BEGIN COPY / PASTE -->
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
customBlue: {
light: '#3a86ff',
DEFAULT: '#00509e',
dark: '#001f54',
},
},
},
},
}
<!-- END COPY / PASTE -->Additional Comment:
- To apply the custom colors in your HTML, use classes like "bg-customBlue", "text-customBlue-light", or "border-customBlue-dark".
- Extending the theme ensures you keep the default colors while adding your custom ones.
- Remember to restart your development server after making changes to the configuration file.
Recommended Links:
