Tailwind CSS v4 cheat sheet (doorzoekbaar)

Een doorzoekbare Tailwind CSS v4 cheat sheet: typ een class of een gewoon woord en zie de exacte CSS die v4 genereert, van veelvouden van var(--spacing) tot OKLCH-kleurtokens. Ook behandeld: @theme-tokens, breakpoints, container queries, live flex- en gridvakken, het volledige kleurenpalet, dark mode en de hernoemingen van v3 naar v4.

Bijgewerkt op 13 oktober 2026

Dit overzicht behandelt Tailwind CSS v4 (v4.3 is de actuele versie op het moment van schrijven, oktober 2026). Voor elke class ziet u de CSS die v4 werkelijk schrijft. Dat is belangrijk, want v4 heeft veranderd hoe waarden tot stand komen: spacing is een veelvoud van één --spacing-variabele, kleuren zijn --color-*-variabelen in OKLCH, en maten zoals radius, schaduw en tekst komen uit benoemde themavariabelen. Typ in het vak om te filteren. U kunt zoeken op classnamen, op de CSS die ze opleveren en op gewone woorden zoals "center", "gradient" of "sticky".

Doorzoek alle utilities

Zo leest u de tabel: calc(var(--spacing) * 4) is 1rem, omdat de standaardwaarde van --spacing 0.25rem is. Wijzig die ene variabele in @theme en elke padding, margin, gap, breedte en hoogte die de getallenschaal gebruikt, verandert mee. Waar de gegenereerde CSS lang is (gradients, rings, transities), toont de tabel een vereenvoudigde versie en staat dat erbij.

Hoe v4 een class omzet in een waarde

Er zijn in v4 vier manieren om een utility een waarde te geven, en wie weet welke hij gebruikt, begrijpt de meeste verrassingen:

• Een getal op de spacingschaal: p-4, w-64, gap-3. Elk heel getal werkt, en kwartstappen zoals p-2.5 ook, zonder configuratie. De waarde is calc(var(--spacing) * n).
• Een benoemde themawaarde: rounded-lg, shadow-md, text-xl, max-w-md. Elk leest een variabele zoals --radius-lg of --container-md.
• Een willekeurige waarde tussen vierkante haken: p-[13px], grid-cols-[200px_1fr], bg-[#4f98fb]. Underscores staan voor spaties.
• Een CSS-variabele tussen ronde haken: bg-(--brand) is de v4-verkorting van bg-[var(--brand)]. In v3 schreef u bg-[--brand].

Breuken zoals w-1/2 worden calc(1/2 * 100%), en een opacity-achtervoegsel zoals bg-black/50 wordt een color-mix() met transparent, zodat het met elk kleurformaat werkt.

@theme-tokens (de v4-vervanger van tailwind.config.js)

In v4 configureert u het designsysteem in CSS. Variabelen die u binnen @theme declareert, worden zowel CSS custom properties op :root als de bron voor utility-classes. Het voorvoegsel van de variabele bepaalt welke utilities ermee gevoed worden:

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", sans-serif;   /* font-display */
  --color-brand-500: oklch(65% 0.17 255);  /* bg-brand-500, text-brand-500 ... */
  --breakpoint-3xl: 120rem;                /* 3xl: variant */
  --spacing: 0.25rem;                      /* p-4 = 1rem */
  --radius-card: 0.875rem;                 /* rounded-card */
}

Namespace	Voedt	Voorbeeld
--color-*	elke kleur-utility (bg, text, border, fill, ring, schaduwkleur...)	bg-red-500
--spacing	padding, margin, gap, breedte, hoogte, inset, translate	px-4
--font-*	lettertypefamilie	font-sans
--text-*	lettergrootte (plus optioneel --text-*--line-height)	text-xl
--font-weight-*	lettergewicht	font-bold
--tracking-* / --leading-*	letterafstand / regelhoogte	tracking-wide
--breakpoint-*	responsive varianten	sm:*
--container-*	container query-varianten en max-w-*	@sm:*, max-w-md
--radius-*	hoekradius	rounded-sm
--shadow-*, --inset-shadow-*, --drop-shadow-*	schaduwen	shadow-md
--blur-*	blur en backdrop blur	blur-md
--ease-* / --animate-*	timingfuncties / animaties	ease-out, animate-spin
--perspective-* / --aspect-*	3D-perspectief / beeldverhouding	perspective-near, aspect-video

Wilt u een hele standaard-namespace laten vallen, zet die dan eerst op initial, bijvoorbeeld --color-*: initial;, en declareer daarna alleen uw eigen kleuren. Hebt u nog een JavaScript-config, dan kan v4 die laden met @config "./tailwind.config.js";, maar de opties corePlugins, safelist en separator worden niet ondersteund.

Breakpoints

Breakpoints zijn mobile first: een class zonder voorvoegsel geldt op elke breedte, en md:flex geldt vanaf 48rem. v4 schrijft ze met de bereiksyntaxis width >= ....

Voorvoegsel	Minimale breedte	CSS	Eronder (max-*)
sm:	40rem (640px)	@media (width >= 40rem)	max-sm: = @media (width < 40rem)
md:	48rem (768px)	@media (width >= 48rem)	max-md:
lg:	64rem (1024px)	@media (width >= 64rem)	max-lg:
xl:	80rem (1280px)	@media (width >= 80rem)	max-xl:
2xl:	96rem (1536px)	@media (width >= 96rem)	max-2xl:

Combineer ze om een bereik te raken: md:max-xl:flex geldt alleen vanaf 48rem tot (niet tot en met) 80rem. Voor een eenmalig breakpoint gebruikt u min-[900px]:grid of max-[600px]:hidden. Voeg breakpoints toe of wijzig ze met --breakpoint-* in @theme, en houd ze allemaal in rem, zodat ze juist gesorteerd worden.

Container queries

Container queries zitten in v4 ingebouwd (in v3 was er een plugin voor nodig). Markeer een ouderelement met @container en style de kinderen dan met @sm:, @md: enzovoort. Ze reageren op de breedte van de ouder in plaats van het venster, en dat wilt u voor een kaart die zowel in een zijbalk als in een brede hoofdkolom staat.

<div class="@container">
  <article class="flex flex-col @md:flex-row gap-4">
    <img class="w-full @md:w-48 rounded-lg" src="..." alt="">
    <div>...</div>
  </article>
</div>

Variant	Containerbreedte	Variant	Containerbreedte
@3xs	16rem (256px)	@2xl	42rem (672px)
@2xs	18rem (288px)	@3xl	48rem (768px)
@xs	20rem (320px)	@4xl	56rem (896px)
@sm	24rem (384px)	@5xl	64rem (1024px)
@md	28rem (448px)	@6xl	72rem (1152px)
@lg	32rem (512px)	@7xl	80rem (1280px)
@xl	36rem (576px)

Elk ervan compileert naar @container (width >= ...). Gebruik @max-md: voor "eronder", combineer @sm:@max-md: voor een bereik, geef containers een naam met @container/sidebar en richt u erop met @md/sidebar:, en gebruik willekeurige maten zoals @min-[475px]:. Let op: de containermaten zijn niet dezelfde getallen als de breakpoints: @md is 28rem, terwijl md: 48rem is.

Snel naslagwerk voor flex en grid

Kies hieronder een layout en zie de vakken verschuiven. De classreeks wordt bijgewerkt terwijl u klikt, zodat u hem direct in uw markup kunt kopiëren.

De patronen die u het vaakst nodig hebt:

Doel	Classes
Responsief kaartenraster zonder breakpoints	grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-6
Zijbalk plus inhoud	grid md:grid-cols-[16rem_1fr] gap-8
Footer vast onderaan een korte pagina	flex min-h-dvh flex-col op de wrapper, flex-1 op main
Tekst die wordt afgekapt binnen een flexrij	min-w-0 op het flexkind, truncate op de tekst
Gestapeld op mobiel, naast elkaar op desktop	flex flex-col md:flex-row gap-4
Het laatste element naar rechts duwen	ms-auto (of ml-auto) op dat element

Standaard kleurenpalet (OKLCH), klik om te kopiëren

v4 definieert het standaardpalet in OKLCH, waarmee op wide-gamut-schermen verzadigdere kleuren zichtbaar zijn. Elk staaltje hieronder is geschilderd met de exacte waarde uit het eigen themabestand van Tailwind; klik erop om de oklch()-waarde te kopiëren. De tinten lopen van 50 tot 950. Paletten met een * (mauve, olive, mist en taupe) zijn toegevoegd in v4.2.0 en ontbreken dus in eerdere v4-versies. Zwart en wit zijn #000 en #fff.

Gebruik ze als bg-sky-500, text-sky-500/80 of, in uw eigen CSS, var(--color-sky-500). Wilt u weten of een combinatie leesbaar is, haal hem dan door de kleurcontrastchecker, en voor een eigen schaal in hetzelfde formaat probeert u de Tailwind-kleurenpaletgenerator.

Dark mode in v4

Standaard volgt dark: het besturingssysteem via @media (prefers-color-scheme: dark). Wilt u het in plaats daarvan via een class of attribuut aansturen (voor een handmatige schakelaar), overschrijf de variant dan in uw CSS met @custom-variant. Er is geen darkMode-configsleutel meer.

/* Class strategy: <html class="dark"> */
@custom-variant dark (&:where(.dark, .dark *));

/* Or a data attribute: <html data-theme="dark"> */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

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

Bij een handmatige schakelaar zet u de class voordat de pagina wordt getekend (een klein inline script in <head> dat de opgeslagen keuze leest), zodat bezoekers geen flits van het verkeerde thema zien. Een derde optie is dark:-classes helemaal over te slaan: definieer semantische tokens zoals --color-surface in @theme en wissel hun waarden onder .dark, zodat één class als bg-surface in beide thema's werkt.

Van v3 naar v4: hernoemde en gewijzigde classes

Deze komen uit de officiële upgradegids. De hernoemingen zijn het belangrijkst, omdat de oude namen nog bestaan en stilletjes een ander (kleiner) resultaat geven.

v3	v4	Waarom
shadow-sm	shadow-xs	Schaal één stap omlaag geschoven, zodat elke maat een naam heeft
shadow	shadow-sm	Dezelfde verschuiving
drop-shadow-sm / drop-shadow	drop-shadow-xs / drop-shadow-sm	Dezelfde verschuiving
blur-sm / blur	blur-xs / blur-sm	Dezelfde verschuiving (ook backdrop-blur-*)
rounded-sm	rounded-xs	Dezelfde verschuiving
rounded	rounded-sm	Dezelfde verschuiving
outline-none	outline-hidden	v4 outline-none zet nu echt outline-style: none
ring (3px, blue-500)	ring-3 plus een kleur	Kale ring is nu 1px in currentColor
outline outline-2	outline-2	Breedte-utilities zetten nu zelf een solid stijl
bg-opacity-50 (en text-, border-, ring-, divide-, placeholder-opacity)	bg-black/50	Verwijderd; gebruik de slash-modifier
flex-shrink-0 / flex-grow	shrink-0 / grow	Verwijderde aliassen
overflow-ellipsis	text-ellipsis	Verwijderde alias
decoration-slice / decoration-clone	box-decoration-slice / box-decoration-clone	Verwijderde aliassen
bg-[--brand]	bg-(--brand)	Nieuwe verkorting voor CSS-variabelen
!bg-red-500	bg-red-500!	Important komt aan het eind (oude vorm verouderd)
first:*:pt-0	*:first:pt-0	Gestapelde varianten lezen nu van links naar rechts
tw-flex (voorvoegsel)	tw:flex	Voorvoegsels zien eruit als een variant en komen vooraan

Gedragswijzigingen zonder hernoeming, waar mensen bij upgrades over struikelen:

• Rand- en divide-kleur: de standaard is nu currentColor in plaats van gray-200, dus een kale border ziet er donker uit. Voeg een kleur toe, zoals border-gray-200.
• Hover op touchscreens: hover: zit binnen @media (hover: hover), zodat een tik geen blijvende hoverstijlen meer activeert.
• Knoppen: Preflight geeft knoppen nu cursor: default, net als de browser. Voeg cursor-pointer toe als u het handje wilt.
• space-x / space-y en divide: de selector is veranderd in > :not(:last-child) en de margin is naar de eindzijde verhuisd. Ziet de spacing er vreemd uit, stap dan over op flex of grid met gap.
• container: de opties center en padding zijn verdwenen; breid hem uit met @utility container { margin-inline: auto; padding-inline: 2rem; }.
• Gradients: v4 noemt lineaire gradients bg-linear-to-r en voegt bg-radial en bg-conic toe.
• Browsers: v4 richt zich op Safari 16.4+, Chrome 111+ en Firefox 128+. Moet u oudere browsers ondersteunen, dan raadt de upgradegids aan op v3.4 te blijven.

De officiële tool npx @tailwindcss/upgrade regelt de meeste hernoemingen automatisch. Draai hem op een schone branch en bekijk de diff, want de tool kan niet weten welke shadow-classes er volgens u hetzelfde uit moesten blijven zien.

Dit overzicht afdrukken

Deze pagina heeft printstijlen: de zoekvakken en knoppen worden verborgen, de tabellen krijgen een kleiner lettertype en het kleurenraster houdt de staaltjes bij elkaar. Zet in de meeste browsers "Achtergrondafbeeldingen" aan in het printvenster, anders worden de staaltjes blanco afgedrukt. Hebt u de tabel eerst gefilterd, dan worden alleen de zichtbare rijen afgedrukt. Zo maakt u snel een overzicht van één pagina met alleen de utilities die u gebruikt.

Dezelfde print:-variant werkt in uw eigen projecten: print:hidden op de navigatie, print:text-black op lichte tekst en print:break-inside-avoid op kaarten houden afgedrukte pagina's leesbaar.

Gerelateerd

• CSS-knopstatussen: hover, focus-visible, active en disabled, in gewone CSS en in Tailwind.
• Kleurenschema's voor websites om een palet te kiezen voordat u het naar tokens vertaalt.
• CSS-gridgenerator en de componentengalerij met Tailwind-secties die u kunt kopiëren.

Veelgestelde vragen

Waar is tailwind.config.js in Tailwind v4?

v4 wordt in CSS geconfigureerd. U importeert Tailwind met @import "tailwindcss" en declareert designtokens in een @theme-blok, zoals --color-brand-500 of --breakpoint-3xl. Een JavaScript-config kan nog steeds worden geladen met de @config-directive, maar de opties corePlugins, safelist en separator worden niet ondersteund.

Wat zijn de standaard breakpoints in Tailwind v4?

sm is 40rem (640px), md is 48rem (768px), lg is 64rem (1024px), xl is 80rem (1280px) en 2xl is 96rem (1536px). Ze zijn mobile first, dus md:flex geldt vanaf 48rem en breder. Gebruik max-md: voor stijlen onder een breakpoint en combineer ze, zoals md:max-xl:, voor een bereik.

Waarom zien mijn schaduwen en afgeronde hoeken er kleiner uit na de upgrade naar v4?

De schalen voor shadow, radius en blur zijn één stap omlaag geschoven. v3 shadow-sm is v4 shadow-xs, v3 shadow is v4 shadow-sm, v3 rounded-sm is v4 rounded-xs en v3 rounded is v4 rounded-sm. De oude namen compileren nog, dus er komt geen foutmelding; ze leveren gewoon de eerstvolgende kleinere maat op.

Hoe laat ik dark mode in v4 een class gebruiken in plaats van de systeeminstelling?

Voeg @custom-variant dark (&:where(.dark, .dark *)); toe aan uw CSS. dark:-utilities gelden dan zodra een voorouderelement de class dark heeft. Gebruik in plaats daarvan [data-theme=dark] in de selector als u liever een data-attribuut hebt.

Heeft Tailwind v4 een plugin nodig voor container queries?

Nee. Container queries zijn ingebouwd. Zet @container op het ouderelement en gebruik varianten zoals @sm:, @md: en @max-md: op de kinderen. De containermaten beginnen bij @3xs (16rem) en verschillen van de breakpoints van de pagina, zo is @md 28rem.

Waarnaar compileert p-4 in Tailwind v4?

padding: calc(var(--spacing) * 4). Met de standaard --spacing van 0.25rem is dat 1rem (16px bij de standaard lettergrootte). Elk heel getal op de spacingschaal werkt zonder configuratie, en als u --spacing wijzigt, schalen ze allemaal tegelijk mee.

Display

Items

Richting

Omloop

Hoofdas

Kolommen

Dwarsas

Gap

Gekopieerd

Classes kopiëren

Dit overzicht afdrukken

Gratis beginnen · Geen creditcard nodig

Gerelateerd: Gidsen

• Tailwind CSS-kleuren
• Tailwind vs Bootstrap
• Voorbeelden van teampagina's
• Algemene voorwaarden vs privacyverklaring
• Voorbeelden van bedankpagina's
• TOML vs YAML
• Te veel redirects
• TypeScript-classes

Product

• AI-websitebouwer
• Wij installeren onze $2M AI-websitebouwer in je bedrijf
• Enterprise
• API-documentatie

Voor wie

• Voor bureaus
• Voor freelancers
• Voor hostingproviders
• Voor SaaS-platforms
• Voor startups
• Financiële diensten
• Zorgoplossingen

Functies

• Editor voor slepen en neerzetten
• SEO en analyses
• Eigen branding
• Klantdashboard
• Reseller-facturatie

Bronnen

• Blog
• Helpcentrum
• Gratis bedrijfstools
• Free UI Components
• Sjablonen
• Sjablooncollecties
• Websitevoorbeelden
• Gidsen
• Vergelijkingen
• Alternatieven
• De beste
• Reviews
• Prijsgidsen
• Woordenlijst en handleidingen
• Integraties
• Ontwikkelaars
• Benchmark
• Windows App

Bedrijf

• Over ons
• Prijzen
• Aanmelden voor het partnerprogramma
• Contact
• Vacatures
• Beveiliging
• Privacybeleid
• Servicevoorwaarden

Sitemap