Better support for styling for print

[sirinath]

Is it possible to add better support for printing, especially styling and also elements to be shown differently in print and on-screen? Some elements like adds you do not need to show on print and can be shown only on the screen while others may only be on the print like TOC.

[zaydek]

In terms of CSS, yes, there is a media query for print:

@media print {
  /* ... */
}

More here: https://benfrain.com/create-print-styles-using-css3-media-queries.

You can actually tell Tailwind this is something you want: https://tailwindcss.com/docs/breakpoints/#styling-for-print.

The example from the docs:

module.exports = {
  theme: {
    extend: {
      screens: {
        'print': {'raw': 'print'},
        // => @media  print { ... }
      }
    }
  }
}

<div class="text-gray-700 print:text-black">
  <!-- ... -->
</div>

Essentially you’re just compiling another screen size you can use as a prefix. Note that this falls under the responsive variant, I think.

[abcdan]

Awesome! Just what I needed!

[sirinath]

Can print be added as a screen size by default in the next release? This will save having to set up and configure basic things.

[sirinath]

I guess this is not a big thing to set up unlike having access to a good cross-section of fonts, but still having a default way would be desirable.

[tlgreg]

An extra screen does make the CDN build a lot larger. As every utility that has the responsive variant gets another ruleset in the css, which is a lot, most utilities are responsive by default.

[rabbitkiller-dev]

I found that it could be set like this

@sirinath

## tailwind.config.js

module.exports = {
  theme: {
    extend: {
      // 要设置 sm md lg等选择器在打印中生效
      screens: {
        'lg': {'raw': 'print, (min-width: 1024px)'},
        // 'lg': {'min': '1024px', 'max': '1279px', 'raw': 'print'}, // error
        // => @media print { ... }
      }
    },
  },
}

[kachkaev]

This works, but disables classes like max-[1000px]:mx-0. TailwindCSS produces this warning:

warn - The `min-*` and `max-*` variants are not supported with a `screens` configuration containing objects.

To overcome this, I created a local PostCSS plugin that simulates a given screen width for print. It works for me, but if you find any bugs, please share the fix.

postcss.config.cjs

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    "./hack-screen-width-for-print.cjs": {},
  },
};

hack-screen-width-for-print.cjs

// @ts-check
// Context: https://github.com/tailwindlabs/tailwindcss/discussions/1425#discussioncomment-8972799

const hackedScreenWidthForPrint = 1024;

/** @type {Array<{ search: RegExp, condition: (value: number) => boolean, replace: (value: number) => string }>} */
const mappings = [
  {
    search: /^not all and \(min-width: (\d+)px\)$/,
    condition: (value) => value >= hackedScreenWidthForPrint,
    replace: (value) => `print, not all and (min-width: ${value}px)`,
  },
  {
    search: /^\(min-width: (\d+)px\)$/,
    condition: (value) => value <= hackedScreenWidthForPrint,
    replace: (value) => `print, (min-width: ${value}px)`,
  },
  {
    search: /^\(max-width: (\d+)px\)$/,
    condition: (value) => value >= hackedScreenWidthForPrint,
    replace: (value) => `print, (max-width: ${value}px)`,
  },
];

/** @return {import("postcss").Plugin} */
function plugin() {
  return {
    postcssPlugin: "postcss-hack-screen-width-for-print",
    Once(root) {
      root.walkAtRules("media", (atRule) => {
        for (const mapping of mappings) {
          const match = atRule.params.match(mapping.search);
          if (!match) {
            continue;
          }

          const value = Number.parseInt(match[1] ?? "");
          if (mapping.condition(value)) {
            // eslint-disable-next-line no-param-reassign
            atRule.params = atRule.params.replace(
              mapping.search,
              mapping.replace(value),
            );

            return;
          }
        }
      });
    },
  };
}

plugin.postcss = true;
module.exports = plugin;

The idea is to make these kinds of CSS replacements on the fly (without TailwindCSS even knowing that):

-@media print, (min-width: 1024px)
+@media (min-width: 1024px)
 .lg\:m-0 {
     margin-0px;
 }

So even though page width during print remains small in px (it renders at 96 pixels per inch), class names like lg:m-0 apply to it. I also added this to my globals.css file and the page looks pretty neat now:

@media print {
  html {
    zoom: 0.75;
  }
}

The text is not too huge and the markup looks like we’re on a desktop rather than on mobile.

[shreshthmohan]

This still works in version 3.1.8

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'print': {'raw': 'print'},
        // => @media print { ... }
      }
    }
  }
}

Use it in markup like so:

<!-- removes top menu bar div from printed document -->
<div id="top-menu-bar" class="print:hidden">
  <a href="/">Home</a>
  <a href="/projects">Projects</a>
  <a href="/blog">Blog</a>
</div>

But I am wondering why it was removed from the v3 docs.

v2 docs for reference: https://v2.tailwindcss.com/docs/breakpoints#styling-for-print

[RobinMalfait]

Because it is now built-in! https://tailwindcss.com/docs/hover-focus-and-other-states#print-styles

[jasperfirecai2]

I'm wondering if there is some way to disable dark mode when printing using this? I want my printed pages to always be in light mode

[AssadAnabosi]

I have the same problem, solved it by adding this media query to my index.css

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
  @media print {
/* Copy pasted my light theme vars to this query */
    :root {
      --inverse: 0 0% 3.9%;
      --inverse-foreground: 0 0% 98%;
      --inverse-border: 0 0% 14.9%;
      --background: 0 0% 100%;
      --foreground: 0 0% 3.9%;
      --card: 0 0% 100%;
      --card-foreground: 0 0% 3.9%;
      --popover: 0 0% 100%;
      --popover-foreground: 0 0% 3.9%;
      --primary: 0 72.2% 50.6%;
      --primary-foreground: 0 85.7% 97.3%;
      --secondary: 0 0% 96.1%;
      --secondary-foreground: 0 0% 9%;
      --muted: 0 0% 96.1%;
      --muted-foreground: 0 0% 45.1%;
      --accent: 0 0% 96.1%;
      --accent-foreground: 0 0% 9%;
      --success: 142.1 70.6% 45.3%;
      --success-foreground: 0 0% 98%;
      --warning: 38 92% 50%;
      --warning-foreground: 48 96% 98%;
      --destructive: 0 84.2% 60.2%;
      --destructive-foreground: 0 0% 98%;
      --border: 0 0% 89.8%;
      --input: 0 0% 89.8%;
      --ring: 0 72.2% 50.6%;
      --radius: 0.5rem;
    }
  }
}

[jasperfirecai2]

that's not really preventing dark theme, just force applying light theme for whatever you copy in there...

[AssadAnabosi]

Yes, it is not ideal but could not find any better way... so thats what i did for now.

[jasperfirecai2]

I ended up using the js media query to toggle the theme in my stateful app. but that doesn't work when using window.print() so i had to make two different handlers...