In printed view does not apply responsive styles

Question

When the user visits the page with a device with screen size larger than lg. They won't see the text hello. However, if the user tries to print the page, the print still includes the text Hello. The issue is caused when we use the responsive style prefixes like lg:.

<p class="lg:hidden">
  Hello
</p>

Answer 1

You could consider using the print variant to apply CSS specifically for printing:

Use the print modifier to conditionally add styles that only apply when the document is being printed:

<div>
  <article class="print:hidden">
    <h1>My Secret Pizza Recipe</h1>
    <p>This recipe is a secret, and must not be shared with anyone</p>
    <!-- ... -->
  </article>
  <div class="hidden print:block">
    Are you seriously trying to print this? It's secret!
  </div>
</div>

Alternative Solution

You could also modify the lg: variant to include the print media query using raw, like:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: { raw: '(min-width: 1024px), print' },
      xl: '1280px',
      '2xl': '1536px',

Though do be aware that this will mean max-* and min-* variants no longer work.