Core Utility Classes

Tailwind provides thousands of utility classes covering every CSS property. Once you learn the naming pattern, you can write CSS at incredible speed without ever leaving your HTML.

Example

<!-- Spacing: m-{size}, p-{size} (size: 0,1,2,4,6,8,10,12,16,20,24,32,40,48,64) -->
<div class="m-4 p-6">margin 1rem, padding 1.5rem</div>
<div class="mx-auto px-4">horizontal auto margin, horizontal padding</div>

<!-- Sizing -->
<div class="w-full max-w-md h-16">width, max-width, height</div>
<div class="w-1/2 h-screen">50% width, full viewport height</div>

<!-- Typography -->
<p class="text-xl font-bold text-gray-900">Large bold dark text</p>
<p class="text-sm text-gray-500 italic">Small muted italic text</p>
<p class="text-center uppercase tracking-widest">Centered uppercase</p>

<!-- Colors -->
<div class="bg-blue-500 text-white">Blue background</div>
<div class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white">
  Gradient background
</div>

<!-- Borders & Rounded -->
<div class="border border-gray-200 rounded-xl shadow-sm">Rounded card</div>
<div class="border-2 border-indigo-500 rounded-full">Circle border</div>

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned