Sviluppo web
Container queries con Tailwind
Il container query in Tailwind si scrive con @container sul genitore e @sm: o @md: sui figli: lo stile segue lo spazio reale del componente, non la finestra.
In sintesi
- Un container query segue la larghezza del genitore, non della finestra.
- In Tailwind 4 le varianti @sm, @md e @lg sono nel framework, senza plugin.
- Un elemento @container non può dimensionarsi in base al contenuto.
Un container query in Tailwind CSS usa @container sul genitore e @sm: o @md: sui figli: lo stile segue la larghezza del contenitore, non quella della finestra.
Come si scrive
Scheda
Testo che resta leggibile in una colonna stretta.
@container scrive container-type: inline-size sul genitore. La variante @md: vale da 28rem di larghezza del contenitore, cioè 448px, e come i breakpoint è mobile-first: resta attiva sopra quella soglia.
Perché i breakpoint non bastano
Con md: la scheda cambia al breakpoint della finestra, non quando lo spazio reale è troppo stretto. La stessa scheda dentro una griglia a tre colonne o in una sidebar si rompe: il container query guarda il posto che ha.
Contenitori con nome
...
...
Senza nome vince il contenitore antenato più vicino. Con @container/main e @lg/main: miri un contenitore preciso, anche se è più in alto nell'albero: è il caso delle sezioni con barra laterale.
Le soglie predefinite
| Variante | Larghezza minima |
|---|---|
| @sm | 24rem (384px) |
| @md | 28rem (448px) |
| @lg | 32rem (512px) |
| @xl | 36rem (576px) |
| @3xl | 48rem (768px) |
Per una soglia usata una volta sola ci sono @min-[475px]: e @max-[960px]:. Le unità di container funzionano come valori arbitrari: w-[50cqw] occupa metà della larghezza del contenitore.
La limitazione
Un elemento con @container non può più dimensionarsi in base al contenuto: la containment sull'asse inline lo impedisce. Serve una larghezza esplicita, un flex-1 o una griglia che la fissi. E il test responsive resta obbligatorio dentro ogni slot in cui il componente finisce.
Dove continuare
Nel catalogo ci sono i componenti container, la categoria grid e il blocco feature-1 di bag/ui, con card in griglia. Il confronto tra i due sistemi di layout è in flexbox e grid per designer, il confronto tra framework in Tailwind contro Bootstrap; se una variante non viene generata leggi content paths.
Domande frequenti
Che differenza c'è tra container query e media query?
Il container query guarda la larghezza del contenitore più vicino, la media query quella della finestra. Una card dentro una colonna stretta cambia anche su uno schermo largo, perché lo spazio che ha è poco.
Serve un plugin per i container query in Tailwind?
No in Tailwind 4: @container e le varianti @sm e @md sono nel framework. In Tailwind 3 serviva il plugin @tailwindcss/container-queries, che ora non è più necessario.
Da quale larghezza parte la variante @md?
@md parte da 28rem di larghezza del contenitore, cioè 448px. Le soglie predefinite vanno da @3xs a 16rem fino a @7xl a 80rem.
Posso usare un container query per il testo fluido?
Sì, con le unità cqw e cqi. Un valore come w-[50cqw] o un font-size in cqi scala con il contenitore invece che con la finestra, quindi il testo resta proporzionato alla scheda.
I browser meno recenti supportano i container query?
I browser moderni li supportano dal 2023, Safari compreso dalla versione 16. Un browser senza supporto ignora le varianti e mostra lo stile di base, quindi il layout resta leggibile.