Utility Classes

Utility classes are the building blocks of Tailwind. Every class does exactly one thing.

Combining Utilities

You can chain as many classes as you want to achieve complex designs.

<div class="border border-blue-500 bg-blue-50 text-blue-800 px-4 py-3 rounded">
  <strong>Notice:</strong> Your profile has been updated.
</div>

Common Mistakes

• Typos: Tailwind relies on exact class names. bg-blu-500 won’t work; it must be bg-blue-500.
• Conflicts: If you apply text-red-500 and text-blue-500 on the same element, the result might be unpredictable based on stylesheet order. Only use one utility per CSS property.

Exercise

Try creating an alert box in the playground.