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 Jan 24, 2026
Answer
To create a custom color palette in Tailwind CSS, you need to extend the default theme in your Tailwind configuration file. This allows you to add your own colors while still retaining the default Tailwind colors.
<!-- BEGIN COPY / PASTE -->
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
customBlue: '#1E40AF',
customGreen: '#10B981',
},
},
},
}
<!-- END COPY / PASTE -->Additional Comment:
- Place your custom colors under the "extend" key to avoid overwriting the default palette.
- Use descriptive names for your custom colors to maintain clarity in your project.
- After adding custom colors, you can use them in your HTML with classes like "bg-customBlue" or "text-customGreen".
- Run "npx tailwindcss build" to compile your CSS with the updated configuration.
Recommended Links:
