Tailwindcss Utility Classes

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