// Field Handbook · tailwindcss.com/docs

Tailwind
CSS

// utility-first · responsive · composable · zero runtime

Build any design, directly in your HTML. No context switching, no naming things, no specificity wars — just classes that map 1:1 to CSS properties.

Utility-First v4 CSS-First Config Zero Dead Code JIT Compiler Angular & React

What is Tailwind CSS?

// UTILITY-FIRST CSS FRAMEWORK

Tailwind CSS is a utility-first CSS framework that provides low-level, single-purpose classes — each one maps directly to a CSS property. Instead of writing .btn-primary { ... }, you compose styles in HTML using classes like bg-blue-500 text-white px-4 py-2 rounded.

Created by Adam Wathan in 2019, Tailwind reached v4 in 2025 with a completely rewritten engine written in Rust and TypeScript — making it orders of magnitude faster, and switching from a JavaScript config file to a pure CSS configuration model.

Utility-First

Each class does one thing. flex sets display: flex. text-lg sets font-size. You compose design by stacking small, predictable classes.

No Pre-built Components

Unlike Bootstrap, Tailwind ships zero styled components. It gives you a design system — a constraint palette — and you build everything yourself from primitives.

Zero Unused CSS

Tailwind's compiler scans your source files and only outputs classes you actually use. Final CSS is typically 5–20 KB, not hundreds.

HTML — Traditional CSS vs Tailwind

/* ❌ Traditional approach — write CSS separately */
/* styles.css */
.alert-card {
  background-color: #eff6ff; border: 1px solid #bfdbfe;
  border-radius: 8px; padding: 16px; display: flex; align-items: center;
}

/* HTML */
<div class="alert-card">...</div>

/* ✅ Tailwind — everything inline, no separate CSS */
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-center">
  <svg class="w-5 h-5 text-blue-500 mr-3">...</svg>
  <p class="text-blue-800 text-sm font-medium">
    Connection established successfully.
  </p>
</div>

ℹ

The mental model shift: In Tailwind, you style elements directly rather than abstracting styles into named classes. Your HTML is more verbose — but your CSS file barely grows, you never have naming conflicts, and deleting HTML deletes its styles automatically.

Why Use Tailwind?

// KEY ADVANTAGES

The case for Tailwind is strongest when you need full design control, fast iteration, and a predictable, low-overhead styling model. Here's why teams adopt it:

No Context Switching DX

Stay in your HTML or JSX template. You never need to create a new CSS file, invent a class name, or jump to a stylesheet to change padding by 4px. Style and structure live together.

Consistent Design Tokens Design

Tailwind's scale (spacing p-1 = 4px, p-2 = 8px...) forces visual consistency. You stop using arbitrary pixel values and instead pick from a deliberately limited palette — making UIs look coherent by default.

Tiny Production CSS Perf

Traditional CSS grows over time — dead selectors, duplicated rules. Tailwind's compiler generates only the exact CSS you use. Most production sites ship under 20 KB of Tailwind CSS.

Refactoring is Safe Maintainability

In traditional CSS, deleting an HTML component might leave orphaned styles. In Tailwind, when you delete an element, all its styles vanish with it — styles are coupled to the markup by design.

Responsive by Default Mobile-First

Every utility can be prefixed with a breakpoint: md:flex, lg:grid-cols-3. Responsive design is a first-class feature — no media query boilerplate required.

No Naming Fatigue Cognitive

Naming CSS classes is notoriously hard (.wrapper-inner-section-header-sub). Tailwind eliminates this entirely — classes describe what they do, not what they are.

✓

Real-world adoption: As of 2025, Tailwind CSS has over 93,700 GitHub stars and is used by companies including GitHub, NASA, Shopify, and Stripe. It's the #1 CSS framework in the State of CSS survey for developer satisfaction.

When to Use Tailwind

// DECISION FRAMEWORK

✓ Use Tailwind when...

Building custom, bespoke UIs with a unique look
Working in component-based frameworks (React, Angular, Vue, Svelte)
Team of designers + developers who share design tokens
Performance matters — minimal CSS payload required
Starting a greenfield project
You want design-system constraints enforced by default
You need full responsive control without media query boilerplate

✕ Consider alternatives when...

Prototyping quickly and UX polish isn't the priority yet
Adding CSS to a legacy project that can't use a build step
Non-developers need to write or maintain the HTML
You need pre-built, accessible component patterns immediately (consider Headless UI + Tailwind)
Team has strong existing knowledge of another framework
Project is a simple internal tool where appearance barely matters

⚠

Learning curve: Tailwind has a moderate upfront cost — you need to learn the class naming system. Budget 2–4 hours exploring the docs. After that, most developers report a significant productivity increase. Install the Tailwind CSS IntelliSense VS Code extension — it makes the class system approachable from day one with autocomplete and hover previews.

Tailwind vs Bootstrap

// HEAD-TO-HEAD COMPARISON

Bootstrap and Tailwind solve different problems. Bootstrap gives you a pre-designed component library. Tailwind gives you a low-level design toolkit. They have fundamentally different philosophies.

Dimension	Tailwind CSS	Bootstrap 5
Approach	Utility-first — compose with low-level classes	Component-first — use pre-built, opinionated classes
File Size	~5–20 KB (purged, only what you use)	~30–80 KB (full bundle, tree-shaking is harder)
Design Flexibility	Unlimited — nothing is pre-styled	Medium — overriding Bootstrap styles can be painful
JS Included	No — bring your own JS	Yes — modals, dropdowns, accordions built in
Learning Curve	Medium — class vocabulary to learn	Low — docs show exact classes to copy
"Bootstrap look"	No preset look — every site looks unique	Sites often look similar without heavy customization
Config model	CSS-first (v4), `@theme` directive	Sass variables, config file
Component library	None (use shadcn/ui, DaisyUI, Flowbite)	Full component library included
Best for	Custom-designed products with a build step	Admin panels, internal tools, rapid prototypes

Same button — Tailwind vs Bootstrap

HTML — Button Comparison

/* ── Bootstrap ── */
<button type="button" class="btn btn-primary btn-lg">
  Get started
</button>
/* Result: Bootstrap's pre-defined blue button, fixed padding/font. */
/* To change: override .btn-primary in CSS (specificity fight). */

/* ── Tailwind ── */
<button type="button"
  class="bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800
         text-white font-semibold text-sm
         px-6 py-3 rounded-lg
         transition-colors duration-150
         shadow-sm hover:shadow-md
         focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
  Get started
</button>
/* Result: fully custom — change any property by swapping one class. */

ℹ

They can coexist: You can use Bootstrap for its JavaScript components (modals, tooltips) and Tailwind for layout and styling. However, this increases complexity and CSS weight. Usually it's cleaner to commit to one.

Tailwind vs Plain CSS / CSS Modules

// STYLESHEETS VS UTILITIES

Advantages over Plain CSS

No global scope — utility classes never collide
Consistent spacing/color scale enforced automatically
No dead CSS — unused utilities are purged at build
Responsive variants built-in (md:flex)
Dark mode, hover, focus states all in one line
IntelliSense gives instant feedback + autocomplete

When Plain CSS / CSS Modules Win

Very complex animations requiring keyframe composition
Highly dynamic styles driven by runtime JavaScript values
Existing projects with established CSS architecture
When you need to expose styles to third-party consumers
Designers who prefer separate style files from markup

✓

Best of both worlds: Tailwind is not all-or-nothing. Use the @apply directive to extract repeated utility patterns into named CSS classes when needed. And for truly complex custom CSS (animations, clip-paths), write regular CSS alongside Tailwind utilities.

CSS — @apply for component extraction

/* Use @apply when a utility pattern repeats across many elements */
/* styles.css */

.btn {
  @apply inline-flex items-center justify-center rounded-md font-semibold
         transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
  @apply btn bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500
         px-4 py-2 text-sm;
}

.btn-ghost {
  @apply btn bg-transparent border border-gray-300 text-gray-700
         hover:bg-gray-50 focus:ring-gray-400 px-4 py-2 text-sm;
}

/* Note: @apply is powerful but use it sparingly. Overusing it re-introduces */
/* the maintenance overhead that Tailwind was designed to eliminate. */

Utility Classes Guide

// THE CORE VOCABULARY

Tailwind classes follow a consistent naming pattern: a property shorthand, a separator, and a value from the design scale. Once you learn the pattern, the rest is predictable.

Layout & Display

blockdisplay: block

flexdisplay: flex

griddisplay: grid

hiddendisplay: none

inline-flexinline flex

containermax-width wrapper

Flexbox

items-centeralign-items: center

justify-betweenspace-between

flex-colcolumn direction

flex-wrapflex-wrap: wrap

gap-4gap: 1rem

flex-1flex: 1 1 0%

Grid

grid-cols-33 columns

col-span-2span 2 columns

grid-rows-44 row tracks

place-items-centercenter in grid

auto-cols-frauto fractional cols

gap-x-6column gap 1.5rem

Spacing

p-4padding: 1rem

px-6 py-3x/y padding

m-automargin: auto

mt-8margin-top: 2rem

space-x-4child X spacing

-mt-pxnegative margin

Typography

text-xlfont-size: 1.25rem

font-boldfont-weight: 700

tracking-wideletter-spacing+

leading-relaxedline-height: 1.625

uppercasetext-transform

truncateellipsis overflow

Colors

text-gray-900dark text

bg-sky-500sky background

border-red-300red border color

text-white/80white 80% opacity

bg-indigo-50lightest indigo

ring-violet-500ring color

Sizing

w-fullwidth: 100%

h-screenheight: 100vh

size-12w-12 and h-12

min-w-0min-width: 0

max-w-xlmax-width: 36rem

aspect-video16/9 ratio

Borders & Radius

borderborder: 1px solid

border-2border: 2px solid

rounded-lgborder-radius: .5rem

rounded-fullfully round

divide-ychild dividers

ring-2box-shadow ring

Effects & Misc

shadow-mdmedium box-shadow

opacity-75opacity: 0.75

cursor-pointerhand cursor

select-noneno text select

overflow-hiddenclip overflow

z-10z-index: 10

Arbitrary values — escape the scale when needed

HTML — Arbitrary Values

# Use square brackets for one-off values outside the design scale
<div class="w-[37px]">          <!-- width: 37px -->
<div class="bg-[#1da1f2]">    <!-- Twitter blue -->
<div class="top-[117px]">     <!-- precise positioning -->
<div class="grid-cols-[1fr_500px_2fr]">  <!-- custom grid -->
<div class="text-[clamp(1rem,5vw,3rem)]">  <!-- CSS clamp() -->
<div class="[mask-image:linear-gradient(to_bottom,black,transparent)]">
                              <!-- Any CSS property! -->

Responsive Design

// MOBILE-FIRST BREAKPOINT SYSTEM

Tailwind uses a mobile-first approach. Unprefixed utilities apply to all screen sizes. Prefixed utilities apply at that breakpoint and wider. This means you start with mobile styles and override upward.

Prefix	Breakpoint	CSS Media Query	Target
`sm:`	640px+	`@media (min-width: 640px)`	Large phones, small tablets
`md:`	768px+	`@media (min-width: 768px)`	Tablets, small laptops
`lg:`	1024px+	`@media (min-width: 1024px)`	Desktops
`xl:`	1280px+	`@media (min-width: 1280px)`	Large desktops
`2xl:`	1536px+	`@media (min-width: 1536px)`	Extra-large screens
`max-sm:`	≤639px	`@media (max-width: 639px)`	Phones only (max variant, v3.2+)

HTML — Responsive Layout Example

<!-- Mobile: stack vertically → md: side by side → lg: wider gap -->
<div class="flex flex-col md:flex-row gap-4 lg:gap-8">
  <aside class="w-full md:w-64 lg:w-80 shrink-0">
    Sidebar
  </aside>
  <main class="flex-1 min-w-0">
    Content
  </main>
</div>

<!-- Typography that scales with viewport -->
<h1 class="text-2xl sm:text-4xl lg:text-6xl font-bold tracking-tight">
  Hello World
</h1>

<!-- Grid: 1 col mobile, 2 on tablet, 3 on desktop -->
<ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <li>Card</li>
  <li>Card</li>
  <li>Card</li>
</ul>

ℹ

Container queries (v4): Tailwind v4 adds first-class container query support. Use @container to define a containment context and @sm:, @lg: prefixes to respond to the container's size rather than the viewport.

Variants & State Styling

// HOVER, FOCUS, GROUP, PEER

Variants let you apply utilities conditionally — only when an element is hovered, focused, checked, or when its parent matches a state. Stacking variants composes complex interaction logic in a single class string.

HTML — Variants Reference

# Pseudo-class variants
hover:      on mouse hover           <div class="hover:bg-blue-600">
focus:      keyboard focus           <input class="focus:ring-2 focus:ring-blue-500">
active:     click/mousedown state    <btn class="active:scale-95">
disabled:   disabled inputs          <btn class="disabled:opacity-50 disabled:cursor-not-allowed">
checked:    checked checkboxes       <input class="checked:bg-blue-600">
placeholder:input placeholder        <input class="placeholder:text-gray-400">
first:      first child              <li class="first:rounded-t-lg">
odd: even:  nth-child alternating    <tr class="odd:bg-white even:bg-gray-50">

# Parent state — group
# Add "group" to parent; use "group-hover:", "group-focus:" on children
<div class="group cursor-pointer">
  <img class="group-hover:scale-110 transition-transform" />
  <p  class="group-hover:text-blue-600">Hover the parent</p>
</div>

# Sibling state — peer
# Add "peer" to input; use "peer-invalid:", "peer-focus:" on siblings
<input class="peer" type="email" required />
<p class="invisible peer-invalid:visible text-red-500 text-sm">
  Invalid email address
</p>

# Stack multiple variants
<button class="dark:hover:bg-white/10 md:focus:ring-2">

Theming in v4 — CSS-First Config

// NO MORE TAILWIND.CONFIG.JS

Tailwind v4 removed tailwind.config.js entirely. Configuration now lives inside your CSS file using the @theme directive. CSS variables drive all design tokens, and Tailwind generates utility classes from them automatically.

CSS — v4 Theme Configuration

/* styles.css — Your entire Tailwind configuration lives here */
@import "tailwindcss";

/* @theme — generates utility classes from your design tokens */
@theme {
  /* Custom colors → generates bg-brand-*, text-brand-*, border-brand-* */
  --color-brand-50:    oklch(97% 0.02 250);
  --color-brand-500:   oklch(55% 0.2 250);
  --color-brand-900:   oklch(25% 0.1 250);

  /* Custom spacing → extends p-*, m-*, gap-*, etc. */
  --spacing-18:        4.5rem;   /* p-18, mt-18 ... */

  /* Custom fonts → font-sans uses your custom font */
  --font-family-sans:  "Outfit", ui-sans-serif, system-ui;
  --font-family-mono:  "Fira Code", ui-monospace;

  /* Custom breakpoints */
  --breakpoint-xs:     480px;   /* xs: prefix now works */
  --breakpoint-3xl:    1920px;

  /* Custom shadows */
  --shadow-soft:       0 2px 15px -3px rgba(0,0,0,.07), 0 10px 20px -2px rgba(0,0,0,.04);
}

/* Usage — auto-generated utilities */
/* bg-brand-500, text-brand-50, p-18, font-sans → Outfit, xs:hidden, shadow-soft */

ℹ

OKLCH colors in v4: Tailwind v4 uses the OKLCH color space for its built-in palette, producing more vibrant, perceptually uniform colors. You can still use hex, RGB, or HSL in custom themes — all formats are valid.

Dark Mode

// dark: VARIANT

Tailwind's dark: variant applies utilities when dark mode is active. By default (v4), dark mode follows prefers-color-scheme. You can also set it to use a class-based toggle for user-controlled dark mode.

CSS + HTML — Dark Mode Setup

/* Option 1: System preference (default in v4) */
@import "tailwindcss";
/* The dark: variant works automatically based on prefers-color-scheme */

/* Option 2: Class-based — add .dark to <html> for user-toggle */
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

/* HTML usage — dark: prefix applies when dark mode is active */
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h1 class="text-gray-900 dark:text-white">Hello</h1>
  <p class="text-gray-600 dark:text-gray-400">Subtext</p>
  <button class="bg-blue-600 dark:bg-blue-500 hover:dark:bg-blue-400">
    Action
  </button>
</div>

/* Class-based toggle with JavaScript */
document.documentElement.classList.toggle('dark');

Tailwind + React

// VITE + REACT SETUP

Tailwind works naturally with React — classes go in className just as in HTML. The recommended setup for new React projects is Vite + @tailwindcss/vite plugin.

⚛ React + Vite Setup (v4)

Terminal + Config

# Step 1 — Create Vite + React project
npm create vite@latest my-app -- --template react
cd my-app
npm install

# Step 2 — Install Tailwind Vite plugin
npm install tailwindcss @tailwindcss/vite

# Step 3 — Add plugin to vite.config.js
# vite.config.js
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [tailwindcss(), react()],
})

# Step 4 — Add @import to src/index.css
@import "tailwindcss";

# Step 5 — Run dev server
npm run dev

# That's it! Use className in your components:
export default function Button({ children }) {
  return (
    <button className="bg-blue-600 hover:bg-blue-700 text-white font-medium px-4 py-2 rounded-lg transition-colors">
      {children}
    </button>
  )
}

React-specific tips

Dynamic classes with clsx / cn

Avoid string concatenation for conditional classes. Use clsx or the shadcn/ui cn() utility to compose class strings cleanly.

npm install clsx tailwind-merge

