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 for my project?
Asked on Apr 30, 2026
Answer
To create a custom color palette in Tailwind CSS, you need to extend the default theme configuration in your `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: {
brand: {
light: '#3AB0FF',
DEFAULT: '#1E90FF',
dark: '#1C7ED6',
},
},
},
},
}
<!-- END COPY / PASTE -->Additional Comment:
- Place the custom colors under the "extend" key to avoid overriding Tailwind's default colors.
- Use the custom colors in your HTML by applying classes like "bg-brand" or "text-brand-dark".
- Ensure your `tailwind.config.js` is correctly referenced in your build process for the changes to take effect.
Recommended Links:
