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

> Pagina: https://ui.eneawork.it/blog/tailwind-spacing-scale
> Markdown: https://ui.eneawork.it/blog/tailwind-spacing-scale.md

*2026-11-01*

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.

Nei 97 blocchi shadcn/ui in cache (173 file, 496.045 caratteri) gap-* compare 310 volte in 89 blocchi, px-* 80 volte in 29 blocchi, mt-* 3 volte e space-y-* 2 volte: misurate con node il 1 novembre 2026. Il catalogo EneUI conta 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, letti da /api/stats lo stesso giorno. Tailwind CSS è distribuito con licenza MIT: repository tailwindlabs/tailwindcss, file LICENSE.

## 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; }

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

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

## FAQ

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