Utility Classes

Code

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>

<div class="flex items-center justify-between p-4 bg-white shadow rounded-lg">
  <h2 class="text-xl font-semibold text-gray-800">Title</h2>
  <span class="text-sm text-gray-500">Subtitle</span>
</div>

<p class="max-w-prose text-gray-700 leading-relaxed">
  Body text constrained to a readable measure.
</p>

<img class="w-24 h-24 object-cover rounded-full" src="avatar.jpg" alt="Avatar">

Explanation

Tailwind composes UI from small utility classes that each do one thing: bg-blue-500 sets background, px-4 sets horizontal padding, rounded-lg rounds corners. Combining utilities directly in HTML avoids context-switching to CSS files and keeps styles co-located with markup. The result is small, cacheable CSS with no unused selectors.

More Tailwind CSS Snippets