Posted on Aug 13 Ever been merrily coding away when suddenly the thought strikes, "What if someone... prints this page?" And the more ominous: "What if it looks like a Picasso painting after a rough night when they do?"For a web app that's more of an interface than a classic document, you probably don't care that much about its Print appearance as it's unlikely someone would print something there. But for a typical document-oriented website with lot's of text and image content, you might wanna have a look at its print preview. Looks terrible, right? How do we fix this without resorting to the hell of custom CSS classes and files? Like this?Well, no! With Tailwind's ever-so-handy print and screen modifiers, your website can look fabulous on screens AND on paper. No more nightmares about confetti-like printouts!Tailwind is the awsome utility-first CSS framework we wish we could use in every client or work project. It's like the Swiss Army knife of styling - just without the tiny, almost useless, scissors. Most utilities are activated right from the get-go. But some? They're like hidden Easter eggs waiting for you to find. Enter: the print and screen modifiers.From the get-go it's not available, but luckily you don't need to install any plugin to get started. Simply open up the tailwind.config.js file and extend the available screens:This way, Tailwind will now auto-generate media queries prefixes that you can use in your classes. You can use them to entirely show or hide elements depending on print or not, or tweak any CSS you want accordingly:Let's go through a few other examples of where you would want to tweak the print styling on your page.When a user prints a webpage, they typically don't need the website's navigation bar, footer, or any site-wide banner elements. These are essentially useful only in a digital context. Therefore, it's a common practice to hide these elements in the print version.Interactive elements, such as buttons, dropdowns, and forms, serve no purpose on a printed page. It's a good idea to hide them to avoid confusing the reader.Hyperlinks are interactive elements that work wonders on screens but are dormant on paper. To provide context, it can be helpful to display the URL next to the link text in the print version so readers can manually access them if needed.For this one we do need to add a custom CSS class to our global CSS, but only one!High-color images might not always print well, especially in grayscale. You might want to enhance the contrast, remove background images, or even swap colored images with their grayscale counterparts to ensure clarity.Considering the distinct nature of screens and printed pages, these tweaks can significantly improve the clarity, relevance, and aesthetics of printed content.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Nevo David - Aug 1 Kafeel Ahmad (kaf shekh) - Jul 22 Sh Raj - Jul 22 Ayoub Alouane - Aug 9 Once suspended, andreasbergstrom will not be able to comment or publish posts until their suspension is removed. Once unsuspended, andreasbergstrom will be able to comment and publish posts again. Once unpublished, all posts by andreasbergstrom will become hidden and only accessible to themselves. If andreasbergstrom is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Andreas Bergström. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag andreasbergstrom: andreasbergstrom consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging andreasbergstrom will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.