# Valori arbitrari: quando usarli

I valori arbitrari sono le classi tra parentesi quadre come w-[117px]. Risolvono un caso isolato, scavalcano i token del tema e vanno scritti per intero.

> Pagina: https://ui.eneawork.it/blog/tailwind-arbitrary-values
> Markdown: https://ui.eneawork.it/blog/tailwind-arbitrary-values.md

*2026-11-01*

I valori arbitrari in Tailwind CSS sono le classi tra parentesi quadre, come w-[117px]: risolvono un caso isolato, non sostituiscono un token del tema.

La domanda «How to access all the direct children of a div in Tailwind CSS?» vale 180 voti su Stack Overflow, letta il 31 ottobre 2026 con la Stack Exchange API e registrata in docs/keyword-data.json. Il catalogo EneUI misura 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, misurati e letti da /api/stats il 1 novembre 2026. Tailwind CSS è distribuito con licenza MIT: repository tailwindlabs/tailwindcss, file LICENSE.

## Tre forme, tre scopi

Il valore vive nella classe, quindi eredita varianti e stati: hover:top-[117px] e lg:top-[344px] funzionano. La proprietà arbitraria entra in gioco quando Tailwind non ha una utility per quella regola.

## Spazi e variabili

Lo spazio dentro le parentesi si scrive con _: grid-cols-[1fr_500px_2fr]. Un underscore reale va protetto con la barra rovesciata.

Testo

La sintassi con parentesi tonde è la scorciatoia per var() introdotta in Tailwind 4: bg-(--brand) vale bg-[var(--brand)]. Il prefisso length: o color: toglie l'ambiguità quando la variabile può essere due cose.

## Il costo

Ogni valore arbitrario esce dalla scala: non compare nel tema, non si aggiorna con un token e non è verificabile da un revisore. Dieci text-[13px] sparsi sono dieci decisioni diverse, e nessuna si trova cercando una variabile.

## La limitazione

La classe deve comparire per intero nel sorgente: w-[${width}px] non genera nulla, perché la build legge il testo e non esegue il codice. Le stringhe composte a runtime vanno evitate o elencate con @source inline(); in 4 safelist non esiste più.

## Dove continuare

Nel catalogo: i componenti container, le tabelle e il blocco pricing-01 di shadcn/ui blocks. Il framework è in che cos'è Tailwind CSS, i calcoli in calc() e variabili CSS; il confronto tra approcci è Tailwind contro CSS Modules.

## FAQ

### Quando conviene un valore arbitrario?

Per un caso isolato che non diventerà una regola, come una posizione o una correzione di un pixel. Se il valore si ripete tre volte, va nel tema come token.

### I valori arbitrari rallentano la build?

No in modo misurabile: la build genera una classe per ogni forma unica. Il costo è la manutenzione del markup, non la compilazione.

### Come si scrive uno spazio dentro le parentesi quadre?

Con un underscore, come in grid-cols-[1fr_500px_2fr]. Tailwind lo converte in spazio; un underscore letterale si scrive con la barra rovesciata davanti.

### Che differenza c'è tra bg-[--brand] e bg-(--brand)?

bg-(--brand) è la sintassi di Tailwind 4 e aggiunge var() da sola. La forma con le quadre resta per i valori fissi, non per le variabili.

### Perché una classe arbitraria non viene generata?

Perché la build legge il testo del sorgente e non esegue il codice. Una classe composta a runtime non esiste nel file, quindi Tailwind non la vede.