// lib/utils.ts
import { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'
export function cn(...inputs) {
  return twMerge(clsx(inputs))
}

// Usage
<div className={cn(
  "base-class",
  isActive && "bg-blue-100",
  variant === "danger" && "bg-red-100"
)}>

Recommended libraries

shadcn/ui — copy-paste component library built on Tailwind + Radix
Headless UI — accessible unstyled components from Tailwind Labs
DaisyUI — component plugin with semantic class names
Flowbite React — full component library on Tailwind
tailwind-merge — resolve conflicting Tailwind classes intelligently

⚠

Don't build class strings dynamically: Tailwind's purge only detects complete class names. "text-" + color will be purged. Always use full class names: color === "red" ? "text-red-500" : "text-blue-500".

Tailwind + Angular

// ANGULAR CLI SETUP

Angular supports Tailwind via PostCSS. The official angular.dev documentation recommends using ng add tailwindcss (automated) or a manual PostCSS setup (v4 compatible).

🅰 Angular v17+ Setup (v4)

Terminal + Config Files

# Step 1 — Create new Angular project
ng new my-app --style css
cd my-app

# Step 2 — Install Tailwind + PostCSS
npm install tailwindcss @tailwindcss/postcss postcss

# Step 3 — Create .postcssrc.json in project root
# .postcssrc.json
{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

# Step 4 — Add @import to src/styles.css
@import "tailwindcss";

# Step 5 — Run dev server
ng serve

# Use Tailwind classes in component templates:
# app.component.html
<div class="min-h-screen bg-gray-50 flex items-center justify-center">
  <h1 class="text-4xl font-bold text-gray-900">
    {{ title }}
  </h1>
</div>

# Dynamic classes with NgClass
<button
  [ngClass]="{
    'bg-blue-600': !isActive,
    'bg-green-600': isActive,
    'opacity-50 cursor-not-allowed': isDisabled
  }"
  class="text-white font-medium px-4 py-2 rounded-lg transition-colors">
  {{ label }}
</button>

Angular-specific tips

View Encapsulation

Angular's ViewEncapsulation.Emulated (default) adds attribute selectors to component styles. Since Tailwind's utility classes are global (from styles.css), they work fine in templates — just don't put @apply inside component-scoped CSS expecting global utilities unless you understand the encapsulation boundary.

SCSS projects

If your project uses SCSS (default Angular CLI), Tailwind v4 works best with plain CSS. Either change --style css on new projects, or add a dedicated tailwind.css file imported in styles.scss via @use './tailwind.css'.

ℹ

Automated setup: Run ng add tailwindcss for an automated installation that handles PostCSS config and style imports in one command. Check angular.dev/guide/tailwind for the latest official guidance.

Custom Components & Plugins

// COMPONENT LAYER + PLUGINS

When utility classes become repetitive, Tailwind offers three clean escape hatches: the @layer components directive, @apply, and custom plugins. Each serves a different level of abstraction.

CSS — Component Layer + Plugins

/* ─── Option 1: @layer components ─── */
/* Great for base HTML element styles, reused class patterns */
@layer components {
  .card {
    @apply bg-white rounded-xl border border-gray-200 shadow-sm p-6;
  }

  .form-input {
    @apply w-full rounded-lg border border-gray-300 px-3 py-2 text-sm
           placeholder:text-gray-400
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
           transition-shadow duration-150;
  }

  .btn {
    @apply inline-flex items-center gap-2 font-semibold rounded-lg px-4 py-2
           transition-all duration-150 cursor-pointer select-none
           disabled:opacity-50 disabled:cursor-not-allowed;
  }
}

/* ─── Option 2: @layer utilities — custom utilities ─── */
@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
  }
  .text-balance { text-wrap: balance; }
}

/* ─── Option 3: Tailwind v4 plugin (JS) ─── */
/* tailwind.plugin.js */
import plugin from 'tailwindcss/plugin'

export default plugin(function({ addUtilities, addComponents, theme }) {
  addComponents({
    '.prose-brand': {
      '--tw-prose-headings': theme('colors.brand.700'),
      fontSize: theme('fontSize.base'),
      lineHeight: theme('lineHeight.relaxed'),
    }
  })
})

Tailwind v4 — What's New

// BREAKING CHANGES + NEW FEATURES

New in v4 New

CSS-first config — @theme directive, no JS config file
Oxide engine — rewritten in Rust, 10× faster builds
@import "tailwindcss" — single-line setup (no directives needed)
Dynamic utilities — p-13, w-17 etc. now work without config
Container queries — built-in, no plugin
3D transforms — rotate-x-45, translate-z-4
@starting-style — enter/exit animations without JS
OKLCH colors — more vibrant default palette
Expanded gradient APIs — radial, conic, interpolation modes

v3 → v4 Migration Notes Breaking

Remove tailwind.config.js — move config to CSS @theme
@tailwind base/components/utilities → single @import "tailwindcss"
Use @tailwindcss/upgrade codemod for automated migration
bg-opacity-* → bg-black/50 (opacity modifier syntax)
ring default is now 1px (was 3px)
shadow default uses OKLCH (may look different)
Run: npx @tailwindcss/upgrade@next

CSS — v3 vs v4 Side-by-Side

/* ── v3 ──────────────────── */  /* ── v4 ──────────────────── */

@tailwind base;               /* → */  @import "tailwindcss";
@tailwind components;
@tailwind utilities;

