Tailwind CSS v4

Kterou integraci zvolit

Vstupní CSS, vlastní design (@theme, @utility) i výběr zdrojů přes @source fungují ve všech integracích stejně. Kde se postup liší (instalace, build, rozdělení CSS), přepnete si v záložkách mezi Express a Next.js - volba platí pro celý návod.

Celý postup ve zkratce

1. Nainstalujte balíčky - podle integrace v tabulce výše
2. Vytvořte vstupní CSS - soubor s řádkem @import "tailwindcss";
3. Napojte build - Express: skripty s CLI v package.json · Next.js: postcss.config.mjs
4. Načtěte CSS - Express: <link> v layoutu · Next.js: import "./globals.css" v app/layout.tsx

Co řešíte?

Co je ve v4 jinak než ve v3

Pokud znáte Tailwind 3, většina starých návodů už neplatí. Nejdůležitější změny:

Přechod existujícího projektu z v3

Většinu práce udělá oficiální nástroj - převede závislosti, vstupní CSS, konfiguraci i PostCSS a upraví přejmenované třídy v šablonách. Spusťte ho v nové větvi a výsledek zkontrolujte:

npx @tailwindcss/upgrade

Barvy, fonty a breakpointy: @theme

Každá proměnná v bloku @theme přidá sadu tříd. Z --color-brand vznikne bg-brand, text-brand, border-brand atd., z --font-display třída font-display, z --breakpoint-3xl varianta 3xl:.

@import "tailwindcss";

@theme {
  --color-brand: #00a94f;
  --color-brand-dark: #0f2a1d;
  --font-display: "Inter", sans-serif;
  --breakpoint-3xl: 120rem;
}

Next.js: fonty z next/font

next/font stáhne písmo při buildu a hostuje ho sám. Font zpřístupníte jako CSS proměnnou na <html> a v CSS ho napojíte na třídu font-sans:

import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin", "latin-ext"], variable: "--font-inter" });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="cs" className={inter.variable}>
      <body className="font-sans">{children}</body>
    </html>
  );
}

@theme inline {
  --font-sans: var(--font-inter);
}

inline je tu důležité: proměnnou --font-inter nastavuje next/font až na elementu <html>, takže třída musí odkazovat přímo na ni. Pro češtinu nezapomeňte na latin-ext.

Opakovaně používané styly: @utility

Když se stejná kombinace tříd opakuje (tlačítka, štítky), vytvořte z ní vlastní třídu direktivou @utility. Funguje i s variantami, takže můžete psát md:btn-primary. Uvnitř lze použít @apply s běžnými třídami Tailwindu i proměnné z @theme. V Next.js (React) je často přirozenější udělat z opakovaného prvku komponentu - @utility se hodí hlavně pro šablony bez komponent.

@utility btn-primary {
  @apply inline-flex items-center rounded-lg px-4 py-2 font-semibold text-white;
  background-color: var(--color-brand);
}

Pro složitější komponenty, kde varianty nepotřebujete, můžete použít klasické CSS třídy v @layer components { … }. Běžné třídy Tailwindu je v HTML vždy přebijí.

Tmavý režim přepínaný třídou

Varianta dark: se ve výchozím stavu řídí nastavením systému. Pokud chcete režim přepínat tlačítkem (třídou dark na <html>), přepište variantu:

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

Princip: co se vygeneruje a kde se to načte

• Které třídy se vygenerují - automatická detekce prohledává celý projekt, takže by každý soubor obsahoval třídy ze všech šablon. source(none) ji vypne a @source určí, které složky se mají prohledat (cesty relativně k CSS souboru). Funguje to stejně v CLI, PostCSS i Vite.
• Kde se soubor načte - to řeší prostředí: v Express odkaz v layoutu, v Next.js import v layoutu skupiny rout nebo <link> v komponentě stránky.

Které řešení zvolit

@import "tailwindcss" source(none);
@source "../../views/web";
@source "../../views/layouts";
@source "../../views/partials";

@import "tailwindcss" source(none);
@source "../../views/admin";
@source "../../views/partials";

"scripts": {
  "dev:web": "npx @tailwindcss/cli -i ./src/input/web.css -o ./public/css/web.css --watch",
  "dev:admin": "npx @tailwindcss/cli -i ./src/input/admin.css -o ./public/css/admin.css --watch",
  "build:web": "npx @tailwindcss/cli -i ./src/input/web.css -o ./public/css/web.css --minify",
  "build:admin": "npx @tailwindcss/cli -i ./src/input/admin.css -o ./public/css/admin.css --minify",
  "dev": "run-p dev:web dev:admin",
  "build": "run-p build:web build:admin"
}

npm install -D npm-run-all2

app/
├── (web)/
│   ├── layout.tsx       ← import "./web.css"
│   ├── web.css
│   └── page.tsx
└── (admin)/
    ├── layout.tsx       ← import "./admin.css"
    ├── admin.css
    └── admin/page.tsx

@import "tailwindcss" source(none);
@source "./";
@source "../../components/ui";
@source "../../components/web";

@import "tailwindcss" source(none);
@source "./";
@source "../../components/ui";
@source "../../components/admin";

export function PageStyles({ name, v }: { name: string; v?: string }) {
  const href = `/css/pages/${name}.css${v ? `?v=${v}` : ""}`;
  return <link rel="stylesheet" href={href} precedence="page" />;
}

<main className="tw">
  <PageStyles name="tailwind-css" v="2026-10-06" />
  <section className="tw-hero">…</section>
</main>

Návod vychází z oficiální dokumentace (anglicky) a z nastavení tohoto webu:

• Instalace přes Tailwind CLIOficiální postup pro projekty bez bundleru.
• Tailwind v Next.jsOficiální postup instalace přes PostCSS.
• Detekce tříd ve zdrojích@source, source(none), @source not a inline().
• Theme variablesJmenné prostory proměnných v @theme a volba inline.
• Vlastní styly@utility, @layer components a @custom-variant.
• Upgrade guideKompletní seznam změn mezi v3 a v4.
• Next.js: CSSGlobální CSS, pořadí a slučování stylů v App Routeru.
• React: <link precedence>Načítání stylů z komponent v React 19.
• npm-run-all2Paralelní a sekvenční spouštění npm skriptů.

Související

• Webové službyVývoj, správa a zrychlení webů na míru.
• Next.js (anglicky)Základy frameworku: routování, vykreslování a komponenty.

Jak citovat tuto publikaci (ČSN ISO 690:2022)NEPOR, Vladimír. Tailwind CSS v4: instalace pro Express i Next.js a rozdělení CSS. Online. Vrealmatic, 2025. Dostupné z: https://vrealmatic.com/cs/tailwind-css. [citováno RRRR-MM-DD].

Sdílet