Sviluppo web
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.
In sintesi
- Le parentesi quadre coprono valori, proprietà e varianti.
- Uno spazio dentro le parentesi si scrive con un underscore.
- La classe deve comparire per intero nel sorgente, altrimenti non viene generata.
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.
Tre forme, tre scopi
| Forma | Esempio | CSS generato |
|---|---|---|
| Valore arbitrario | top-[117px] | top: 117px |
| Proprietà arbitraria | [mask-type:luminance] | mask-type: luminance |
| Variante arbitraria | [&>*]:p-2 | > * { padding: 0.5rem } |
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.
Domande frequenti
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.