Disable dark mode when printing

[zisra]

I'm using dark mode with shadcn and Tailwind, but the problem I face is that when printing the page, it displays the page in print. I don't want that. My attempt to address this problem:

(tailwind.config.js)

export const darkMode = null;

// ...

plugin(({ addVariant }) => {
    addVariant('dark', '@media not print { .dark & }');
}),

This produces the following error for me:
[vite-plugin-pwa:build] [postcss] initializer is not a function

How do I fix this?

[wongjn]

Try in tailwind.config.js:

export default {
  darkMode: ['variant', '@media not print { .dark & }'],

This should now compile dark: classes as:

@media not print {
  .dark .dark\:text-white {

https://play.tailwindcss.com/G8sP3XuoZA

[zisra]

Seems like the issue lies with shadcn/ui's implementation of dark mode. I'll check with them because this doesn't fix it