Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From fuse-tailwindcss
References all Tailwind CSS utility classes for layout, spacing, typography, colors, borders, effects with HTML examples. Use for quick class lookups during frontend styling.
npx claudepluginhub fusengine/agents --plugin fuse-tailwindcssHow this skill is triggered — by the user, by Claude, or both
Slash command
/fuse-tailwindcss:tailwindcss-utility-classesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Complete reference for all Tailwind CSS utility classes organized by category.
Provides complete reference for Tailwind CSS utility classes covering layout, spacing, typography, colors, borders, transforms, and transitions.
References Tailwind CSS utility classes for layout, spacing, typography, colors, backgrounds, borders, shadows, effects, and responsive design. Aids utility-first CSS composition.
Provides Tailwind CSS 3.x utility classes reference for spacing, colors, typography, flexbox, grid, responsive designs, state variants, dark mode, and tailwind.config.js configuration.
Share bugs, ideas, or general feedback.
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 |