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 Apr 01, 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 new colors or override existing ones using Tailwind's configuration options.
<!-- BEGIN COPY / PASTE -->
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
customBlue: {
light: '#3a86ff',
DEFAULT: '#00509e',
dark: '#001f54',
},
customGreen: '#00f5d4',
},
},
},
};
<!-- END COPY / PASTE -->Additional Comment:
- Use the "extend" key to add new colors without removing Tailwind's default colors.
- Define colors using a nested object for shades, or a single value for a single shade.
- After configuration, use your custom colors in your HTML with classes like "bg-customBlue" or "text-customGreen".
- Run "npx tailwindcss build" to apply changes if using a build process.
Recommended Links:
