Tailwind CSS v4.0 (released January 2025): utility-first CSS framework with classes like flex, pt-4, text-center composed directly in markup. Powered by Oxide engine (Rust-based) delivering 10x faster performance. Utility-first: use small, single-purpose classes instead of custom CSS. 'With utilities, you're choosing styles from predefined design system, making it easier to build visually consistent UIs.' Benefits: (1) Lightning-fast builds (90%+ faster than v3). (2) Consistent design system. (3) Smaller CSS (5-15 KB gzipped in production, 30-40% smaller than v3). (4) Responsive by default. (5) CSS-first configuration. (6) No class naming. Example:
Tailwind v4.0 (2025) simplified installation: (1) Install: npm install -D tailwindcss. (2) Import in CSS: @import 'tailwindcss'; (single line replaces @tailwind directives). (3) Build: npx @tailwindcss/cli -i input.css -o output.css. Framework-specific: (A) Vite: npm install -D @tailwindcss/vite, add to vite.config.js for better performance. (B) PostCSS: npm install -D @tailwindcss/postcss (separate package in v4), add to postcss.config.mjs. (C) Next.js: built-in support with create-next-app. No tailwind.config.js required (v4 uses CSS-first config). Automatic content detection eliminates content path configuration. Production: NODE_ENV=production builds automatically optimized. Lightning CSS integration handles vendor prefixing. Zero configuration approach in v4.0.
Responsive design in v4.0: apply utility classes conditionally at different breakpoints without leaving HTML. Mobile-first: uses min-width queries (mobile base, scale up). Default breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). Syntax: prefix-utility (md:text-center, lg:flex-row). Example:
State variants in v4.0: prefix utilities to apply styles on specific states. Core variants: hover:, focus:, active:, disabled:, visited:, focus-within:, focus-visible: (keyboard only), checked:, required:, invalid:, read-only:. Example:
Dark mode in v4.0: CSS-first configuration using @custom-variant directive. Setup: @import 'tailwindcss'; @custom-variant dark (&:where(.dark, .dark *));. Usage:
Tailwind v4.0 (2025): CSS-first configuration replaces tailwind.config.js. Customization now in CSS using directives: (1) @theme: define design tokens. @theme { --color-primary: hsl(220, 90%, 56%); --font-sans: 'Inter', sans-serif; --breakpoint-3xl: 120rem; }. (2) @source: custom content paths. @source '../components';. (3) @plugin: load plugins. @plugin '@tailwindcss/forms';. (4) @custom-variant: custom variants. @custom-variant hocus (&:is(:hover, :focus));. Namespaces: --color-* (colors), --font-* (fonts), --breakpoint-* (responsive), --spacing-* (spacing), --radius-* (border radius). CSS variables available at runtime: reference with var(--color-primary). Legacy: tailwind.config.js still supported for v3 compatibility but CSS-first recommended. Best practice: CSS-first for v4 projects, design tokens in @theme, version control CSS config.
Tailwind v4.0 (2025): Oxide engine (Rust-based) replaces JavaScript JIT with dramatic performance improvements. Performance: (1) Full rebuilds 5x faster than v3 JIT. (2) Incremental builds 100x faster, measured in microseconds. (3) Cold starts under 100ms, hot reloads nearly instant. (4) Compiles thousands of components in milliseconds. Benefits: (1) On-demand generation (only used utilities). (2) All variants enabled automatically. (3) Arbitrary values: top-[117px], bg-[#1da1f2]. (4) Bundle size 30-40% smaller (5-15 KB gzipped production). (5) Zero configuration required. How it works: Oxide engine watches files, generates utilities instantly using Rust's performance. No purging needed: automatic tree-shaking built-in. Default since v3, massively enhanced in v4. Essential for understanding v4's lightning-fast performance.
@apply in v4.0: inline Tailwind utilities into custom CSS. Syntax: .btn { @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700; }. Use cases: (1) Reusable component classes. (2) Base element styles. (3) Third-party component integration. (4) CSS module compatibility (with @reference workaround). V4 caution: official docs recommend avoiding @apply with external modules (causes duplication, larger bundle). !important: @apply !bg-blue-500. Best practice (2025): (1) Prefer utility classes in HTML/JSX. (2) Extract React/Vue components before using @apply. (3) Use @utility directive for custom utilities instead. (4) Reserve @apply for true abstractions only. (5) Use @theme for design tokens, not @apply. Overuse defeats utility-first benefits. Essential understanding: @apply is compatibility feature, not primary workflow in v4.
@layer in v4.0: uses native CSS cascade layers for proper style organization. V4 structure: @layer theme, base, components, utilities; (defined automatically). Usage: @layer base { h1 { @apply text-2xl font-bold; } } @layer components { .btn { @apply px-4 py-2 rounded; } } @layer utilities { .scroll-snap-x { scroll-snap-type: x mandatory; } }. Theme layer (new in v4): @layer theme { .dark { --color-bg: black; } }. Benefits: (1) Native CSS cascade layer ordering. (2) Predictable specificity. (3) Proper tree-shaking. (4) Override control via cascade layers. Imports: @import 'tailwindcss/theme.css' layer(theme); @import 'tailwindcss/utilities.css' layer(utilities);. V4 change: @utility directive recommended for custom utilities instead of @layer utilities. Best practice: use @layer for organization, leverage native CSS cascade layer power.
Custom utilities in v4.0: @utility directive (preferred) and @theme for design tokens. Methods: (1) @utility directive: @utility mask-radial-gradient { mask-image: radial-gradient(black, transparent); }. (2) @theme for tokens: @theme { --color-brand: #ff6b6b; --spacing-huge: 128rem; } generates bg-brand, p-huge utilities automatically. (3) @layer utilities: @layer utilities { .scroll-snap-x { scroll-snap-type: x mandatory; } }. Variants: automatically available (hover:mask-radial-gradient). Arbitrary values: mask-[radial-gradient(black,transparent)] for one-off. Namespaces generate utilities: --color-* → bg-, text-, border-. --font- → font-. --breakpoint- → responsive variants. Best practice: (1) Use @theme for design system tokens. (2) Use @utility for complex utilities. (3) Use arbitrary values for one-offs. Essential for v4 customization.
Plugins in v4.0: CSS-first with @plugin directive. Official plugins: @tailwindcss/typography (prose classes), @tailwindcss/forms (form styling). Note: @tailwindcss/container-queries now built into v4 core. Installation v4: (1) npm install @tailwindcss/typography. (2) Add in CSS: @plugin '@tailwindcss/typography';. No tailwind.config.js needed. Legacy v3 plugins: still work via @plugin for compatibility. Modern v4 plugins: pure CSS files imported directly: @import 'my-plugin.css';. Typography example: @plugin '@tailwindcss/typography'; enables
Layout utilities in v4.0: Flexbox: flex, flex-row/col, items-center/start/end, justify-between/center/around, flex-wrap/nowrap, flex-1/auto/initial, gap-4. Example:
Spacing in v4.0: consistent scale using 0.25rem (4px) base unit. Classes: p-* (padding), m-* (margin), gap-* (flex/grid gap), space-x/y-* (child spacing). Directions: p-4 (all), px-4 (horizontal), py-4 (vertical), pt/pr/pb/pl-4 (sides), ps-4 (inline-start), pe-4 (inline-end). Default scale: 0, px (1px), 0.5 (0.125rem), 1 (0.25rem), 2 (0.5rem), 4 (1rem), 8 (2rem), 16 (4rem), 24 (6rem), 32 (8rem), 64 (16rem), 96 (24rem). Negative: -m-4, -mt-8. Auto: m-auto, mx-auto. Arbitrary: p-[17px], m-[2.5rem]. Custom v4: @theme { --spacing-huge: 128rem; } generates p-huge, m-huge. Best practice: use scale for consistency, arbitrary for one-offs, custom tokens via @theme. Essential for layouts.
Typography in v4.0: text-{size}, font-{weight}, text-{color}, text-{align}, leading-{height}, tracking-{spacing}, font-{family}. Sizes: text-xs (0.75rem), sm (0.875rem), base (1rem), lg (1.125rem), xl (1.25rem), 2xl (1.5rem), 3xl/4xl/5xl/6xl/7xl/8xl/9xl (scaling). Weights: font-thin (100), light (300), normal (400), medium (500), semibold (600), bold (700), extrabold (800), black (900). Colors: text-red-500/50 (50% opacity), text-[#1da1f2]. Decoration: underline, line-through, decoration-2, decoration-wavy. Transform: uppercase, lowercase, capitalize. Truncate: truncate, line-clamp-3. Typography plugin: @plugin '@tailwindcss/typography'; enables prose, prose-lg, prose-slate. Custom fonts v4: @theme { --font-display: 'Playfair Display'; }. Best practice: use scale, responsive text-base md:text-lg. Essential for typography.
Colors in v4.0: comprehensive palette with CSS variable foundation. Default: gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose. Shades: 50 (lightest) to 950 (darkest), 500 is base. Usage: bg-blue-500, text-red-700, border-emerald-300. Opacity: bg-blue-500/50, text-red-700/75. Arbitrary: bg-[#1da1f2], text-[oklch(0.5_0.2_180)]. Custom colors v4: @theme { --color-brand: #ff6b6b; --color-brand-dark: #cc5555; } generates bg-brand, text-brand, border-brand. Inline theme: @theme inline { --color-primary: var(--primary); } for runtime CSS variables. Modern syntax: oklch() and color-mix() supported. Best practice: use palette for consistency, @theme for brand colors, CSS variables for dynamic theming. Essential for theming.
Arbitrary values in v4.0: one-off custom values using [bracket] notation, fully supported by Oxide engine. Syntax: utility-[value]. Common examples: top-[117px], text-[#1da1f2], bg-[url('/img.png')], grid-cols-[200px_1fr_1fr], w-[calc(100%-2rem)]. Modern CSS: text-[oklch(0.5_0.2_180)], bg-[color-mix(in_srgb,blue_50%,white)]. CSS variables: bg-[var(--my-color)], p-[var(--spacing)]. With variants: hover:top-[13px], md:w-[500px], dark:bg-[#1a1a1a]. Responsive arbitrary: min-[800px]:text-xl. Container queries: @[500px]:text-xl. When to use: one-off values, prototyping, edge cases. When NOT: repeated values (use @theme instead). Best practice: prefer design tokens, arbitrary for exceptions only. Essential for v4 flexibility.
Preflight in v4.0: CSS reset/normalization built on modern-normalize, included in base layer. Resets: (1) All margins removed (margin: 0). (2) Headings unstyled (inherit font-size, font-weight). (3) Lists unstyled (no bullets/padding). (4) Images display: block. (5) Border styles reset (*, ::before, ::after). (6) Buttons/inputs inherit font. (7) Box-sizing: border-box universal. Benefits: consistent cross-browser base, predictable utility application, utility-first friendly starting point. Customization v4: @layer base { h1 { @apply text-4xl font-bold; } a { @apply text-blue-600 hover:underline; } }. Disable (if needed): import Tailwind without base layer. Understanding critical: explains why headings look unstyled. Best practice: keep enabled, extend with @layer base. Essential foundation knowledge.
Production optimization in v4.0: automatic via Oxide engine with native tree-shaking. Build command: NODE_ENV=production npx @tailwindcss/cli -i input.css -o output.css. Performance: (1) Automatic purging (no configuration needed). (2) Lightning CSS minification built-in. (3) Bundle size 30-40% smaller than v3 (5-15 KB gzipped typical). (4) Build times 5x faster. Custom sources: @source '../components'; for non-standard paths. Dynamic classes: avoid bg-${color}-500 (won't be detected), use complete class names: const classes = isActive ? 'bg-blue-500' : 'bg-gray-500'. Safelist (if needed): define patterns in config. Additional: gzip/brotli compression on server. Disable unused features: corePlugins config. Measure: use webpack-bundle-analyzer or similar. Best practice: complete class names, @source for custom paths, trust Oxide engine. Essential for production deployment.
Best practices for v4.0 (2025): (1) CSS-first config: use @theme for design tokens, not tailwind.config.js. (2) Design system: stick to spacing scale, color palette for consistency. (3) Mobile-first: design for mobile, scale up with responsive variants. (4) Component extraction: extract React/Vue components, avoid overusing @apply. (5) @utility for custom utilities: prefer @utility directive over @apply. (6) Consistent class order: layout → spacing → typography → colors → effects. (7) Editor setup: Tailwind CSS IntelliSense, Prettier plugin (prettier-plugin-tailwindcss) for automatic sorting. (8) Dark mode: use @custom-variant, design both modes together, test WCAG contrast. (9) Accessibility: always style focus-visible, use semantic HTML, test keyboard navigation. (10) Performance: trust Oxide engine, use complete class names (no dynamic concatenation). (11) Version control CSS config: commit @theme and custom directives. Essential for maintainable, production-ready Tailwind projects.
Common pitfalls in v4.0 (2025): (1) Dynamic class concatenation: avoid bg-${color}-500 (Oxide can't detect), use complete class names or ternaries. (2) Overusing @apply: v4 docs caution against @apply in external modules (duplication, larger bundles), use @utility instead. (3) Using tailwind.config.js for new projects: v4 uses CSS-first config via @theme. (4) Ignoring @source directive: missing custom content paths causes styles to be excluded. (5) Not leveraging @custom-variant: reinventing hover/focus combinations instead of defining custom variants. (6) Arbitrary values for repeated patterns: extract to @theme instead. (7) Accessibility neglect: not styling focus-visible, insufficient color contrast. (8) Fighting CSS-first: trying to force v3 patterns into v4. (9) Not using official plugins: reinventing @tailwindcss/typography, @tailwindcss/forms. (10) Mixing v3 and v4 approaches: causes confusion and bloat. Best practice: embrace v4 CSS-first philosophy.
Tailwind v4.0 (2025) vs Traditional CSS: Tailwind: utility-first (compose in HTML), 10x faster builds (Oxide engine), 5-15 KB gzipped production. Traditional: semantic CSS, custom class names, manual optimization. Tailwind pros: lightning-fast development, consistent design system, no naming bikeshedding, automatic tree-shaking. Cons: HTML verbosity, learning curve. Tailwind vs Bootstrap: Tailwind utility-based (build your own), design-agnostic, 5-15 KB production. Bootstrap component-based, opinionated design, larger bundle (~25 KB). Tailwind 10x more GitHub stars (2025), dominant in modern frameworks (Next.js, Remix). When Tailwind: custom designs, design systems, modern React/Vue apps, performance-critical. When Bootstrap: rapid prototyping with prebuilt UI, traditional server-rendered sites. When traditional: tiny projects, legacy maintenance. Tailwind industry standard for 2025 web development.
Framework integration v4.0 (2025): Next.js 15+: built-in support, npx create-next-app --tailwind. Vite: npm install -D @tailwindcss/vite, add to vite.config.js (better performance than PostCSS). React: npm install -D tailwindcss @tailwindcss/postcss, configure PostCSS. Vue/Nuxt: npm install -D tailwindcss, @import 'tailwindcss'; in CSS. Svelte/SvelteKit: similar PostCSS setup. Astro: automatic integration. Component patterns: (1) Complete class names: const btnClass = variant === 'primary' ? 'bg-blue-500' : 'bg-gray-500';. (2) Class composition: clsx({ 'bg-blue-500': primary, 'hover:bg-blue-700': !disabled }). (3) Component variants: CVA (class-variance-authority) library. Official UI: Headless UI (unstyled, accessible), Tailwind UI (prebuilt, paid). Best practice: extract repeated patterns to components, avoid string concatenation, use framework-native conditional rendering. Excellent DX with modern frameworks.
Container in v4.0: two types - layout container and container queries. Layout container: sets max-width matching current breakpoint. Usage:
Component variants in v4.0 (2025): manage multiple component styles using modern patterns. Approaches: (1) Object mapping: const variants = { primary: 'bg-blue-500 hover:bg-blue-700', secondary: 'bg-gray-500 hover:bg-gray-700' }; className={variants[variant]}. (2) clsx library: clsx('px-4 py-2', { 'bg-blue-500': isPrimary, 'bg-gray-500': !isPrimary }). (3) CVA (class-variance-authority): cva('btn-base', { variants: { intent: { primary: 'bg-blue-500', secondary: 'bg-gray-500' }, size: { sm: 'text-sm', lg: 'text-lg' } } }). (4) @theme for variant colors: @theme { --color-btn-primary: blue; } use bg-btn-primary. (5) Compound variants: CVA supports compoundVariants for combination styling. Best practice: use complete class names, CVA for complex variants, object maps for simple cases, never string concatenation. Essential for design systems and component libraries.
Major v4.0 changes (January 2025): (1) Oxide engine: Rust-based, 10x performance, 5x faster builds, 100x faster incremental. (2) CSS-first configuration: @import 'tailwindcss'; + @theme {} replaces tailwind.config.js. (3) Lightning CSS integration: built-in vendor prefixing, no PostCSS config needed. (4) Automatic content detection: no content: [] required, use @source for custom paths. (5) Native cascade layers: @layer theme, base, components, utilities;. (6) Container queries in core: @container, @lg:, @[500px]: built-in. (7) @utility directive: new way to define custom utilities. (8) @custom-variant: define custom state variants. (9) PostCSS separation: use @tailwindcss/postcss package. (10) 30-40% smaller bundles. Breaking: tailwind.config.js patterns need migration to CSS. Migration: @import 'tailwindcss'; + migrate config to @theme. v4 production-ready, recommended for all 2025 projects.
Tailwind CSS v4.0 (released January 2025): utility-first CSS framework with classes like flex, pt-4, text-center composed directly in markup. Powered by Oxide engine (Rust-based) delivering 10x faster performance. Utility-first: use small, single-purpose classes instead of custom CSS. 'With utilities, you're choosing styles from predefined design system, making it easier to build visually consistent UIs.' Benefits: (1) Lightning-fast builds (90%+ faster than v3). (2) Consistent design system. (3) Smaller CSS (5-15 KB gzipped in production, 30-40% smaller than v3). (4) Responsive by default. (5) CSS-first configuration. (6) No class naming. Example:
Tailwind v4.0 (2025) simplified installation: (1) Install: npm install -D tailwindcss. (2) Import in CSS: @import 'tailwindcss'; (single line replaces @tailwind directives). (3) Build: npx @tailwindcss/cli -i input.css -o output.css. Framework-specific: (A) Vite: npm install -D @tailwindcss/vite, add to vite.config.js for better performance. (B) PostCSS: npm install -D @tailwindcss/postcss (separate package in v4), add to postcss.config.mjs. (C) Next.js: built-in support with create-next-app. No tailwind.config.js required (v4 uses CSS-first config). Automatic content detection eliminates content path configuration. Production: NODE_ENV=production builds automatically optimized. Lightning CSS integration handles vendor prefixing. Zero configuration approach in v4.0.
Responsive design in v4.0: apply utility classes conditionally at different breakpoints without leaving HTML. Mobile-first: uses min-width queries (mobile base, scale up). Default breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). Syntax: prefix-utility (md:text-center, lg:flex-row). Example:
State variants in v4.0: prefix utilities to apply styles on specific states. Core variants: hover:, focus:, active:, disabled:, visited:, focus-within:, focus-visible: (keyboard only), checked:, required:, invalid:, read-only:. Example:
Dark mode in v4.0: CSS-first configuration using @custom-variant directive. Setup: @import 'tailwindcss'; @custom-variant dark (&:where(.dark, .dark *));. Usage:
Tailwind v4.0 (2025): CSS-first configuration replaces tailwind.config.js. Customization now in CSS using directives: (1) @theme: define design tokens. @theme { --color-primary: hsl(220, 90%, 56%); --font-sans: 'Inter', sans-serif; --breakpoint-3xl: 120rem; }. (2) @source: custom content paths. @source '../components';. (3) @plugin: load plugins. @plugin '@tailwindcss/forms';. (4) @custom-variant: custom variants. @custom-variant hocus (&:is(:hover, :focus));. Namespaces: --color-* (colors), --font-* (fonts), --breakpoint-* (responsive), --spacing-* (spacing), --radius-* (border radius). CSS variables available at runtime: reference with var(--color-primary). Legacy: tailwind.config.js still supported for v3 compatibility but CSS-first recommended. Best practice: CSS-first for v4 projects, design tokens in @theme, version control CSS config.
Tailwind v4.0 (2025): Oxide engine (Rust-based) replaces JavaScript JIT with dramatic performance improvements. Performance: (1) Full rebuilds 5x faster than v3 JIT. (2) Incremental builds 100x faster, measured in microseconds. (3) Cold starts under 100ms, hot reloads nearly instant. (4) Compiles thousands of components in milliseconds. Benefits: (1) On-demand generation (only used utilities). (2) All variants enabled automatically. (3) Arbitrary values: top-[117px], bg-[#1da1f2]. (4) Bundle size 30-40% smaller (5-15 KB gzipped production). (5) Zero configuration required. How it works: Oxide engine watches files, generates utilities instantly using Rust's performance. No purging needed: automatic tree-shaking built-in. Default since v3, massively enhanced in v4. Essential for understanding v4's lightning-fast performance.
@apply in v4.0: inline Tailwind utilities into custom CSS. Syntax: .btn { @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700; }. Use cases: (1) Reusable component classes. (2) Base element styles. (3) Third-party component integration. (4) CSS module compatibility (with @reference workaround). V4 caution: official docs recommend avoiding @apply with external modules (causes duplication, larger bundle). !important: @apply !bg-blue-500. Best practice (2025): (1) Prefer utility classes in HTML/JSX. (2) Extract React/Vue components before using @apply. (3) Use @utility directive for custom utilities instead. (4) Reserve @apply for true abstractions only. (5) Use @theme for design tokens, not @apply. Overuse defeats utility-first benefits. Essential understanding: @apply is compatibility feature, not primary workflow in v4.
@layer in v4.0: uses native CSS cascade layers for proper style organization. V4 structure: @layer theme, base, components, utilities; (defined automatically). Usage: @layer base { h1 { @apply text-2xl font-bold; } } @layer components { .btn { @apply px-4 py-2 rounded; } } @layer utilities { .scroll-snap-x { scroll-snap-type: x mandatory; } }. Theme layer (new in v4): @layer theme { .dark { --color-bg: black; } }. Benefits: (1) Native CSS cascade layer ordering. (2) Predictable specificity. (3) Proper tree-shaking. (4) Override control via cascade layers. Imports: @import 'tailwindcss/theme.css' layer(theme); @import 'tailwindcss/utilities.css' layer(utilities);. V4 change: @utility directive recommended for custom utilities instead of @layer utilities. Best practice: use @layer for organization, leverage native CSS cascade layer power.
Custom utilities in v4.0: @utility directive (preferred) and @theme for design tokens. Methods: (1) @utility directive: @utility mask-radial-gradient { mask-image: radial-gradient(black, transparent); }. (2) @theme for tokens: @theme { --color-brand: #ff6b6b; --spacing-huge: 128rem; } generates bg-brand, p-huge utilities automatically. (3) @layer utilities: @layer utilities { .scroll-snap-x { scroll-snap-type: x mandatory; } }. Variants: automatically available (hover:mask-radial-gradient). Arbitrary values: mask-[radial-gradient(black,transparent)] for one-off. Namespaces generate utilities: --color-* → bg-, text-, border-. --font- → font-. --breakpoint- → responsive variants. Best practice: (1) Use @theme for design system tokens. (2) Use @utility for complex utilities. (3) Use arbitrary values for one-offs. Essential for v4 customization.
Plugins in v4.0: CSS-first with @plugin directive. Official plugins: @tailwindcss/typography (prose classes), @tailwindcss/forms (form styling). Note: @tailwindcss/container-queries now built into v4 core. Installation v4: (1) npm install @tailwindcss/typography. (2) Add in CSS: @plugin '@tailwindcss/typography';. No tailwind.config.js needed. Legacy v3 plugins: still work via @plugin for compatibility. Modern v4 plugins: pure CSS files imported directly: @import 'my-plugin.css';. Typography example: @plugin '@tailwindcss/typography'; enables
Layout utilities in v4.0: Flexbox: flex, flex-row/col, items-center/start/end, justify-between/center/around, flex-wrap/nowrap, flex-1/auto/initial, gap-4. Example:
Spacing in v4.0: consistent scale using 0.25rem (4px) base unit. Classes: p-* (padding), m-* (margin), gap-* (flex/grid gap), space-x/y-* (child spacing). Directions: p-4 (all), px-4 (horizontal), py-4 (vertical), pt/pr/pb/pl-4 (sides), ps-4 (inline-start), pe-4 (inline-end). Default scale: 0, px (1px), 0.5 (0.125rem), 1 (0.25rem), 2 (0.5rem), 4 (1rem), 8 (2rem), 16 (4rem), 24 (6rem), 32 (8rem), 64 (16rem), 96 (24rem). Negative: -m-4, -mt-8. Auto: m-auto, mx-auto. Arbitrary: p-[17px], m-[2.5rem]. Custom v4: @theme { --spacing-huge: 128rem; } generates p-huge, m-huge. Best practice: use scale for consistency, arbitrary for one-offs, custom tokens via @theme. Essential for layouts.
Typography in v4.0: text-{size}, font-{weight}, text-{color}, text-{align}, leading-{height}, tracking-{spacing}, font-{family}. Sizes: text-xs (0.75rem), sm (0.875rem), base (1rem), lg (1.125rem), xl (1.25rem), 2xl (1.5rem), 3xl/4xl/5xl/6xl/7xl/8xl/9xl (scaling). Weights: font-thin (100), light (300), normal (400), medium (500), semibold (600), bold (700), extrabold (800), black (900). Colors: text-red-500/50 (50% opacity), text-[#1da1f2]. Decoration: underline, line-through, decoration-2, decoration-wavy. Transform: uppercase, lowercase, capitalize. Truncate: truncate, line-clamp-3. Typography plugin: @plugin '@tailwindcss/typography'; enables prose, prose-lg, prose-slate. Custom fonts v4: @theme { --font-display: 'Playfair Display'; }. Best practice: use scale, responsive text-base md:text-lg. Essential for typography.
Colors in v4.0: comprehensive palette with CSS variable foundation. Default: gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose. Shades: 50 (lightest) to 950 (darkest), 500 is base. Usage: bg-blue-500, text-red-700, border-emerald-300. Opacity: bg-blue-500/50, text-red-700/75. Arbitrary: bg-[#1da1f2], text-[oklch(0.5_0.2_180)]. Custom colors v4: @theme { --color-brand: #ff6b6b; --color-brand-dark: #cc5555; } generates bg-brand, text-brand, border-brand. Inline theme: @theme inline { --color-primary: var(--primary); } for runtime CSS variables. Modern syntax: oklch() and color-mix() supported. Best practice: use palette for consistency, @theme for brand colors, CSS variables for dynamic theming. Essential for theming.
Arbitrary values in v4.0: one-off custom values using [bracket] notation, fully supported by Oxide engine. Syntax: utility-[value]. Common examples: top-[117px], text-[#1da1f2], bg-[url('/img.png')], grid-cols-[200px_1fr_1fr], w-[calc(100%-2rem)]. Modern CSS: text-[oklch(0.5_0.2_180)], bg-[color-mix(in_srgb,blue_50%,white)]. CSS variables: bg-[var(--my-color)], p-[var(--spacing)]. With variants: hover:top-[13px], md:w-[500px], dark:bg-[#1a1a1a]. Responsive arbitrary: min-[800px]:text-xl. Container queries: @[500px]:text-xl. When to use: one-off values, prototyping, edge cases. When NOT: repeated values (use @theme instead). Best practice: prefer design tokens, arbitrary for exceptions only. Essential for v4 flexibility.
Preflight in v4.0: CSS reset/normalization built on modern-normalize, included in base layer. Resets: (1) All margins removed (margin: 0). (2) Headings unstyled (inherit font-size, font-weight). (3) Lists unstyled (no bullets/padding). (4) Images display: block. (5) Border styles reset (*, ::before, ::after). (6) Buttons/inputs inherit font. (7) Box-sizing: border-box universal. Benefits: consistent cross-browser base, predictable utility application, utility-first friendly starting point. Customization v4: @layer base { h1 { @apply text-4xl font-bold; } a { @apply text-blue-600 hover:underline; } }. Disable (if needed): import Tailwind without base layer. Understanding critical: explains why headings look unstyled. Best practice: keep enabled, extend with @layer base. Essential foundation knowledge.
Production optimization in v4.0: automatic via Oxide engine with native tree-shaking. Build command: NODE_ENV=production npx @tailwindcss/cli -i input.css -o output.css. Performance: (1) Automatic purging (no configuration needed). (2) Lightning CSS minification built-in. (3) Bundle size 30-40% smaller than v3 (5-15 KB gzipped typical). (4) Build times 5x faster. Custom sources: @source '../components'; for non-standard paths. Dynamic classes: avoid bg-${color}-500 (won't be detected), use complete class names: const classes = isActive ? 'bg-blue-500' : 'bg-gray-500'. Safelist (if needed): define patterns in config. Additional: gzip/brotli compression on server. Disable unused features: corePlugins config. Measure: use webpack-bundle-analyzer or similar. Best practice: complete class names, @source for custom paths, trust Oxide engine. Essential for production deployment.
Best practices for v4.0 (2025): (1) CSS-first config: use @theme for design tokens, not tailwind.config.js. (2) Design system: stick to spacing scale, color palette for consistency. (3) Mobile-first: design for mobile, scale up with responsive variants. (4) Component extraction: extract React/Vue components, avoid overusing @apply. (5) @utility for custom utilities: prefer @utility directive over @apply. (6) Consistent class order: layout → spacing → typography → colors → effects. (7) Editor setup: Tailwind CSS IntelliSense, Prettier plugin (prettier-plugin-tailwindcss) for automatic sorting. (8) Dark mode: use @custom-variant, design both modes together, test WCAG contrast. (9) Accessibility: always style focus-visible, use semantic HTML, test keyboard navigation. (10) Performance: trust Oxide engine, use complete class names (no dynamic concatenation). (11) Version control CSS config: commit @theme and custom directives. Essential for maintainable, production-ready Tailwind projects.
Common pitfalls in v4.0 (2025): (1) Dynamic class concatenation: avoid bg-${color}-500 (Oxide can't detect), use complete class names or ternaries. (2) Overusing @apply: v4 docs caution against @apply in external modules (duplication, larger bundles), use @utility instead. (3) Using tailwind.config.js for new projects: v4 uses CSS-first config via @theme. (4) Ignoring @source directive: missing custom content paths causes styles to be excluded. (5) Not leveraging @custom-variant: reinventing hover/focus combinations instead of defining custom variants. (6) Arbitrary values for repeated patterns: extract to @theme instead. (7) Accessibility neglect: not styling focus-visible, insufficient color contrast. (8) Fighting CSS-first: trying to force v3 patterns into v4. (9) Not using official plugins: reinventing @tailwindcss/typography, @tailwindcss/forms. (10) Mixing v3 and v4 approaches: causes confusion and bloat. Best practice: embrace v4 CSS-first philosophy.
Tailwind v4.0 (2025) vs Traditional CSS: Tailwind: utility-first (compose in HTML), 10x faster builds (Oxide engine), 5-15 KB gzipped production. Traditional: semantic CSS, custom class names, manual optimization. Tailwind pros: lightning-fast development, consistent design system, no naming bikeshedding, automatic tree-shaking. Cons: HTML verbosity, learning curve. Tailwind vs Bootstrap: Tailwind utility-based (build your own), design-agnostic, 5-15 KB production. Bootstrap component-based, opinionated design, larger bundle (~25 KB). Tailwind 10x more GitHub stars (2025), dominant in modern frameworks (Next.js, Remix). When Tailwind: custom designs, design systems, modern React/Vue apps, performance-critical. When Bootstrap: rapid prototyping with prebuilt UI, traditional server-rendered sites. When traditional: tiny projects, legacy maintenance. Tailwind industry standard for 2025 web development.
Framework integration v4.0 (2025): Next.js 15+: built-in support, npx create-next-app --tailwind. Vite: npm install -D @tailwindcss/vite, add to vite.config.js (better performance than PostCSS). React: npm install -D tailwindcss @tailwindcss/postcss, configure PostCSS. Vue/Nuxt: npm install -D tailwindcss, @import 'tailwindcss'; in CSS. Svelte/SvelteKit: similar PostCSS setup. Astro: automatic integration. Component patterns: (1) Complete class names: const btnClass = variant === 'primary' ? 'bg-blue-500' : 'bg-gray-500';. (2) Class composition: clsx({ 'bg-blue-500': primary, 'hover:bg-blue-700': !disabled }). (3) Component variants: CVA (class-variance-authority) library. Official UI: Headless UI (unstyled, accessible), Tailwind UI (prebuilt, paid). Best practice: extract repeated patterns to components, avoid string concatenation, use framework-native conditional rendering. Excellent DX with modern frameworks.
Container in v4.0: two types - layout container and container queries. Layout container: sets max-width matching current breakpoint. Usage:
Component variants in v4.0 (2025): manage multiple component styles using modern patterns. Approaches: (1) Object mapping: const variants = { primary: 'bg-blue-500 hover:bg-blue-700', secondary: 'bg-gray-500 hover:bg-gray-700' }; className={variants[variant]}. (2) clsx library: clsx('px-4 py-2', { 'bg-blue-500': isPrimary, 'bg-gray-500': !isPrimary }). (3) CVA (class-variance-authority): cva('btn-base', { variants: { intent: { primary: 'bg-blue-500', secondary: 'bg-gray-500' }, size: { sm: 'text-sm', lg: 'text-lg' } } }). (4) @theme for variant colors: @theme { --color-btn-primary: blue; } use bg-btn-primary. (5) Compound variants: CVA supports compoundVariants for combination styling. Best practice: use complete class names, CVA for complex variants, object maps for simple cases, never string concatenation. Essential for design systems and component libraries.
Major v4.0 changes (January 2025): (1) Oxide engine: Rust-based, 10x performance, 5x faster builds, 100x faster incremental. (2) CSS-first configuration: @import 'tailwindcss'; + @theme {} replaces tailwind.config.js. (3) Lightning CSS integration: built-in vendor prefixing, no PostCSS config needed. (4) Automatic content detection: no content: [] required, use @source for custom paths. (5) Native cascade layers: @layer theme, base, components, utilities;. (6) Container queries in core: @container, @lg:, @[500px]: built-in. (7) @utility directive: new way to define custom utilities. (8) @custom-variant: define custom state variants. (9) PostCSS separation: use @tailwindcss/postcss package. (10) 30-40% smaller bundles. Breaking: tailwind.config.js patterns need migration to CSS. Migration: @import 'tailwindcss'; + migrate config to @theme. v4 production-ready, recommended for all 2025 projects.