Color Utilities and Custom Colors in Tailwind CSS

1. Text and Background Colors

Tailwind provides predefined color classes like:

<p class="text-red-500">This is red text</p>
<div class="bg-blue-100 text-blue-800 p-4">Info box</div>
            

2. Hover and Focus States

You can change colors on interaction:

<button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded">
    Submit
</button>
            

3. Customizing Colors in Tailwind

You can define your own palette in tailwind.config.js:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          light: '#3AB0FF',
          DEFAULT: '#0080FF',
          dark: '#0057B8',
        }
      }
    }
  }
}
            

Then use it like this:

<div class="bg-brand text-white p-4">Brand Primary Background</div>
            

4. Color Opacity

Tailwind supports color opacity using / notation:

<div class="bg-red-500/30 p-4">Light red background</div>
<p class="text-blue-700/80">Faded blue text</p>
            

5. Best Practices

• Stick to a defined color palette for brand consistency
• Use text-opacity and bg-opacity with Tailwind v2, or /opacity in v3+
• Keep accessibility in mind — ensure good contrast ratios

Conclusion

Tailwind’s color utilities help you build beautiful, consistent UIs quickly — and you can fully customize them to match your brand.