Tailwind CSS v4: Wat Er Echt Veranderde en of Je Moet Migreren | Akousa

@layer

@starting-style

// 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 {
  /* Wis eerst alle standaardkleuren */
  --color-*: initial;
 
  /* Definieer nu alleen jouw kleuren */
  --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 output — vereenvoudigd */
@layer theme, base, components, utilities;
 
@layer base {
  /* reset, preflight */
}
 
@layer components {
  /* je component-classes */
}
 
@layer utilities {
  /* alle gegenereerde utility-classes */
}

css

@layer components {
  /* specificiteit: 0-1-0 */
  .card {
    padding: 1rem;
  }
}
 
@layer utilities {
  /* specificiteit: 0-1-0 — zelfde specificiteit maar wint omdat utilities layer later komt */
  .p-4 {
    padding: 1rem;
  }
}

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

html

<!-- markeer parent als container -->
<div class="@container">
  <!-- responsive ten opzichte van de breedte van de parent, niet de viewport -->
  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3">
    <div class="p-4">Card 1</div>
    <div class="p-4">Card 2</div>
    <div class="p-4">Card 3</div>
  </div>
</div>

html

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

html

<!-- Dit component past zich aan ELKE container aan waarin het geplaatst wordt -->
<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">Post Title</h2>
      <p class="mt-2 text-sm @md:text-base text-gray-600">Post excerpt goes here...</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

<!-- elk child behalve de laatste krijgt een border -->
<div class="divide-y">
  <div class="not-last:pb-4">Item 1</div>
  <div class="not-last:pb-4">Item 2</div>
  <div class="not-last:pb-4">Item 3</div>
</div>
 
<!-- style alles dat niet disabled is -->
<input class="not-disabled:hover:border-brand-500" />
 
<!-- negeer data-attributen -->
<div class="not-data-active:opacity-50">...</div>

html

<ul>
  <li class="nth-1:font-bold">Eerste item — vet</li>
  <li class="nth-even:bg-gray-50">Even rijen — grijze achtergrond</li>
  <li class="nth-odd:bg-white">Oneven rijen — witte achtergrond</li>
  <li class="nth-[3n+1]:text-brand-500">Elke derde+1 — merkkleur</li>
</ul>

html

<!-- alle paragrafen in deze div, op elke diepte -->
<div class="**:data-highlight:bg-yellow-100">
  <section>
    <p data-highlight>Dit wordt gehighlight</p>
    <div>
      <p data-highlight>Dit ook, dieper genest</p>
    </div>
  </section>
</div>

/* VERWIJDERD in v4 */
bg-opacity-*     → gebruik bg-black/50 (slash-opacity syntax)
text-opacity-*   → gebruik text-black/50
border-opacity-* → gebruik border-black/50
flex-shrink-*    → gebruik shrink-*
flex-grow-*      → gebruik grow-*
overflow-ellipsis → gebruik text-ellipsis
decoration-slice  → gebruik box-decoration-slice
decoration-clone  → gebruik 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 — voor
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 — na */
@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": "VERWIJDEREN — nu ingebouwd",
  "tailwindcss-animate": "controleer v4-ondersteuning",
  "prettier-plugin-tailwindcss": "update naar laatste versie"
}

css

/* data-attribuut aanpak */
@variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
/* media query — dit is de standaard, dus je hoeft het niet te declareren */
@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);
}
 
/* Brand-overrides */
.theme-acme {
  --brand-primary: #e11d48;
  --brand-light: #fb7185;
  --brand-dark: #9f1239;
}
 
.theme-globex {
  --brand-primary: #059669;
  --brand-light: #34d399;
  --brand-dark: #047857;
}

Metric	v3 (Node)	v4 (Oxide)	Verbetering
Initiële build	4.280ms	387ms	11x
Incrementeel (1 bestand bewerken)	340ms	18ms	19x
Volledige rebuild (schoon)	5.100ms	510ms	10x
Dev server start	3.200ms	290ms	11x

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

Setup	v3 + Webpack	v3 + Turbopack	v4 + Turbopack
Koude start	4,8s	2,1s	1,3s
HMR (CSS-wijziging)	450ms	180ms	40ms

Metric	v3	v4
Piekgeheugen (build)	380MB	45MB
Stabiel (dev)	210MB	28MB

Het Grote Plaatje: Wat v4 Eigenlijk Is

CSS-First Configuratie met @theme

Overschrijven vs. Uitbreiden van het Standaardthema

Meerdere Themabestanden

De Oxide Engine: Het Is Echt 10x Sneller

Waarom Is Het Zoveel Sneller?

Maakt Snelheid Eigenlijk Uit?

Native @layer Integratie

Custom Utilities Toevoegen

Custom Variants

Container Queries: Ingebouwd, Geen Plugin

Basisgebruik

Benoemde Containers

Waarom Dit Ertoe Doet

Nieuwe Variants Die Er Echt Toe Doen

De starting: Variant

De not-* Variant

De nth-* Variants

De in-* Variant (Parent State)

De **: Deep Universal Variant

Breaking Changes: Wat Er Echt Brak

1. Configuratieformaat

2. Verwijderde Verouderde Utilities

3. Wijzigingen in het Standaard Kleurenpalet

4. Contentdetectie

5. Plugin API-wijzigingen

6. JIT Is de Enige Modus

7. Sommige Variant-syntaxwijzigingen

Migratiegids: Het Echte Proces

Stap 1: Draai de Officiële Codemod

Wat de Codemod Goed Afhandelt

Wat de Codemod NIET Afhandelt

Stap 2: Fix PostCSS-configuratie

Stap 3: Converteer Themaconfiguratie

Stap 4: Visuele Regressietests

Stap 5: Update Third-Party Dependencies

Werken met Next.js

PostCSS-aanpak (Aanbevolen voor Next.js)

CSS Import-volgorde

Dark Mode

Turbopack-compatibiliteit

Performance Deep Dive: Voorbij Buildsnelheid

Geheugengebruik

CSS Output-grootte

Tree Shaking van Themawaarden

Geavanceerd: Thema's Samenstellen voor Multi-Brand

Wat Ik Mis van v3

Moet Je Migreren?

Migreer Nu Als:

Wacht Als:

Migreer Niet Als:

Mijn Eerlijke Mening

Gerelateerde artikelen

Regex Cheat Sheet 2026 — Regular Expressions Made Simple

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

De `starting:` Variant

De `not-*` Variant

De `nth-*` Variants

De `in-*` Variant (Parent State)

De `**:` Deep Universal Variant