Tailwind Reference

Tailwind CSS

Most useful utility classes for layout and design.

All Topics

Layout Utilities

flex / flex-col / flex-wrap

flex = display:flex. flex-col = column direction. flex-wrap for wrapping. Combine freely.

Example: <div class="flex flex-col md:flex-row flex-wrap gap-4">

grid / grid-cols-{n}

CSS Grid. grid-cols-1 to grid-cols-12. Responsive: sm:grid-cols-2 md:grid-cols-3.

Example: <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">

col-span-{n} / row-span-{n}

Make a grid item span multiple columns/rows. col-span-full spans all columns.

Example: <div class="col-span-2 md:col-span-3 row-span-2">

gap-{n} / gap-x-{n} / gap-y-{n}

Grid/flex gaps — gap-4 = 1rem. Separate x and y gaps with gap-x/gap-y.

Example: <div class="grid grid-cols-3 gap-x-8 gap-y-4">

items-{align} / justify-{align}

Flex/grid cross-axis (items-) and main-axis (justify-) alignment. center, start, end, between, around, evenly.

Example: <div class="flex justify-between items-center">

place-items-center / place-content-center

Shorthand for align + justify simultaneously. Perfect for centering grid/flex content.

Example: <div class="grid place-items-center min-h-screen"> 

container / mx-auto / max-w-{size}

Container class + mx-auto centers it. max-w-sm through max-w-screen-2xl for width caps.

Example: <div class="container mx-auto max-w-6xl px-4">

size-{n} / w-{n} / h-{n}

size-{n} = both width and height (Tailwind v3.4+). w-full, h-screen, w-1/2, h-[500px].

Example: <div class="size-12 rounded-full"> 

Typography

text-{size}

xs (0.75rem), sm, base (1rem), lg, xl, 2xl…9xl. Responsive: md:text-2xl.

Example: <h1 class="text-4xl font-bold tracking-tight md:text-6xl">

font-{weight}

thin(100), extralight, light, normal(400), medium, semibold, bold(700), extrabold, black(900).

Example: <p class="font-semibold text-gray-900">

leading-{size} / tracking-{size}

Line-height / letter-spacing. leading-tight, leading-relaxed. tracking-tight, tracking-widest.

Example: <h2 class="leading-none tracking-tight font-black">

truncate / line-clamp-{n}

truncate = single-line ellipsis. line-clamp-3 = multiline ellipsis (3 lines max).

Example: <p class="line-clamp-2 text-gray-600">

prose (Tailwind Typography)

@tailwindcss/typography plugin. Beautifully styles HTML content (blog posts, markdown output).

Example: <article class="prose prose-lg prose-indigo max-w-none">

text-balance / text-pretty

text-balance balances heading wrapping. text-pretty avoids orphan words (last line single word).

Example: <h1 class="text-balance"> <p class="text-pretty">

Colors & Backgrounds

text-{color}-{shade}

50-950 shade scale. slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose.

Example: <p class="text-indigo-600 dark:text-indigo-400">

bg-gradient-to-{dir}

Gradient direction + from-{color} + via-{color} + to-{color} composition.

Example: <div class="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500">

opacity-{n} / {property}/opacity

opacity-0 to opacity-100. bg-black/50 = background with 50% opacity using slash syntax.

Example: <div class="bg-black/40 text-white/90 backdrop-blur-sm">

ring-{n} / ring-{color}

Focus rings with box-shadow. ring-2 ring-offset-2 ring-blue-500 for accessible focus styles.

Example: <input class="focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 focus:outline-none">

dark: variant

Apply utilities only in dark mode. Configure with darkMode: 'class' or 'media' strategy.

Example: <div class="bg-white dark:bg-gray-900 text-black dark:text-white">

Arbitrary values [...]

Use any CSS value inline with bracket notation. No need to extend config for one-offs.

Example: <div class="top-[117px] w-[42rem] bg-[#1da1f2] text-[clamp(1rem,3vw,2rem)]">

@apply in CSS

Use Tailwind utilities inside custom CSS classes — for third-party HTML or component styles.

Example: .btn-primary { @apply bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg; }

Interactivity & Animation

hover: / focus: / active:

State variants for interactive styling. Combine multiple: hover:bg-blue-600 focus:ring-2.

Example: <button class="bg-blue-500 hover:bg-blue-600 active:scale-95 transition">

transition / transition-{property}

Enable smooth transitions on property changes. Set duration and easing with duration/ease.

Example: <div class="transition-all duration-300 ease-in-out hover:scale-105">

animate-{name}

Built-in: animate-spin, animate-ping, animate-pulse, animate-bounce. Customize in config.

Example: <div class="animate-pulse bg-gray-200 rounded-lg h-4"></div>

group / group-hover:

Style children based on parent state. Add 'group' to parent, 'group-hover:x' to child.

Example: <div class="group"><span class="group-hover:text-blue-500 group-hover:translate-x-1">

peer / peer-*:

Style based on sibling's state. Mark input 'peer', style its sibling with peer-invalid: peer-focus:.

Example: <input class="peer"><span class="hidden peer-invalid:block text-red-500">Invalid</span>

scroll-smooth / scroll-mt-{n}

Smooth scrolling for anchor links. scroll-mt-{n} adds offset for sticky headers (scroll margin top).

Example: <html class="scroll-smooth"> <section class="scroll-mt-20" id="about">

backdrop-blur / backdrop-filter

Blur content behind a semi-transparent element — glassmorphism effect.

Example: <nav class="bg-white/80 backdrop-blur-md border-b border-white/20 sticky top-0">

Responsive & Config

Breakpoints: sm md lg xl 2xl

640px / 768px / 1024px / 1280px / 1536px. Mobile-first: class applies from breakpoint upward.

Example: <div class="w-full md:w-1/2 lg:w-1/3">

min-[val]: / max-[val]:

Arbitrary breakpoint variants — use any pixel value without adding to config.

Example: <div class="min-[900px]:flex max-[600px]:hidden">

tailwind.config.js extend

Add custom values to theme.extend — colors, fonts, spacing, breakpoints without replacing defaults.

Example: extend: { colors: { brand: { 500: '#6366f1' } }, fontFamily: { sans: ['Inter', 'system-ui'] } }

@tailwind directives

@tailwind base / components / utilities — inject each layer into your CSS entry file.

Example: @tailwind base; @tailwind components; @tailwind utilities;

safelist: [...] in config

Force-include utility classes that are dynamically generated (e.g., from string interpolation in JS).

Example: safelist: [{ pattern: /bg-(red|green|blue)-(400|500|600)/ }]

@layer components

Add reusable component classes in the components layer — overridable by utilities, unlike just CSS.

Example: @layer components { .btn { @apply px-4 py-2 rounded-lg font-semibold transition; } }