Tailwind CSS Utility Classes
Complete reference for all Tailwind CSS utility classes organized by category.
Layout Utilities
Display
<!-- Block, inline, flex, grid -->
<div class="block">Block</div>
<div class="inline">Inline</div>
<div class="flex">Flex</div>
<div class="grid">Grid</div>
<div class="hidden">Hidden</div>Docs: display.mdx
Flexbox
<!-- Container -->
<div class="flex flex-row flex-wrap items-center justify-between gap-4">
<!-- Items -->
<div class="flex-1">Flex item</div>
<div class="flex-shrink-0">Fixed</div>
</div>Docs: flex.mdx, flex-direction.mdx, flex-wrap.mdx, justify-content.mdx, align-items.mdx, gap.mdx
Grid
<!-- Grid container -->
<div class="grid grid-cols-3 gap-4">
<div>Item 1</div>
<div class="col-span-2">Item 2 (spans 2 columns)</div>
</div>
<!-- Responsive grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Grid items -->
</div>Docs: grid-template-columns.mdx, grid-column.mdx, grid-row.mdx, gap.mdx
Position
<div class="relative">
<div class="absolute top-0 right-0">Absolute</div>
</div>
<div class="fixed bottom-4 right-4">Fixed</div>
<div class="sticky top-0">Sticky header</div>Docs: position.mdx, top-right-bottom-left.mdx, z-index.mdx
Spacing Utilities
Padding
<div class="p-4">All sides</div>
<div class="px-6 py-3">Horizontal & vertical</div>
<div class="pt-8 pr-4 pb-6 pl-2">Individual sides</div>Scale: 0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64
Docs: padding.mdx
Margin
<div class="m-4">All sides</div>
<div class="mx-auto">Center horizontally</div>
<div class="-mt-4">Negative margin</div>Docs: margin.mdx
Gap
<div class="flex gap-4">Flex gap</div>
<div class="grid gap-x-6 gap-y-4">Grid gap (x/y)</div>Docs: gap.mdx
Typography Utilities
Font Family
<p class="font-sans">Sans-serif</p>
<p class="font-serif">Serif</p>
<p class="font-mono">Monospace</p>Docs: font-family.mdx
Font Size
<p class="text-xs">Extra small</p>
<p class="text-sm">Small</p>
<p class="text-base">Base</p>
<p class="text-lg">Large</p>
<p class="text-xl">Extra large</p>
<p class="text-2xl">2XL</p>
<p class="text-3xl">3XL</p>Docs: font-size.mdx
Font Weight
<p class="font-thin">Thin (100)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>Docs: font-weight.mdx
Text Alignment
<p class="text-left">Left</p>
<p class="text-center">Center</p>
<p class="text-right">Right</p>
<p class="text-justify">Justify</p>Docs: text-align.mdx
Line Height
<p class="leading-tight">Tight (1.25)</p>
<p class="leading-normal">Normal (1.5)</p>
<p class="leading-relaxed">Relaxed (1.625)</p>Docs: line-height.mdx
Color Utilities
Text Color
<p class="text-black">Black</p>
<p class="text-gray-500">Gray 500</p>
<p class="text-blue-600">Blue 600</p>
<p class="text-red-500 dark:text-red-400">Red (dark mode)</p>Scale: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
Docs: color.mdx, colors.mdx
Background Color
<div class="bg-white">White</div>
<div class="bg-gray-100">Gray 100</div>
<div class="bg-blue-500">Blue 500</div>Docs: background-color.mdx
Border Color
<div class="border border-gray-300">Gray border</div>
<div class="border-2 border-blue-500">Blue border</div>Docs: border-color.mdx
Border Utilities
Border Width
<div class="border">Default (1px)</div>
<div class="border-2">2px all sides</div>
<div class="border-t-4">Top 4px</div>
<div class="border-x-2">Horizontal 2px</div>Docs: border-width.mdx
Border Radius
<div class="rounded">Small (0.25rem)</div>
<div class="rounded-md">Medium (0.375rem)</div>
<div class="rounded-lg">Large (0.5rem)</div>
<div class="rounded-full">Full (9999px)</div>
<div class="rounded-t-lg">Top corners only</div>Docs: border-radius.mdx
Effect Utilities
Shadow
<div class="shadow">Default shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>Docs: box-shadow.mdx, text-shadow.mdx
Opacity
<div class="opacity-0">Invisible</div>
<div class="opacity-50">Half visible</div>
<div class="opacity-100">Fully visible</div>Docs: opacity.mdx
Filters
<img class="blur-sm" src="..." />
<img class="brightness-75" src="..." />
<img class="contrast-125" src="..." />
<img class="grayscale" src="..." />Docs: filter-*.mdx (blur, brightness, contrast, etc.)
State Variants
Hover
<button class="bg-blue-500 hover:bg-blue-600">
Hover me
</button>Focus
<input class="border focus:border-blue-500 focus:ring-2 focus:ring-blue-200" />Active
<button class="bg-blue-500 active:bg-blue-700">
Click me
</button>Disabled
<button class="bg-blue-500 disabled:bg-gray-300 disabled:cursor-not-allowed" disabled>
Disabled
</button>Docs: hover-focus-and-other-states.mdx
Documentation Index
| Category | Files | |----------|-------| | Layout | display.mdx, flex-.mdx, grid-.mdx, position.mdx | | Spacing | padding.mdx, margin.mdx, gap.mdx | | Typography | font-.mdx, text-.mdx, line-.mdx | | Colors | color.mdx, background-color.mdx, border-color.mdx | | Borders | border-.mdx, border-radius.mdx | | Effects | box-shadow.mdx, opacity.mdx, filter-*.mdx | | States | hover-focus-and-other-states.mdx |