How Tailwind Works

Tailwind provides hundreds of small, single-purpose classes.

When you use a class like bg-blue-500, Tailwind knows this corresponds to the CSS rule background-color: #3b82f6;.

Building with Utilities

Let’s look at a simple card:

<div class="bg-white shadow-md rounded-lg p-6">
  <h2 class="text-xl font-bold">Utility-First</h2>
</div>

Here is how these classes map to CSS concepts:

• bg-white: background-color: white;
• shadow-md: applies a medium box-shadow
• rounded-lg: border-radius for rounded corners
• p-6: padding on all sides
• text-xl: larger text size
• font-bold: font-weight: 700;

Try It Yourself

In the playground, change bg-white to bg-gray-100 and see the background change instantly.