Tailwind CSS v4: Co se skutečně změnilo a jestli migrovat | Akousa

9. ledna 202619 min čtení

Tailwind CSS v4: Co se skutečně změnilo a jestli migrovat

CSS-first konfigurace, integrace @layer, vestavěné container queries, výkon nového enginu, breaking changes a moje upřímná zkušenost s migrací z v3 na v4.

Tailwind CSS používám od v1.x, kdy polovina komunity ho považovala za ohavnost a druhá polovina s ním nedokázala přestat dodávat. Každá velká verze byla významný skok, ale v4 je jiná. Není to jen feature release. Je to architektonické přepsání od základů, které mění fundamentální smlouvu mezi vámi a frameworkem.

Po migraci dvou produkčních projektů z v3 na v4 a spuštění tří nových projektů na v4 od nuly mám jasný obrázek toho, co je skutečně lepší, co je hrubé a jestli byste měli migrovat dnes. Žádný hype, žádné pobouření — jen to, co jsem pozoroval.

Celkový obraz: Co v4 skutečně je

Tailwind CSS v4 je tři věci najednou:

Nový engine — přepsaný z JavaScriptu do Rustu (Oxide engine), díky čemuž jsou buildy dramaticky rychlejší
Nové konfigurační paradigma — CSS-first konfigurace nahrazuje tailwind.config.js jako výchozí
Těsnější integrace s CSS platformou — nativní @layer, container queries, @starting-style a cascade layers jsou prvotřídní občané

Titulek, který uvidíte všude, je „10x rychlejší." To je reálné, ale podceňuje to skutečnou změnu. Mentální model pro konfiguraci a rozšiřování Tailwindu se fundamentálně posunul. Teď pracujete s CSS, ne s JavaScriptovým konfiguračním objektem, který generuje CSS.

Takto vypadá minimální Tailwind v4 setup:

css

/* app.css — toto je celý setup */
@import "tailwindcss";

To je vše. Žádný konfigurační soubor. Žádná konfigurace PostCSS pluginu (pro většinu setupů). Žádné direktivy @tailwind base; @tailwind components; @tailwind utilities;. Jeden import a jedete.

// v3 — tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: "#eff6ff",
          500: "#3b82f6",
          900: "#1e3a5f",
        },
      },
      fontFamily: {
        display: ["Inter Variable", "sans-serif"],
      },
      spacing: {
        18: "4.5rem",
        112: "28rem",
      },
      borderRadius: {
        "4xl": "2rem",
      },
    },
  },
};

css

@import "tailwindcss";
 
@theme {
  --color-brand-50: #eff6ff;
  --color-brand-500: #3b82f6;
  --color-brand-900: #1e3a5f;
 
  --font-display: "Inter Variable", sans-serif;
 
  --spacing-18: 4.5rem;
  --spacing-112: 28rem;
 
  --radius-4xl: 2rem;
}

css

@import "tailwindcss";
 
@theme {
  /* Nejdříve vymažeme všechny výchozí barvy */
  --color-*: initial;
 
  /* Teď definujeme jen naše barvy */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-brand-50: #eff6ff;
  --color-brand-500: #3b82f6;
  --color-brand-900: #1e3a5f;
}

css

/* styles/theme/colors.css */
@theme {
  --color-brand-50: #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-200: #bfdbfe;
  --color-brand-300: #93c5fd;
  --color-brand-400: #60a5fa;
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
  --color-brand-700: #1d4ed8;
  --color-brand-800: #1e40af;
  --color-brand-900: #1e3a5f;
  --color-brand-950: #172554;
}
 
/* styles/theme/typography.css */
@theme {
  --font-display: "Inter Variable", sans-serif;
  --font-body: "Source Sans 3 Variable", sans-serif;
  --font-mono: "JetBrains Mono Variable", monospace;
 
  --text-display: 3.5rem;
  --text-display--line-height: 1.1;
  --text-display--letter-spacing: -0.02em;
}

css

/* v4 výstup — zjednodušený */
@layer theme, base, components, utilities;
 
@layer base {
  /* reset, preflight */
}
 
@layer components {
  /* vaše component třídy */
}
 
@layer utilities {
  /* všechny generované utility třídy */
}

css

@layer components {
  /* specificita: 0-1-0 */
  .card {
    padding: 1rem;
  }
}
 
@layer utilities {
  /* specificita: 0-1-0 — stejná specificita ale vyhrává, protože utilities vrstva je pozdější */
  .p-4 {
    padding: 1rem;
  }
}

// v3 — plugin přístup
const plugin = require("tailwindcss/plugin");
 
module.exports = {
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        ".text-balance": {
          "text-wrap": "balance",
        },
        ".text-pretty": {
          "text-wrap": "pretty",
        },
      });
    }),
  ],
};

html

<!-- označíme rodiče jako kontejner -->
<div class="@container">
  <!-- responsivní vůči šířce rodiče, ne viewportu -->
  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3">
    <div class="p-4">Karta 1</div>
    <div class="p-4">Karta 2</div>
    <div class="p-4">Karta 3</div>
  </div>
</div>

html

<div class="@container/sidebar">
  <div class="@container/card">
    <!-- dotazuje card kontejner -->
    <div class="@md/card:text-lg">...</div>
 
    <!-- dotazuje sidebar kontejner -->
    <div class="@lg/sidebar:hidden">...</div>
  </div>
</div>

html

<!-- Tato komponenta se přizpůsobí JAKÉMUKOLI kontejneru, do kterého je umístěna -->
<article class="@container">
  <div class="grid grid-cols-1 @md:grid-cols-[200px_1fr] gap-4">
    <img
      class="w-full @md:w-auto rounded-lg aspect-video @md:aspect-square object-cover"
      src="/post-image.jpg"
      alt=""
    />
    <div>
      <h2 class="text-lg @lg:text-xl font-semibold">Název příspěvku</h2>
      <p class="mt-2 text-sm @md:text-base text-gray-600">Výtah z příspěvku...</p>
      <div class="mt-4 hidden @md:flex gap-2">
        <span class="text-xs bg-gray-100 px-2 py-1 rounded">Tag</span>
      </div>
    </div>
  </div>
</article>

html

<!-- každé dítě kromě posledního dostane border -->
<div class="divide-y">
  <div class="not-last:pb-4">Položka 1</div>
  <div class="not-last:pb-4">Položka 2</div>
  <div class="not-last:pb-4">Položka 3</div>
</div>
 
<!-- stylujeme vše, co není disabled -->
<input class="not-disabled:hover:border-brand-500" />
 
<!-- negujeme data atributy -->
<div class="not-data-active:opacity-50">...</div>

html

<ul>
  <li class="nth-1:font-bold">První položka — tučně</li>
  <li class="nth-even:bg-gray-50">Sudé řádky — šedé pozadí</li>
  <li class="nth-odd:bg-white">Liché řádky — bílé pozadí</li>
  <li class="nth-[3n+1]:text-brand-500">Každý třetí+1 — brand barva</li>
</ul>

html

<!-- všechny odstavce uvnitř tohoto divu, v jakékoli hloubce -->
<div class="**:data-highlight:bg-yellow-100">
  <section>
    <p data-highlight>Toto se zvýrazní</p>
    <div>
      <p data-highlight>Toto také, zanořeno hlouběji</p>
    </div>
  </section>
</div>

/* ODSTRANĚNO ve v4 */
bg-opacity-*     → použijte bg-black/50 (lomítková syntaxe opacity)
text-opacity-*   → použijte text-black/50
border-opacity-* → použijte border-black/50
flex-shrink-*    → použijte shrink-*
flex-grow-*      → použijte grow-*
overflow-ellipsis → použijte text-ellipsis
decoration-slice  → použijte box-decoration-slice
decoration-clone  → použijte box-decoration-clone

// v3 plugin
plugin(function ({ addUtilities, theme }) {
  addUtilities({
    ".scrollbar-hide": {
      "-ms-overflow-style": "none",
      "scrollbar-width": "none",
      "&::-webkit-scrollbar": {
        display: "none",
      },
    },
  });
});

// v3 config — před
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          light: "#60a5fa",
          DEFAULT: "#3b82f6",
          dark: "#1d4ed8",
        },
      },
      fontSize: {
        "2xs": ["0.65rem", { lineHeight: "1rem" }],
      },
      animation: {
        "fade-in": "fade-in 0.5s ease-out",
      },
      keyframes: {
        "fade-in": {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" },
        },
      },
    },
  },
};

css

/* v4 CSS — po */
@import "tailwindcss";
 
@theme {
  --color-brand-light: #60a5fa;
  --color-brand: #3b82f6;
  --color-brand-dark: #1d4ed8;
 
  --text-2xs: 0.65rem;
  --text-2xs--line-height: 1rem;
 
  --animate-fade-in: fade-in 0.5s ease-out;
}
 
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

json

{
  "@tailwindcss/typography": "^1.0.0",
  "@tailwindcss/forms": "^1.0.0",
  "@tailwindcss/container-queries": "ODSTRAŇTE — nyní vestavěné",
  "tailwindcss-animate": "zkontrolujte podporu v4",
  "prettier-plugin-tailwindcss": "aktualizujte na nejnovější"
}

css

/* přístup přes data atribut */
@variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
/* media query — toto je výchozí, takže to nemusíte deklarovat */
@variant dark (@media (prefers-color-scheme: dark));

css

@import "tailwindcss";
 
@theme {
  --color-brand: var(--brand-primary, #3b82f6);
  --color-brand-light: var(--brand-light, #60a5fa);
  --color-brand-dark: var(--brand-dark, #1d4ed8);
}
 
/* Přepisy značek */
.theme-acme {
  --brand-primary: #e11d48;
  --brand-light: #fb7185;
  --brand-dark: #9f1239;
}
 
.theme-globex {
  --brand-primary: #059669;
  --brand-light: #34d399;
  --brand-dark: #047857;
}

Metrika	v3 (Node)	v4 (Oxide)	Zlepšení
Úvodní build	4 280ms	387ms	11x
Inkrementální (editace 1 souboru)	340ms	18ms	19x
Plný rebuild (clean)	5 100ms	510ms	10x
Start dev serveru	3 200ms	290ms	11x

Varianta	Min-width
`@sm`	24rem (384px)
`@md`	28rem (448px)
`@lg`	32rem (512px)
`@xl`	36rem (576px)
`@2xl`	42rem (672px)

Setup	v3 + Webpack	v3 + Turbopack	v4 + Turbopack
Studený start	4.8s	2.1s	1.3s
HMR (CSS změna)	450ms	180ms	40ms

Metrika	v3	v4
Špičková paměť (build)	380MB	45MB
Ustálený stav (dev)	210MB	28MB

Celkový obraz: Co v4 skutečně je

CSS-First konfigurace s @theme

Přepisování vs. rozšiřování výchozího tématu

Více souborů s tématem

Oxide Engine: Skutečně 10x rychlejší

Proč je to tak rychlé?

Záleží na rychlosti?

Nativní integrace @layer

Přidání vlastních utilit

Vlastní varianty

Container Queries: Vestavěné, bez pluginu

Základní použití

Pojmenované kontejnery

Proč na tom záleží

Nové varianty, které skutečně záleží

Varianta starting:

Varianta not-*

Varianty nth-*

Varianta in-* (Stav rodiče)

Varianta **: Hluboký univerzální výběr

Breaking Changes: Co se skutečně rozbilo

1. Formát konfigurace

2. Odstraněné zastaralé utility

3. Změny výchozí palety barev

4. Detekce obsahu

5. Změny Plugin API

6. JIT je jediný režim

7. Některé změny syntaxe variant

Průvodce migrací: Skutečný proces

Krok 1: Spusťte oficiální codemod

Co codemod zvládá dobře

Co codemod NEZVLÁDÁ

Krok 2: Opravte konfiguraci PostCSS

Krok 3: Převeďte konfiguraci tématu

Krok 4: Vizuální regresní testování

Krok 5: Aktualizujte závislosti třetích stran

Práce s Next.js

PostCSS přístup (doporučený pro Next.js)

Pořadí CSS importů

Tmavý režim

Kompatibilita s Turbopackem

Hlubší pohled na výkon: Za hranicí rychlosti buildu

Spotřeba paměti

Velikost CSS výstupu

Tree Shaking theme hodnot

Pokročilé: Skládání témat pro více značek

Co mi chybí z v3

Měli byste migrovat?

Migrujte teď, pokud:

Počkejte, pokud:

Nemigrujte, pokud:

Můj upřímný názor

Související články

Regex Cheat Sheet 2026 — Regular Expressions Made Simple

How to Compress Images Without Losing Quality: The Complete 2026 Guide

Varianta `starting:`

Varianta `not-*`

Varianty `nth-*`

Varianta `in-*` (Stav rodiče)

Varianta `**:` Hluboký univerzální výběr