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 for my project?
Asked on May 01, 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 a new set of colors that can be used throughout your project.
// BEGIN COPY / PASTE
module.exports = {
theme: {
extend: {
colors: {
brand: {
light: '#3AB0FF',
DEFAULT: '#007BFF',
dark: '#0056B3',
},
},
},
},
}
// END COPY / PASTEAdditional Comment:
- Place the `tailwind.config.js` file at the root of your project.
- Use the custom colors in your HTML by applying classes like `bg-brand-light`, `text-brand`, or `border-brand-dark`.
- Extending the theme ensures you retain all default Tailwind colors while adding your custom palette.
- Run your build process after updating the configuration to see changes reflected in your project.
Recommended Links:
