How can I customize the color palette in Tailwind CSS?
Asked on Oct 13, 2025
Answer
To customize the color palette in Tailwind CSS, you need to modify the Tailwind configuration file, typically `tailwind.config.js`. This allows you to define your own color values or extend the existing ones.
<!-- BEGIN COPY / PASTE -->
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
customBlue: '#1E40AF',
customGreen: '#10B981',
},
},
},
}
<!-- END COPY / PASTE -->Additional Comment:
- Use the `extend` key to add new colors without overriding the default palette.
- Define colors using any valid CSS color format, such as hex, RGB, or HSL.
- After updating the configuration, rebuild your CSS to see the changes.
- Custom colors can be used in your HTML with classes like `bg-customBlue` or `text-customGreen`.
Recommended Links: