Tailwind CSS v4 Highlights Summary

Every highlight bullet from the 9 pages in this section, gathered on one page and grouped by the page it came from.

Tailwind CSS v4 Setup

• v4 is CSS-first, all config lives in @theme, no tailwind.config.js needed
• Single @import 'tailwindcss' replaces the three v3 @tailwind directives
• @theme tokens follow --category-name so --color-brand becomes text-brand
• PostCSS plugin renamed to @tailwindcss/postcss, the old name fails silently
• Add @source paths only when auto-detection misses non-standard file locations
• Run npx @tailwindcss/upgrade to migrate v3 JS config into @theme

Tailwind Examples

• Buttons pair focus:ring-2 with ring-offset-2 for accessible visual feedback
• Body text uses gray-600 with leading-relaxed instead of pure black
• Alert boxes pair a 50 background with a 700/800 text shade per color family
• Inputs share focus:border-blue-500 and focus:ring-1 for consistent states
• Cards lift on hover via transition-shadow with cursor-pointer for affordance
• CSS-only tooltips use group and group-hover with whitespace-nowrap positioning

Tailwind Utilities

• size-12 sets width and height together, shorthand for w-12 h-12
• Class order does not decide specificity, use tailwind-merge to resolve conflicts
• Flex children need min-w-0 to shrink below their content and avoid overflow
• group with group-hover styles children when the parent is hovered
• Prefer focus-visible over focus so mouse clicks skip the focus ring
• truncate requires a width constraint on the element or a parent

Grid Examples

• Use justify-center with items-center for perfect both-axis flexbox centering
• Prefer gap utilities over space-x for wrapped flex layouts
• flex-1 grows an item while flex-shrink-0 protects fixed-width sidebars
• Arbitrary grid-cols like 250px_1fr build sidebar and dashboard layouts
• col-span-full and row-span-2 control item spanning across grid tracks
• Holy grail layout combines min-h-screen with auto_1fr_auto grid rows

Responsive Design

• Tailwind is mobile-first, prefixes like md apply at that width and up
• v4 default breakpoints are defined in rem, not px
• Container queries need an @container parent before @sm or @md work
• max-lg means strictly below lg, the boundary is exclusive not inclusive
• Dynamic class names like grid-cols-${n} are never detected by the scanner
• Named containers query a specific ancestor when @container elements are nested

Dark Mode

• v4 dark: defaults to prefers-color-scheme media query with no config
• Override with @variant dark using :where(.dark) for class-based toggling at zero specificity
• Semantic tokens like --color-surface swap in .dark, avoiding bg-white dark:bg-gray-950 pairs
• next-themes handles SSR, flash prevention, and system sync in Next.js
• suppressHydrationWarning on html silences the server/client class mismatch warning
• Use data-theme attributes to support more palettes beyond light and dark

Animations

• transition-* activates on state changes, animate-* runs keyframes on mount
• Define custom animations via --animate-* in @theme paired with @keyframes
• Prefer transition-transform and transition-opacity to avoid layout jank
• Use motion-safe and motion-reduce to respect prefers-reduced-motion preference
• Start at opacity-0 with animation-fill-mode forwards to avoid mount flash
• Built-in spin, ping, pulse, bounce cover common loading and attention effects

Custom Utilities

• @utility creates a class that auto-supports responsive, hover, and dark modifiers
• @variant maps custom modifiers to selectors, with & representing the target element
• Custom utilities cannot take arguments, define @theme values for parameterized spacing
• @utility names must be single identifiers, hyphens allowed but no dots or spaces
• Register v3 plugins via @config while keeping all theme values in @theme
• Wrap variant selectors in :where() to zero specificity and avoid overrides

Tailwind Colors

• v4 defines colors in oklch for perceptual uniformity across equal lightness values
• Every color ships 11 shades from 50 lightest to 950 darkest
• Append /opacity like bg-blue-500/50 for transparent color variants
• Dynamic class names like bg-color-500 fail Tailwind's build-time scanner, use lookup maps
• Define custom scales and semantic aliases through --color-* in @theme
• Dark mode oklch lightness is not symmetric, test colors visually not by number