Tailwind CSS v4: Co się naprawdę zmieniło i czy warto migrować | Akousa

// 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 {
  /* Najpierw wyczyść wszystkie domyślne kolory */
  --color-*: initial;
 
  /* Teraz zdefiniuj tylko swoje kolory */
  --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

/* wyjście v4 — uproszczone */
@layer theme, base, components, utilities;
 
@layer base {
  /* reset, preflight */
}
 
@layer components {
  /* twoje klasy komponentów */
}
 
@layer utilities {
  /* wszystkie wygenerowane klasy utility */
}

css

@layer components {
  /* specyficzność: 0-1-0 */
  .card {
    padding: 1rem;
  }
}
 
@layer utilities {
  /* specyficzność: 0-1-0 — taka sama, ale wygrywa, bo warstwa utilities jest późniejsza */
  .p-4 {
    padding: 1rem;
  }
}

// v3 — podejście z pluginem
const plugin = require("tailwindcss/plugin");
 
module.exports = {
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        ".text-balance": {
          "text-wrap": "balance",
        },
        ".text-pretty": {
          "text-wrap": "pretty",
        },
      });
    }),
  ],
};

html

<!-- oznacz rodzica jako kontener -->
<div class="@container">
  <!-- responsywne względem szerokości rodzica, nie 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">
    <!-- odpytuje kontener card -->
    <div class="@md/card:text-lg">...</div>
 
    <!-- odpytuje kontener sidebar -->
    <div class="@lg/sidebar:hidden">...</div>
  </div>
</div>

html

<!-- Ten komponent dostosowuje się do KAŻDEGO kontenera, w którym jest umieszczony -->
<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">Tytuł wpisu</h2>
      <p class="mt-2 text-sm @md:text-base text-gray-600">Fragment wpisu umieszczony tutaj...</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żde dziecko oprócz ostatniego dostaje obramowanie -->
<div class="divide-y">
  <div class="not-last:pb-4">Element 1</div>
  <div class="not-last:pb-4">Element 2</div>
  <div class="not-last:pb-4">Element 3</div>
</div>
 
<!-- styluj wszystko, co nie jest wyłączone -->
<input class="not-disabled:hover:border-brand-500" />
 
<!-- neguj atrybuty data -->
<div class="not-data-active:opacity-50">...</div>

html

<ul>
  <li class="nth-1:font-bold">Pierwszy element — pogrubiony</li>
  <li class="nth-even:bg-gray-50">Parzyste wiersze — szare tło</li>
  <li class="nth-odd:bg-white">Nieparzyste wiersze — białe tło</li>
  <li class="nth-[3n+1]:text-brand-500">Co trzeci+1 — kolor marki</li>
</ul>

html

<!-- wszystkie paragrafy wewnątrz tego div, na dowolnej głębokości -->
<div class="**:data-highlight:bg-yellow-100">
  <section>
    <p data-highlight>Ten jest podświetlony</p>
    <div>
      <p data-highlight>Ten też, zagnieżdżony głębiej</p>
    </div>
  </section>
</div>

/* USUNIĘTE w v4 */
bg-opacity-*     → użyj bg-black/50 (składnia slash opacity)
text-opacity-*   → użyj text-black/50
border-opacity-* → użyj border-black/50
flex-shrink-*    → użyj shrink-*
flex-grow-*      → użyj grow-*
overflow-ellipsis → użyj text-ellipsis
decoration-slice  → użyj box-decoration-slice
decoration-clone  → użyj box-decoration-clone

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

// konfiguracja v3 — przed
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

/* CSS v4 — 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": "USUŃ — teraz wbudowane",
  "tailwindcss-animate": "sprawdź wsparcie v4",
  "prettier-plugin-tailwindcss": "zaktualizuj do najnowszej"
}

css

/* podejście z atrybutem data */
@variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
/* media query — to jest domyślne, więc nie musisz tego deklarować */
@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);
}
 
/* Nadpisania marek */
.theme-acme {
  --brand-primary: #e11d48;
  --brand-light: #fb7185;
  --brand-dark: #9f1239;
}
 
.theme-globex {
  --brand-primary: #059669;
  --brand-light: #34d399;
  --brand-dark: #047857;
}

Metryka	v3 (Node)	v4 (Oxide)	Poprawa
Początkowy build	4 280ms	387ms	11x
Inkrementalny (edycja 1 pliku)	340ms	18ms	19x
Pełny rebuild (clean)	5 100ms	510ms	10x
Start serwera dev	3 200ms	290ms	11x

Wariant	Minimalna szerokość
`@sm`	24rem (384px)
`@md`	28rem (448px)
`@lg`	32rem (512px)
`@xl`	36rem (576px)
`@2xl`	42rem (672px)

Konfiguracja	v3 + Webpack	v3 + Turbopack	v4 + Turbopack
Zimny start	4,8s	2,1s	1,3s
HMR (zmiana CSS)	450ms	180ms	40ms

Metryka	v3	v4
Szczytowa pamięć (build)	380MB	45MB
Stan ustalony (dev)	210MB	28MB

Ogólny obraz: Czym v4 faktycznie jest

Konfiguracja CSS-first z @theme

Nadpisywanie vs rozszerzanie domyślnego motywu

Wiele plików motywu

Silnik Oxide: Naprawdę 10x szybciej

Dlaczego jest taki szybki?

Czy szybkość naprawdę ma znaczenie?

Natywna integracja @layer

Dodawanie niestandardowych klas utility

Niestandardowe warianty

Container queries: Wbudowane, bez pluginu

Podstawowe użycie

Nazwane kontenery

Dlaczego to ma znaczenie

Nowe warianty, które naprawdę mają znaczenie

Wariant starting:

Wariant not-*

Warianty nth-*

Wariant in-* (stan rodzica)

Wariant głęboki **:

Breaking changes: Co się naprawdę zepsuło

1. Format konfiguracji

2. Usunięte przestarzałe klasy utility

3. Zmiany domyślnej palety kolorów

4. Wykrywanie treści

5. Zmiany API pluginów

6. JIT jest jedynym trybem

7. Niektóre zmiany składni wariantów

Przewodnik po migracji: Prawdziwy proces

Krok 1: Uruchom oficjalny codemod

Co codemod obsługuje dobrze

Czego codemod NIE obsługuje

Krok 2: Napraw konfigurację PostCSS

Krok 3: Konwertuj konfigurację motywu

Krok 4: Testy regresji wizualnej

Krok 5: Zaktualizuj zależności firm trzecich

Praca z Next.js

Podejście PostCSS (zalecane dla Next.js)

Kolejność importów CSS

Dark mode

Kompatybilność z Turbopack

Wydajność w głębszym spojrzeniu: Poza szybkością buildów

Użycie pamięci

Rozmiar wyjściowego CSS

Tree shaking wartości motywu

Zaawansowane: Komponowanie motywów dla wielu marek

Czego mi brakuje z v3

Czy powinieneś migrować?

Migruj teraz jeśli:

Poczekaj jeśli:

Nie migruj jeśli:

Moja szczera opinia

Powiązane wpisy

Regex Cheat Sheet 2026 — Regular Expressions Made Simple

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

Wariant `starting:`

Wariant `not-*`

Warianty `nth-*`

Wariant `in-*` (stan rodzica)

Wariant głęboki `**:`