Sviluppo web
Stili di stampa con Tailwind
La variante print di Tailwind genera @media print: nascondi la navigazione, apri le tabelle e imposta i margini. Nessuno dei 97 blocchi in cache la usa.
In sintesi
- print: compila in @media print e non richiede JavaScript.
- Nascondi navigazione e call to action, non il contenuto che serve su carta.
- Le larghezze fisse e le posizioni fixed vanno riviste: la pagina stampata non ha viewport.
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.
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 --watchCosa togliere e cosa mostrare
| Elemento | Variante | Perché |
|---|---|---|
| Navigazione e menu laterale | print:hidden | Su carta non servono |
| Tabella con scroll orizzontale | print:overflow-visible | La carta non scorre |
| Link esterni | ::after con attr(href) | Chi legge non può cliccare |
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.
- Gli sfondi non vengono stampati per default: per conservarli serve
print-color-adjust: exact, e il risultato dipende dal driver. - Un elemento
position: fixedsi ripete o sparisce a ogni pagina, perché la stampa non ha viewport. - Nascondere il contenuto sbagliato è peggio del non stampare: la pagina deve restare leggibile senza menu e bottoni.
- Fonte: documentazione tailwindcss.com e specifica CSS Paged Media, lette il 1 novembre 2026; licenza MIT.
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.
Domande frequenti
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.