Tailwind CSS custom colors
by Csaba Kissi
Published: February 1, 2023
In Tailwind CSS, you can add a custom color by defining it in the theme.extend section of your configuration file (tailwind.config.js).
Here's an example:
module.exports = {
theme: {
extend: {
colors: {
'custom-color': '#ffa600',
},
},
},
variants: {},
plugins: [],
}
Then, you can use the custom color in your HTML like this:
<div class="bg-custom-color p-6">
<p class="text-white">Custom Color</p>
</div>
Note that the custom color can be used in several different ways in HTML, such as for text color, border color, shadow color, etc. Simply replace bg with text, a border, or a shadow, as necessary, and you're all set!