Tailwind CSS v4 ass op eng CSS-first Configuratioun an e méi séieren Engine gewiesselt. Dëse Guide deckt d'Musteren an d'Tools of, déi eng Tailwind-Codebasis propper, skaléierbar an ugehueleg halen.

Tailwind CSS v4

Versioun 4 gëtt komplett am CSS konfiguréiert. Kee tailwind.config.js; Dir importéiert en einfach an deklaréiert Är Design Tokens.

@import "tailwindcss";

@theme {
  --color-primary: #6366f1;
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --radius-lg: 0.75rem;
}

Eegen Utilities a Variante ginn am selwechte Fichier deklaréiert.

@utility container {
  margin-inline: auto;
  padding-inline: 1rem;
}

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

Design Tokens

Definéiert Tokens eemol a referenzéiert se iwwerall, fir datt Faarwen an Ofstänn konsequent bleiwen. Arbiträr Wäerter wéi bg-[#6366f1] sinn fir Eemolegkeeten, net fir en Design System.

@theme {
  --color-primary-500: #6366f1;
  --color-primary-600: #4f46e5;
  --spacing-18: 4.5rem;
}

Da funktionéieren bg-primary-500, p-18 an text-primary-600.

Utility-first Best Practices

Komponéiert kleng Utilities amplaz eegent CSS ze schreiwen, awer extrahéiert e Muster, soubal et sech widderhëlt.

<button class="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-500">
  Save
</button>

Reegele fir et erhalbar ze halen:

• Benotzt Tokens, keng réi Wäerter.
• Sortéiert d'Klassen automatesch (kuckt de Prettier-Plugin drënner).
• Léiwer gap/space-* wéi manuell Margen.
• Haalt responsive- an Zoustandsvariante no bei de Basisklassen.

Widderverwendbar Komponenten

Wann e Muster sech widderhëlt, extrahéiert et. Tailwind bitt dräi Niveauen.

Komponentklassen mat @apply:

.btn {
  @apply inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium;
}
.btn-primary {
  @apply bg-primary-600 text-white hover:bg-primary-500;
}

Klassvariante mat class-variance-authority (gutt fir React/Solid):

import { cva, type VariantProps } from 'class-variance-authority'

const button = cva('inline-flex items-center rounded-lg font-medium', {
  variants: {
    variant: {
      primary: 'bg-primary-600 text-white hover:bg-primary-500',
      ghost: 'border border-gray-300 text-gray-700',
    },
    size: {
      sm: 'px-3 py-1.5 text-sm',
      md: 'px-4 py-2 text-base',
    },
  },
  defaultVariants: { variant: 'primary', size: 'md' },
})

Klassen zesummeféieren mat clsx + tailwind-merge:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

// later conflicting class wins
cn('px-4', 'px-2') // 'px-2'

Den Komponenten-Ecosystem

Dir musst net all Primitiv vun Null bauen.

• shadcn/ui — Copy-Paste-Komponenten, op Radix baséiert, déi Dir besëtzt an editéiert.
• Radix UI / Headless UI — accessibel, ongestylt Primitiver.
• daisyUI — fäerdeg, thematiséierbar Komponentklassen.

Kombinéiert se mat Tailwind fir voll Kontroll ouni d'Accessibilitéitslaascht.

Tooling

• @tailwindcss/vite — de Vite-Plugin (eemol addéieren, vergiessen).
• prettier-plugin-tailwindcss — sortéiert Utility-Klassen fir eng konsequent Reiefolleg.
• clsx + tailwind-merge — komponéieren an deduplizéieren.
• class-variance-authority — typiséiert Komponentvariante.

npm install -D tailwindcss @tailwindcss/vite prettier-plugin-tailwindcss
npm install clsx tailwind-merge class-variance-authority

Schéin maachen

Eng schéin UI ass virun allem Konsequenz, net Dekoratioun.

• Typographie — eng Fontskala, eng gemittlech Zeilenhéicht, e begrenzten Mooss.
• Ofstänn — bleift op der 4px-Skala; alignéiert op e Gitter.
• Faarf — eng kleng Palette mat engem Akzent; kontrolléiert de Kontrast.
• Beweegung — kuerz, subtil Iwwergäng (transition, duration-150).
• Dark Mode — designéiert béid, gedriwwen duerch d'dark-Variante.

Fäerdeg Produktiounsbeispiller

E komplette, kopéierbare Setup: Design Tokens, en cn-Hëllefsmëttel a typiséiert Komponenten.

Theme Tokens (theme.css):

@import "tailwindcss";

@theme {
  --color-brand-50: #eef2ff;
  --color-brand-500: #6366f1;
  --color-brand-600: #4f46e5;
  --color-brand-700: #4338ca;

  --color-surface: #ffffff;
  --color-ink: #0f172a;
  --color-muted: #64748b;

  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --shadow-card: 0 1px 2px rgb(15 23 42 / 0.06), 0 4px 12px rgb(15 23 42 / 0.08);
}

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

Button (button.tsx) mat typiséierte Varianten:

import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from './cn'

const buttonVariants = cva(
  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        primary: 'bg-brand-600 text-white hover:bg-brand-500',
        secondary: 'border border-slate-200 bg-surface text-ink hover:bg-slate-50',
        ghost: 'text-ink hover:bg-slate-100',
        destructive: 'bg-red-600 text-white hover:bg-red-500',
      },
      size: {
        sm: 'h-8 px-3 text-xs',
        md: 'h-10 px-4',
        lg: 'h-12 px-6 text-base',
      },
    },
    defaultVariants: { variant: 'primary', size: 'md' },
  },
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

export function Button({ className, variant, size, ...props }: ButtonProps) {
  return (
    <button
      className={cn(buttonVariants({ variant, size }), className)}
      {...props}
    />
  )
}

Card an Input (card.tsx, input.tsx):

export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn(
        'rounded-md border border-slate-200 bg-surface p-6 shadow-card',
        className,
      )}
      {...props}
    />
  )
}

export function Input({ className, ...props }: React.InputHTMLAttributes<HTMLInputElement>) {
  return (
    <input
      className={cn(
        'h-10 w-full rounded-md border border-slate-200 bg-surface px-3 text-sm text-ink placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-brand-500',
        className,
      )}
      {...props}
    />
  )
}

Dës Tokens a Komponente bilden d'Basis vun engem richtegen Design System: konsequent Faarwen, typiséiert Varianten an eng eenzeg Quell vun der Wourecht.

Zum Schluss

Dem Tailwind v4 säi CSS-first Setup, Design Tokens a Komponentenextraktioun (mat cva a cn) ginn Iech e System, deen skaléiert. Füügt shadcn/Radix fir Primitiver an de Prettier-Plugin fir d'Reiefolleg derbäi, an Dir kritt eng schéin, erhalbar UI.