Tailwind CSS v4: instalace, základy a udržitelný kód

Tailwind CSS je framework postavený na utility třídách: místo psaní vlastních tříd v CSS skládáte vzhled přímo v HTML z malých tříd jako p-4, text-lg nebo rounded-xl. Výsledný CSS soubor obsahuje jen třídy, které skutečně používáte. Tento návod popisuje Tailwind v4 (vydaný začátkem roku 2025), který se konfiguruje jinak než v3.

Instalace s Vite

npm create vite@latest muj-web -- --template vanilla
cd muj-web
npm install tailwindcss @tailwindcss/vite

// vite.config.js
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

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

Do hlavního CSS souboru stačí jeden řádek:

/* src/style.css */
@import "tailwindcss";

To je vše. Ve v4 už není potřeba tailwind.config.js ani nastavení content – soubory s třídami Tailwind najde automaticky (ignoruje přitom věci z .gitignore). Pro jiné nástroje existuje PostCSS plugin @tailwindcss/postcss a samostatné CLI @tailwindcss/cli.

Pozor při čtení starších návodů: direktivy @tailwind base; @tailwind components; @tailwind utilities; a npx tailwindcss init patří k verzi 3.

Jak číst utility třídy

<button class="rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white hover:bg-blue-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
  Odeslat
</button>

Třída	CSS
px-4	padding-inline: 1rem (jednotka 0,25rem × 4)
py-2	padding-block: 0.5rem
bg-blue-600	barva pozadí z palety
rounded-lg	zaoblení rohů
hover:	platí jen při najetí myší
focus-visible:	platí při fokusu z klávesnice

Vypadá to dlouze, ale máte okamžitý přehled, jak prvek vypadá, a nemusíte vymýšlet názvy tříd ani přepínat mezi soubory. Pro hodnotu mimo škálu je tu zápis v hranatých závorkách: w-[372px], bg-[#1e293b].

Responzivita: mobile-first prefixy

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  …
</div>

Třída bez prefixu platí vždy, sm: od 40rem (640 px), md: od 48rem, lg: od 64rem, xl: od 80rem. Prefix znamená „od této šířky výš”, ne „jen na této šířce”. Takže sm:grid-cols-2 neznamená „na malých obrazovkách”, ale „od malých výš”.

Container queries jsou ve v4 vestavěné: rodič dostane @container a potomek třeba @md:flex-row.

Dark mode

Ve výchozím stavu prefix dark: reaguje na systémové nastavení (prefers-color-scheme):

<div class="bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100">…</div>

Pro ruční přepínač třídou na <html> přidejte do CSS vlastní variantu:

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

Pak stačí v JavaScriptu přepínat document.documentElement.classList.toggle('dark').

Vlastní téma přes @theme

Ve v4 se barvy, fonty a breakpointy definují v CSS jako proměnné:

@import "tailwindcss";

@theme {
  --color-brand-500: oklch(0.62 0.19 255);
  --color-brand-700: oklch(0.48 0.17 255);
  --font-display: "Inter", sans-serif;
  --breakpoint-3xl: 120rem;
}

Automaticky tím vzniknou třídy bg-brand-500, text-brand-700, font-display a prefix 3xl:. Navíc jsou všechny hodnoty dostupné jako CSS proměnné (var(--color-brand-500)), takže je můžete použít i ve vlastním CSS.

Jak udržet šablony přehledné

Největší výtka k Tailwindu jsou dlouhé řetězce tříd, které se opakují. Řešení v pořadí, jak po nich sahat:

1. Komponenty frameworku. V Reactu, Vue nebo Svelte opakovaný prvek prostě udělejte komponentou – třídy pak existují jen na jednom místě.

function Button({ variant = 'primary', className = '', ...props }) {
  const styles = {
    primary: 'bg-brand-500 text-white hover:bg-brand-700',
    ghost: 'bg-transparent text-brand-700 hover:bg-brand-500/10',
  };
  return (
    <button
      className={`rounded-lg px-4 py-2 font-semibold ${styles[variant]} ${className}`}
      {...props}
    />
  );
}

Pro skládání a řešení konfliktů tříd se používají knihovny clsx a tailwind-merge.

2. Smyčky v šablonách místo kopírování stejného markupu.

3. @apply jen pro věci, kde nemáte kontrolu nad HTML (např. obsah z CMS):

.prose-content a {
  @apply text-brand-700 underline underline-offset-2;
}

Pro formátování článků z Markdownu existuje oficiální plugin @tailwindcss/typography (třída prose), ve v4 se aktivuje přes @plugin "@tailwindcss/typography";.

Dynamické třídy: nejčastější chyba

// ❌ Tailwind tuto třídu nenajde
<div className={`bg-${color}-500`} />

// ✅ celé názvy tříd musí být v kódu
const colors = { red: 'bg-red-500', green: 'bg-green-500' };
<div className={colors[color]} />

Tailwind čte zdrojové soubory jako text a hledá celé názvy tříd. Poskládaný řetězec nenajde a třída ve výsledném CSS nebude.

Vývojové pomůcky

• Rozšíření Tailwind CSS IntelliSense pro VS Code – našeptávání, náhled CSS při najetí myší a upozornění na konflikty.
• prettier-plugin-tailwindcss – automaticky řadí třídy v jednotném pořadí, takže se v nich lépe orientujete a diffy jsou menší.

Kdy Tailwind nepoužít

Pro malý statický web s pár stránkami může být čisté CSS jednodušší. A pokud tým preferuje sémantické třídy a má zavedený design systém v CSS, přechod nemusí přinést dost výhod. Tailwind se nejvíc vyplatí v komponentových aplikacích, kde se rychle iteruje na vzhledu.