Text and Background Colors in Tailwind CSS
Tailwind provides utility classes to easily set the color of text and backgrounds using a consistent design system. You can quickly apply predefined colors or customize them in your config.
1. Applying Text Color
Use text-{color} to set text color:
<p class="text-red-600">This is red text</p>
<p class="text-green-500">Success message</p>
<p class="text-gray-700">Subtle gray text</p>
This is red text
Success message
Subtle gray text
2. Applying Background Color
Use bg-{color} to set background color:
<div class="bg-blue-100 text-blue-800 p-4 rounded">Informational box</div>
<div class="bg-yellow-200 text-yellow-800 p-4 rounded">Warning message</div>
<div class="bg-gray-100 text-gray-700 p-4 rounded">Note</div>
Informational box
Warning message
Note
3. Interactive States
Combine with state prefixes like hover:, focus::
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">Hover Me</button>
4. Color Opacity
Use /opacity to make colors more transparent:
<div class="bg-red-500/20 p-4">Subtle red background</div>
<p class="text-black/60">Muted black text</p>
Subtle red background
Muted black text
5. Best Practices
- Use consistent color scales (e.g.,
gray-500togray-900) for hierarchy - Ensure sufficient contrast for readability (use tools like WebAIM)
- Manage light/dark modes with
dark:prefix and custom configs
Conclusion
Tailwind’s utility classes for colors let you style elements fast without writing custom CSS — while remaining flexible and accessible.