# Print styles with Tailwind

Tailwind's print variant compiles to @media print: hide the chrome, expand tables and set page margins. None of the 97 cached blocks uses it.

> Page: https://ui.eneawork.it/blog/tailwind-print-styles
> Markdown: https://ui.eneawork.it/blog/tailwind-print-styles.md

*2026-11-01*

Gli stili di stampa con Tailwind si scrivono con la variante print:, che compila in una regola @media print: print:hidden toglie la navigazione e print:block apre un pannello chiuso, senza JavaScript.

Nei 97 blocchi shadcn/ui in cache (173 file, 496.045 caratteri) print:* compare 0 volte, mentre sr-only compare 33 volte in 14 blocchi: 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.

## La pagina non ha viewport

La stampa non conosce larghezza di finestra né scorrimento: la carta è larga circa 21 cm e i margini li decide @page. Un layout a tre colonne con lg:grid-cols-3 arriva su carta come tre colonne strette, quindi la variante deve riportarlo a una colonna.

@import "tailwindcss"; @media print { @page { margin: 16mm; } a[href^="http"]::after { content: " (" attr(href) ")"; } .break-avoid { break-inside: avoid; } }

Le regole che non sono utility stanno nel file di ingresso; le utility print:* restano nel markup. La build non cambia, e il comando seguente rigenera il CSS a ogni salvataggio.

npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch

## Cosa togliere e cosa mostrare

Una tabella che scorre in orizzontale perde le colonne nascoste quando finisce su carta: print:overflow-visible e un carattere più piccolo la rendono leggibile. Lo stesso vale per un pannello a fisarmonica, che va aperto con print:block.

## Il limite

La paginazione non è controllabile: break-inside: avoid funziona su blocchi semplici ma i browser lo ignorano quando il blocco supera l'altezza della pagina, e un motore PDF esterno ignora del tutto @media print. Il secondo limite è la verifica: nessun test automatico sostituisce l'anteprima di stampa, perché margini e scala li decide il driver.

## Dove continuare

Nel catalogo EneUI leggi invoices-01, transaction-history-01 e ticket-confirmation-card, tre viste che finiscono spesso su carta. Per i calcoli leggi calc() e CSS variables, per le basi che cos'è Tailwind CSS, per il confronto Tailwind contro CSS modules. Gli altri due pezzi della serie sono tipografia fluida con clamp e focus-visible con Tailwind.

## FAQ

### Come si nasconde un elemento in stampa con Tailwind?

Con print:hidden sulla classe dell'elemento. La build genera una regola dentro @media print che imposta display: none solo su carta.

### Serve un foglio di stile separato?

No. Le utility print:* bastano per la maggior parte dei casi; un foglio separato conviene solo per @page e per i margini fisici.

### Perché gli sfondi non si stampano?

Perché i browser omettono gli sfondi per risparmiare inchiostro. Con print-color-adjust: exact li conservi, ma la stampante può comunque ignorarli.

### Come si stampa l'URL di un link?

Con una regola ::after su a[href^=http] dentro @media print, che aggiunge attr(href) dopo il testo. È CSS puro, non una utility Tailwind.

### Perché la mia pagina stampata è tagliata?

Di solito c'è una larghezza fissa o un contenitore con overflow nascosto. Porti il layout a una colonna con print:block e controlli l'anteprima di stampa.