Tailwind CSS v4 cheat sheet (con ricerca)

Un cheat sheet di Tailwind CSS v4 con ricerca: scrivi una classe o una parola semplice e vedi il CSS esatto che v4 genera, dai multipli di var(--spacing) ai token di colore OKLCH. Copre anche i token @theme, i breakpoint, le container query, box flex e grid dal vivo, la palette di colori completa, la dark mode e le rinomine da v3 a v4.

Aggiornato il 13 ottobre 2026

Questo cheat sheet copre Tailwind CSS v4 (v4.3 è la versione attuale al momento della stesura, ottobre 2026). Per ogni classe mostra il CSS che v4 scrive davvero, e questo conta perché v4 ha cambiato il modo in cui vengono prodotti i valori: la spaziatura è un multiplo di un'unica variabile --spacing, i colori sono variabili --color-* definite in OKLCH, e dimensioni come raggio, ombra e testo arrivano da variabili del tema con un nome. Scrivi nella casella per filtrare. La ricerca funziona sui nomi delle classi, sul CSS che generano e su parole semplici come "center", "gradient" o "sticky".

Cerca tra tutte le utility

Note per leggere la tabella: calc(var(--spacing) * 4) vale 1rem perché il valore predefinito di --spacing è 0.25rem. Cambia quell'unica variabile in @theme e ogni padding, margin, gap, larghezza e altezza che usa la scala numerica cambia di conseguenza. Dove il CSS generato è lungo (gradienti, ring, transizioni), la tabella ne mostra una versione semplificata e lo segnala.

Come v4 trasforma una classe in un valore

In v4 ci sono quattro modi per dare un valore a una utility, e sapere quale stai usando spiega la maggior parte delle sorprese:

• Un numero sulla scala di spaziatura: p-4, w-64, gap-3. Funziona qualsiasi numero intero, e anche i quarti come p-2.5, senza configurazione. Il valore è calc(var(--spacing) * n).
• Un valore del tema con un nome: rounded-lg, shadow-md, text-xl, max-w-md. Ognuno legge una variabile come --radius-lg o --container-md.
• Un valore arbitrario tra parentesi quadre: p-[13px], grid-cols-[200px_1fr], bg-[#4f98fb]. I trattini bassi sostituiscono gli spazi.
• Una variabile CSS tra parentesi tonde: bg-(--brand) è la forma abbreviata di v4 per bg-[var(--brand)]. In v3 scrivevi bg-[--brand].

Le frazioni come w-1/2 diventano calc(1/2 * 100%), e un suffisso di opacità come bg-black/50 diventa un color-mix() con transparent, così funziona con qualsiasi formato di colore.

Token @theme (il sostituto di tailwind.config.js in v4)

In v4 configuri il design system nel CSS. Le variabili dichiarate dentro @theme diventano sia proprietà CSS personalizzate su :root sia la fonte delle classi utility. Il prefisso della variabile decide quali utility alimenta:

@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	Alimenta	Esempio
--color-*	tutte le utility di colore (bg, text, border, fill, ring, colore dell'ombra...)	bg-red-500
--spacing	padding, margin, gap, width, height, inset, translate	px-4
--font-*	famiglia del font	font-sans
--text-*	dimensione del font (più --text-*--line-height facoltativo)	text-xl
--font-weight-*	peso del font	font-bold
--tracking-* / --leading-*	spaziatura delle lettere / interlinea	tracking-wide
--breakpoint-*	varianti responsive	sm:*
--container-*	varianti delle container query e max-w-*	@sm:*, max-w-md
--radius-*	raggio del bordo	rounded-sm
--shadow-*, --inset-shadow-*, --drop-shadow-*	ombre	shadow-md
--blur-*	blur e backdrop blur	blur-md
--ease-* / --animate-*	funzioni di timing / animazioni	ease-out, animate-spin
--perspective-* / --aspect-*	prospettiva 3D / aspect ratio	perspective-near, aspect-video

Per eliminare un intero namespace predefinito, impostalo prima a initial, per esempio --color-*: initial;, poi dichiara solo i tuoi colori. Se hai ancora una configurazione JavaScript, v4 può caricarla con @config "./tailwind.config.js";, ma le opzioni corePlugins, safelist e separator non sono supportate.

Breakpoint

I breakpoint sono mobile first: una classe senza prefisso vale a ogni larghezza, e md:flex vale da 48rem in su. v4 li scrive con la sintassi a intervallo width >= ....

Prefisso	Larghezza minima	CSS	Al di sotto (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:

Combinali per colpire un intervallo: md:max-xl:flex vale solo da 48rem fino a 80rem (escluso). Per un breakpoint singolo usa min-[900px]:grid o max-[600px]:hidden. Aggiungi o modifica i breakpoint con --breakpoint-* in @theme, e tienili tutti in rem così vengono ordinati correttamente.

Container query

Le container query sono integrate in v4 (in v3 serviva un plugin). Segna un genitore con @container, poi dai stile ai figli con @sm:, @md: e così via. Reagiscono alla larghezza del genitore e non a quella della finestra, ed è quello che ti serve per una card che compare sia in una sidebar sia in una colonna principale larga.

<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>

Variante	Larghezza del container	Variante	Larghezza del container
@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)

Ognuna viene compilata in @container (width >= ...). Usa @max-md: per "al di sotto", combina @sm:@max-md: per un intervallo, dai un nome ai container con @container/sidebar e indirizzali con @md/sidebar:, e usa dimensioni arbitrarie come @min-[475px]:. Nota che le dimensioni dei container non hanno gli stessi numeri dei breakpoint: @md è 28rem mentre md: è 48rem.

Riferimento rapido di flex e grid

Scegli un layout qui sotto e guarda i box spostarsi. La stringa di classi si aggiorna mentre fai clic, così puoi copiarla direttamente nel tuo markup.

Gli schemi che userai più spesso:

Obiettivo	Classi
Griglia di card responsive senza breakpoint	grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-6
Sidebar più contenuto	grid md:grid-cols-[16rem_1fr] gap-8
Footer fissato in fondo a una pagina corta	flex min-h-dvh flex-col sul wrapper, flex-1 su main
Testo che si tronca dentro una riga flex	min-w-0 sul figlio flex, truncate sul testo
In colonna su mobile, in riga su desktop	flex flex-col md:flex-row gap-4
Spingere l'ultimo elemento a destra	ms-auto (o ml-auto) su quell'elemento

Palette di colori predefinita (OKLCH), fai clic per copiare

v4 definisce la palette predefinita in OKLCH, che può mostrare colori più saturi sugli schermi a gamut ampio. Ogni campione qui sotto è dipinto con il valore esatto del file del tema di Tailwind; fai clic su uno per copiarne il valore oklch(). Le tonalità vanno da 50 a 950. Le palette segnate con * (mauve, olive, mist e taupe) sono state aggiunte in v4.2.0, quindi mancano nelle versioni v4 precedenti. Nero e bianco sono #000 e #fff.

Usali come bg-sky-500, text-sky-500/80 oppure, nel tuo CSS, var(--color-sky-500). Per controllare se un abbinamento è leggibile, passalo nel verificatore di contrasto dei colori, e per una scala personalizzata nello stesso formato prova il generatore di palette di colori Tailwind.

Dark mode in v4

Per impostazione predefinita dark: segue il sistema operativo tramite @media (prefers-color-scheme: dark). Per guidarlo invece con una classe o un attributo (per un interruttore manuale), sovrascrivi la variante nel tuo CSS con @custom-variant. Non esiste più la chiave di configurazione darkMode.

/* 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>

Con un interruttore manuale, imposta la classe prima che la pagina venga disegnata (un piccolo script inline in <head> che legge la scelta salvata), così i visitatori non vedono un lampo del tema sbagliato. Una terza opzione è fare a meno delle classi dark:: definisci token semantici come --color-surface in @theme e scambiane i valori sotto .dark, così una sola classe come bg-surface funziona in entrambi i temi.

Da v3 a v4: classi rinominate e modificate

Provengono dalla guida ufficiale all'aggiornamento. Le rinomine contano di più perché i vecchi nomi esistono ancora e producono in silenzio un risultato diverso (più piccolo).

v3	v4	Perché
shadow-sm	shadow-xs	La scala è scesa di un gradino così ogni dimensione ha un nome
shadow	shadow-sm	Stesso slittamento
drop-shadow-sm / drop-shadow	drop-shadow-xs / drop-shadow-sm	Stesso slittamento
blur-sm / blur	blur-xs / blur-sm	Stesso slittamento (anche backdrop-blur-*)
rounded-sm	rounded-xs	Stesso slittamento
rounded	rounded-sm	Stesso slittamento
outline-none	outline-hidden	In v4 outline-none ora imposta davvero outline-style: none
ring (3px, blue-500)	ring-3 più un colore	ring da solo ora è 1px in currentColor
outline outline-2	outline-2	Le utility di larghezza ora impostano da sole uno stile solid
bg-opacity-50 (e text-, border-, ring-, divide-, placeholder-opacity)	bg-black/50	Rimosso; usa il modificatore con la barra
flex-shrink-0 / flex-grow	shrink-0 / grow	Alias rimossi
overflow-ellipsis	text-ellipsis	Alias rimosso
decoration-slice / decoration-clone	box-decoration-slice / box-decoration-clone	Alias rimossi
bg-[--brand]	bg-(--brand)	Nuova forma abbreviata per le variabili CSS
!bg-red-500	bg-red-500!	Il punto esclamativo va alla fine (la vecchia forma è deprecata)
first:*:pt-0	*:first:pt-0	Le varianti combinate ora si leggono da sinistra a destra
tw-flex (prefisso)	tw:flex	I prefissi sembrano una variante e vanno per primi

Cambi di comportamento senza rinomina, che sorprendono durante gli aggiornamenti:

• Colore di border e divide: il predefinito ora è currentColor invece di gray-200, quindi un border da solo appare scuro. Aggiungi un colore come border-gray-200.
• Hover sui touch screen: hover: è racchiuso in @media (hover: hover), così un tocco non attiva più stili hover che restano bloccati.
• Pulsanti: Preflight ora dà ai pulsanti cursor: default come fa il browser. Aggiungi cursor-pointer se vuoi la manina.
• space-x / space-y e divide: il selettore è diventato > :not(:last-child) e il margine si è spostato sul lato finale. Se la spaziatura sembra sbagliata, passa a flex o grid con gap.
• container: le opzioni center e padding non esistono più; estendilo con @utility container { margin-inline: auto; padding-inline: 2rem; }.
• Gradienti: v4 chiama i gradienti lineari bg-linear-to-r e aggiunge bg-radial e bg-conic.
• Browser: v4 supporta Safari 16.4+, Chrome 111+ e Firefox 128+. Se devi supportare browser più vecchi, la guida all'aggiornamento dice di restare su v3.4.

Lo strumento ufficiale npx @tailwindcss/upgrade gestisce automaticamente la maggior parte delle rinomine. Eseguilo su un branch pulito e controlla il diff, perché non può sapere quali classi shadow volevi mantenere identiche nell'aspetto.

Stampare questo cheat sheet

Questa pagina ha stili di stampa: le caselle di ricerca e i pulsanti sono nascosti, le tabelle passano a un font più piccolo e la griglia dei colori tiene uniti i campioni. Nella maggior parte dei browser, attiva "Grafica di sfondo" nella finestra di stampa, altrimenti i campioni vengono stampati vuoti. Se prima hai filtrato la tabella, vengono stampate solo le righe visibili, un modo rapido per ottenere un foglio di una pagina con le sole utility che usi.

La stessa variante print: funziona nei tuoi progetti: print:hidden sulla navigazione, print:text-black sul testo chiaro e print:break-inside-avoid sulle card mantengono leggibili le pagine stampate.

Correlati

• Stati dei pulsanti CSS: hover, focus-visible, active e disabled, in CSS puro e Tailwind.
• Combinazioni di colori per siti web per scegliere una palette prima di trasformarla in token.
• Generatore di CSS grid e la galleria di componenti con sezioni Tailwind da copiare.

Domande frequenti

Dov'è tailwind.config.js in Tailwind v4?

v4 si configura nel CSS. Importi Tailwind con @import "tailwindcss" e dichiari i design token dentro un blocco @theme, come --color-brand-500 o --breakpoint-3xl. Una configurazione JavaScript si può ancora caricare con la direttiva @config, ma le opzioni corePlugins, safelist e separator non sono supportate.

Quali sono i breakpoint predefiniti di Tailwind v4?

sm è 40rem (640px), md è 48rem (768px), lg è 64rem (1024px), xl è 80rem (1280px) e 2xl è 96rem (1536px). Sono mobile first, quindi md:flex vale da 48rem in su. Usa max-md: per gli stili sotto un breakpoint e combinali, come md:max-xl:, per un intervallo.

Perché le mie ombre e i miei angoli arrotondati sembrano più piccoli dopo il passaggio a v4?

Le scale di ombra, raggio e blur sono scese di un gradino. shadow-sm di v3 è shadow-xs in v4, shadow di v3 è shadow-sm in v4, rounded-sm di v3 è rounded-xs in v4 e rounded di v3 è rounded-sm in v4. I vecchi nomi vengono ancora compilati, quindi non compare nessun errore; producono semplicemente la dimensione inferiore.

Come faccio a usare una classe invece dell'impostazione di sistema per la dark mode in v4?

Aggiungi @custom-variant dark (&:where(.dark, .dark *)); al tuo CSS. Le utility dark: si applicano allora ogni volta che un antenato ha la classe dark. Se preferisci un attributo data, usa invece [data-theme=dark] nel selettore.

Tailwind v4 ha bisogno di un plugin per le container query?

No. Le container query sono integrate. Metti @container sul genitore e usa varianti come @sm:, @md: e @max-md: sui suoi figli. Le dimensioni dei container partono da @3xs (16rem) e sono diverse dai breakpoint della pagina, per esempio @md è 28rem.

In cosa viene compilato p-4 in Tailwind v4?

padding: calc(var(--spacing) * 4). Con il valore predefinito di --spacing, 0.25rem, fa 1rem (16px con la dimensione del font predefinita). Qualsiasi numero intero funziona sulla scala di spaziatura senza configurazione, e cambiando --spacing si riscalano tutti insieme.

Display

Elementi

Direzione

A capo

Asse principale

Colonne

Asse trasversale

Gap

Copiato

Copia le classi

Stampa questo cheat sheet

Inizia gratis · Nessuna carta di credito richiesta

Correlati: Guide

• Colori Tailwind CSS
• Tailwind vs Bootstrap
• Esempi di pagine del team
• Termini di servizio vs privacy policy
• Esempi di pagine di ringraziamento
• TOML vs YAML
• Troppi reindirizzamenti
• Classi TypeScript

Prodotto

• Creatore di siti web con IA
• Il builder IA da $2M installato nella tua azienda
• Enterprise
• Documentazione API

Per chi è

• Per le agenzie
• Per i freelance
• Per i provider di hosting
• Per le piattaforme SaaS
• Per le startup
• Servizi finanziari
• Soluzioni per la sanità

Funzionalità

• Editor con trascinamento
• SEO e analisi
• Branding personalizzato
• Dashboard cliente
• Fatturazione rivenditori

Risorse

• Blog
• Centro assistenza
• Strumenti gratuiti per le aziende
• Free UI Components
• Template
• Raccolte di template
• Esempi di siti
• Guide
• Confronti
• Alternative
• I migliori
• Recensioni
• Guide ai prezzi
• Glossario e guide
• Integrazioni
• Sviluppatori
• Benchmark
• Windows App

Azienda

• Chi siamo
• Prezzi
• Candidati al programma partner
• Contatti
• Lavora con noi
• Sicurezza
• Informativa sulla privacy
• Termini di servizio

Mappa del sito