Tailwind CSS custom colors

Csaba Kissi
by Csaba Kissi
Published: February 1, 2023
tailwindcss

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!