Back

Utility Classes

Tailwind CSS uses utility classes: small, single-purpose classes you combine directly in your HTML. No writing custom CSS files. Instead of writing `.button { background: blue; padding: 8px 16px; }` you write `bg-blue-500 px-4 py-2` directly on the element.

<!-- Button with Tailwind -->
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
  Click me
</button>

<!-- Card -->
<div class="bg-white shadow-md rounded-lg p-6 max-w-sm">
  <h2 class="text-xl font-bold text-gray-800">Card Title</h2>
  <p class="text-gray-600 mt-2">Card description here.</p>
</div>

Roadmap