Core Utility Classes

Tailwind provides hundreds of utility classes organized into categories. Understanding these core utilities is essential for building any layout.

Spacing Utilities

Tailwind uses a consistent spacing scale based on rem units:

<!-- Padding -->
<div class="p-4">Padding on all sides (1rem)</div>
<div class="px-4">Horizontal padding</div>
<div class="py-4">Vertical padding</div>
<div class="pt-4">Padding top</div>
<div class="pr-4">Padding right</div>
<div class="pb-4">Padding bottom</div>
<div class="pl-4">Padding left</div>

<!-- Margin -->
<div class="m-4">Margin on all sides</div>
<div class="mx-auto">Center horizontally</div>
<div class="my-8">Vertical margin</div>
<div class="mt-4">Margin top</div>
<div class="-mt-4">Negative margin top</div>

Spacing Scale

Class	Value
0	0px
1	0.25rem (4px)
2	0.5rem (8px)
4	1rem (16px)
6	1.5rem (24px)
8	2rem (32px)
12	3rem (48px)
16	4rem (64px)

Sizing Utilities

<!-- Width -->
<div class="w-full">100% width</div>
<div class="w-1/2">50% width</div>
<div class="w-1/3">33.33% width</div>
<div class="w-64">16rem width</div>
<div class="w-screen">100vw</div>
<div class="max-w-md">Max width medium</div>
<div class="min-w-0">Min width 0</div>

<!-- Height -->
<div class="h-full">100% height</div>
<div class="h-screen">100vh</div>
<div class="h-64">16rem height</div>
<div class="min-h-screen">Minimum 100vh</div>

Typography Utilities

<!-- Font Size -->
<p class="text-xs">Extra small (0.75rem)</p>
<p class="text-sm">Small (0.875rem)</p>
<p class="text-base">Base (1rem)</p>
<p class="text-lg">Large (1.125rem)</p>
<p class="text-xl">Extra large (1.25rem)</p>
<p class="text-2xl">2XL (1.5rem)</p>
<p class="text-4xl">4XL (2.25rem)</p>

<!-- Font Weight -->
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>

<!-- Text Alignment -->
<p class="text-left">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-right">Right aligned</p>
<p class="text-justify">Justified text</p>

<!-- Line Height -->
<p class="leading-none">No line height</p>
<p class="leading-tight">Tight (1.25)</p>
<p class="leading-normal">Normal (1.5)</p>
<p class="leading-relaxed">Relaxed (1.625)</p>
<p class="leading-loose">Loose (2)</p>

Color Utilities

<!-- Text Colors -->
<p class="text-black">Black text</p>
<p class="text-white">White text</p>
<p class="text-gray-500">Gray 500 text</p>
<p class="text-blue-600">Blue 600 text</p>
<p class="text-red-500">Red 500 text</p>

<!-- Background Colors -->
<div class="bg-white">White background</div>
<div class="bg-gray-100">Light gray background</div>
<div class="bg-blue-500">Blue background</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-500">Gradient</div>

<!-- Border Colors -->
<div class="border border-gray-300">Gray border</div>
<div class="border-2 border-blue-500">Blue border</div>

Border Utilities

<!-- Border Width -->
<div class="border">1px border</div>
<div class="border-2">2px border</div>
<div class="border-4">4px border</div>
<div class="border-t">Top border only</div>
<div class="border-b-2">Bottom 2px border</div>

<!-- Border Radius -->
<div class="rounded">Small radius (0.25rem)</div>
<div class="rounded-md">Medium radius (0.375rem)</div>
<div class="rounded-lg">Large radius (0.5rem)</div>
<div class="rounded-xl">XL radius (0.75rem)</div>
<div class="rounded-full">Full radius (circle)</div>
<div class="rounded-t-lg">Top corners only</div>

Shadow Utilities

<div class="shadow-sm">Small shadow</div>
<div class="shadow">Default shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">XL shadow</div>
<div class="shadow-2xl">2XL shadow</div>
<div class="shadow-none">No shadow</div>

Practical Example

<!-- A styled button -->
<button class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 transition-colors">
  Click Me
</button>

<!-- A card component -->
<div class="max-w-sm mx-auto bg-white rounded-xl shadow-lg p-6">
  <h3 class="text-xl font-bold text-gray-900 mb-2">Card Title</h3>
  <p class="text-gray-600 leading-relaxed">
    This is a beautifully styled card using only Tailwind utility classes.
  </p>
</div>