Complete Tailwind CSS utility classes reference - Layout, spacing, typography, colors, borders, effects
From fuse-tailwindcssnpx claudepluginhub fusengine/agents --plugin fuse-tailwindcssThis skill uses the workspace's default tool permissions.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Complete reference for all Tailwind CSS utility classes organized by category.
<!-- 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
<!-- 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 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
<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
<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
<div class="m-4">All sides</div>
<div class="mx-auto">Center horizontally</div>
<div class="-mt-4">Negative margin</div>
Docs: margin.mdx
<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
<p class="font-sans">Sans-serif</p>
<p class="font-serif">Serif</p>
<p class="font-mono">Monospace</p>
Docs: font-family.mdx
<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
<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
<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
<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
<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
<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
<div class="border border-gray-300">Gray border</div>
<div class="border-2 border-blue-500">Blue border</div>
Docs: border-color.mdx
<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
<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
<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
<div class="opacity-0">Invisible</div>
<div class="opacity-50">Half visible</div>
<div class="opacity-100">Fully visible</div>
Docs: opacity.mdx
<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.)
<button class="bg-blue-500 hover:bg-blue-600">
Hover me
</button>
<input class="border focus:border-blue-500 focus:ring-2 focus:ring-blue-200" />
<button class="bg-blue-500 active:bg-blue-700">
Click me
</button>
<button class="bg-blue-500 disabled:bg-gray-300 disabled:cursor-not-allowed" disabled>
Disabled
</button>
Docs: hover-focus-and-other-states.mdx
| 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 |