Tailwind doesn't expose print: and screen: modifiers by default, but extending theme.screens in tailwind.config.js with print: { raw: 'print' } and screen: { raw: 'screen' } opens them up — no plugin needed. Then print:hidden on the navbar, print:text-xl for paper-friendly typography, and print:block toggles for swapping to a grayscale image just work.
The full post covers the config tweak, the handful of classes that matter most for print (hide chrome, swap images, surface link URLs via a tiny CSS rule), and why it's worth caring at all for document-oriented sites.
Originally published at andreasbergstrom.dev — read the full post there.
Top comments (2)
This breaks selectors such as "max-lg", "max-sm" and so on.
Yes Same Problem I am facing to