/* tailwind.config.js */        /* → */  /* Inside styles.css */
module.exports = {              /* → */  @theme {
  theme: {                      /* → */    --color-brand: oklch(55% .2 250);
    extend: {                   /* → */    --spacing-18: 4.5rem;
      colors: {                 /* → */    --font-family-sans: "Outfit", sans-serif;
        brand: '#4f46e5',      /* → */  }
      }
    }
  }
}

/* bg-opacity — old */         /* → */  /* Opacity modifiers — new */
class="bg-black bg-opacity-50"  /* → */  class="bg-black/50"

Quick Reference Cheatsheet

// PATTERNS, SPACING SCALE, COMMON LAYOUTS

Spacing scale (base unit: 4px = 1rem = p-4)

Class suffix	Value	Class suffix	Value	Class suffix	Value
`0`	0px	`4`	16px / 1rem	`16`	64px / 4rem
`0.5`	2px	`5`	20px	`20`	80px / 5rem
`1`	4px	`6`	24px / 1.5rem	`24`	96px / 6rem
`2`	8px	`8`	32px / 2rem	`32`	128px / 8rem
`3`	12px	`10`	40px / 2.5rem	`40`	160px / 10rem

Common layout patterns

HTML — Layout Patterns

<!-- Centered page content -->
<main class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">

<!-- Sticky navbar -->
<nav class="sticky top-0 z-50 bg-white/80 backdrop-blur-sm border-b border-gray-200">

<!-- Full-height hero -->
<section class="min-h-screen flex flex-col items-center justify-center text-center px-4">

<!-- Card with hover lift -->
<div class="bg-white rounded-2xl shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-200 p-6">

<!-- Responsive sidebar layout -->
<div class="flex flex-col lg:flex-row gap-8">
  <aside class="lg:w-72 shrink-0">Sidebar</aside>
  <main class="flex-1 min-w-0">Content</main>
</div>

<!-- Badge / pill -->
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
  Active
</span>

<!-- Skeleton loading state -->
<div class="animate-pulse space-y-3">
  <div class="h-4 bg-gray-200 rounded w-3/4"></div>
  <div class="h-4 bg-gray-200 rounded w-1/2"></div>
</div>

<!-- Transition & animation -->
<div class="transition-all duration-300 ease-in-out">
<div class="animate-spin animate-bounce animate-pulse animate-ping">

Essential tooling

VS Code Extensions

Tailwind CSS IntelliSense — autocomplete, hover previews, linting (must-have)
Prettier + prettier-plugin-tailwindcss — auto-sort Tailwind classes on save

Online Tools

play.tailwindcss.com — live Tailwind playground (no install)
tailwindcss.com/docs — official documentation with live previews
tailwindcomponents.com — community component showcase

Ecosystem

shadcn/ui — composable React components
DaisyUI — semantic class names plugin
Headless UI — accessible unstyled components
tailwind-merge — de-duplicate conflicting classes

✓

Official docs: The Tailwind CSS documentation at tailwindcss.com/docs includes live examples, a utility search, and framework-specific installation guides for Vite, Next.js, Nuxt, Angular, Laravel, and more. Every utility class has a hover preview showing the underlying CSS property.

TailwindCSS

What is Tailwind CSS?

Why Use Tailwind?

When to Use Tailwind

Tailwind vs Bootstrap

Same button — Tailwind vs Bootstrap

Tailwind vs Plain CSS / CSS Modules

Utility Classes Guide

Arbitrary values — escape the scale when needed

Responsive Design

Variants & State Styling

Theming in v4 — CSS-First Config

Dark Mode

Tailwind + React

React-specific tips

Tailwind + Angular

Angular-specific tips

Custom Components & Plugins

Tailwind v4 — What's New

Quick Reference Cheatsheet

Spacing scale (base unit: 4px = 1rem = p-4)

Common layout patterns

Essential tooling

Tailwind
CSS