Ask any question about Tailwind CSS here... and get an instant response.
Post this Question & Answer:
How can I create a custom color palette in Tailwind CSS?
Asked on Feb 04, 2026
Answer
In Tailwind CSS, you can create a custom color palette by extending the default theme in your `tailwind.config.js` file. This allows you to define your own colors while still retaining the default colors provided by Tailwind.
<!-- BEGIN COPY / PASTE -->
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
customBlue: {
light: '#3a86ff',
DEFAULT: '#0056b3',
dark: '#002a5e',
},
customGreen: {
light: '#a8dadc',
DEFAULT: '#457b9d',
dark: '#1d3557',
},
},
},
},
}
<!-- END COPY / PASTE -->Additional Comment:
- Use the `extend` key to add new colors without overriding the default palette.
- Define colors with shades like `light`, `DEFAULT`, and `dark` for flexibility.
- Access your custom colors in HTML using classes like `bg-customBlue` or `text-customGreen-dark`.
- After updating `tailwind.config.js`, ensure you rebuild your CSS to apply changes.
Recommended Links:
