Sviluppo web
La scala di spaziatura di Tailwind
Tailwind ricava ogni spaziatura da una variabile --spacing: 0.25rem. Ecco come funziona la scala, perché 4 vale 1rem e quando un valore arbitrario rompe il ritmo.
In sintesi
- Ogni utility di spaziatura moltiplica la variabile --spacing, che vale 0.25rem.
- gap-* è la scelta per lo spazio tra elementi; space-y-* aggiunge margini ai figli.
- I valori arbitrari come p-[13px] escono dalla scala e rompono l'allineamento tra sezioni.
La scala di spaziatura di Tailwind nasce da una sola variabile, --spacing: 0.25rem: ogni utility come p-4 o gap-6 moltiplica quel valore per il numero nel nome.
Come nasce il numero
Il quarto di rem è la base: p-1 vale 0.25rem, p-4 1rem, p-6 1.5rem. Nel CSS generato non ci sono pixel, quindi la spaziatura segue la dimensione del carattere radice e lo zoom dell'utente.
@import "tailwindcss";
@theme {
--spacing: 0.25rem;
}| Classe | Calcolo | Valore con radice 16 px |
|---|---|---|
| p-1 | 1 × 0.25rem | 4 px |
| p-4 | 4 × 0.25rem | 16 px |
| p-6 | 6 × 0.25rem | 24 px |
| gap-8 | 8 × 0.25rem | 32 px |
La tabella vale con la radice a 16 px. Se l'utente ingrandisce il testo la spaziatura cresce con lui, perché il calcolo resta in rem: è il motivo per cui la scala regge lo zoom meglio di una serie di pixel scritti a mano.
gap prima di space-y
Per lo spazio tra elementi fratelli la classe giusta è gap-* su un contenitore flex o grid: è una proprietà del contenitore, non dei figli. space-y-* aggiunge margini ai figli e li somma al margine già presente; nei blocchi misurati compare 2 volte contro 310 di gap-*.
- Una scala sola rende confrontabili due sezioni scritte da persone diverse.
- I passi intermedi esistono, come
p-5, ma la sequenza 2, 4, 6, 8 copre quasi tutti i casi. - I margini negativi come
-mt-4usano la stessa scala, quindi non introducono pixel fuori griglia. - Fonte: documentazione tailwindcss.com e licenza MIT del repository, lette il 1 novembre 2026.
Quando la scala non basta
Un valore arbitrario come p-[13px] compila, ma esce dal sistema: non si adatta allo zoom come i rem e non è più confrontabile con le altre sezioni. Il limite è questo: la scala descrive il ritmo del layout, non la tipografia né le proporzioni interne di un componente, che vanno in token propri.
Dove continuare
Nel catalogo EneUI leggi form-layout-01, bento-grids-06 e bento-grid, tre layout dove la spaziatura fa il lavoro. Per i token leggi creare un design system dai token, per il layout flexbox e grid per designer, per il confronto Tailwind contro CSS modules. Gli altri due pezzi della serie sono tipografia fluida con clamp e animazioni senza JavaScript.
Domande frequenti
Quanto vale p-4 in pixel?
Vale 1rem, cioè 16 px con la radice a 16 px. Il valore resta in rem nel CSS, quindi cresce se l'utente ingrandisce il testo.
Posso cambiare la scala di spaziatura?
Sì. La variabile --spacing nel blocco @theme riscala tutte le utility: con 0.3rem, p-4 diventa 1.2rem. Conviene farlo prima di scrivere le pagine, non dopo.
Meglio gap-* o space-y-*?
Meglio gap-* quando il contenitore è flex o grid, perché lo spazio appartiene al contenitore. space-y-* resta comodo in flussi verticali semplici con margini già controllati.
Tailwind include i mezzi passi come p-0.5?
Sì. La scala accetta decimali come 0.5 e 1.5, che valgono 0.125rem e 0.375rem. Sono utili per icone e badge, meno per le sezioni.
Perché evitare i valori arbitrari?
Perché escono dalla scala e rompono il confronto tra sezioni. Restano legittimi per un caso isolato, per esempio un'altezza misurata da un'immagine.