# Container queries with Tailwind

Container queries style a component by its parent's width, not the viewport: @container on the parent, @sm or @md on the children.

> Page: https://ui.eneawork.it/blog/tailwind-container-queries
> Markdown: https://ui.eneawork.it/blog/tailwind-container-queries.md

*2026-11-01*

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.

La domanda «Font scaling based on size of container» vale 1865 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.

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

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.

## FAQ

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