Tailwind CSS v4

Setup (Next.js)

/* app/globals.css */
@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

PostCSS uses @tailwindcss/postcss — no separate tailwind.config.js required for tokens.

Theme tokens (@theme)

Define design system once:

@theme inline {
  --color-brand-50: #f0f4f8;
  --color-brand-900: #0a1929;
  --color-accent-400: #e6c35c;
  --font-sans: var(--font-dm-sans), system-ui, sans-serif;
}

Use in components: bg-brand-900, text-accent-400, font-sans.

CSS variables for runtime theming

:root {
  --background: #f8fafc;
  --foreground: #0a1929;
}
.dark {
  --background: #0a1929;
  --foreground: #f0f4f8;
  color-scheme: dark;
}

Map in @theme: --color-background: var(--background).

Dark mode

Pair with next-themes — class strategy on <html>:

<html suppressHydrationWarning>

Use dark: variants: dark:bg-brand-900 dark:text-slate-100.

Responsive patterns

Mobile-first breakpoints: sm:, md:, lg:.

<div className="flex flex-col gap-4 sm:flex-row lg:grid lg:grid-cols-3">

Common dashboard: stack on mobile, grid on lg:.

Accessibility utilities

<span className="sr-only">Loading</span>
<a className="sr-only focus:not-sr-only focus:fixed focus:z-[100] ...">Skip to main</a>

Reduced motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Print styles

@media print {
  @page { size: A4 landscape; margin: 0.5cm; }
  .print\:hidden { /* use print:hidden in JSX */ }
}

cn() helper

Always merge conditional classes:

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Anti-patterns

• Arbitrary hex in every component — use @theme tokens
• !important everywhere — fix specificity with data attributes for export/print overrides
• Inline style={{}} for static values Tailwind can express
• Forgetting explicit height on chart/chart-like containers