Allow print variant to work in conjunction with print "screen"

[DesignByOnyx]

I started working on adding print styles and it went smooth as could be. Everything works as expected with the browser print behavior.

// tailwind.config.js
export default {
	theme: {
		extend: {
			screens: {
				print: { raw: "print" }, // => @media print { ... }
			},
		},
	},
};

I then wanted to implement html2pdf.js to allow quick downloading of PDFs. In order to make this work, I added a print variant to kind of automatically pick up any print:* styles in my app. This too just worked! I could easily test it by adding the "print" class to the document.

/* style.css */
@custom-variant dark (&:is(.dark *));
@custom-variant print (&:is(.print *));

Then I tried using the native browser print behavior, and it no longer worked. It appears that the custom variant disables the "screens" config (for lack of better description). Removing the custom variant made the native browser print behavior work again.

I renamed the variant to "pdf", and this works, but it just requires that I duplicate all print:* classes with pdf:*. Not a big deal, but it would be super cool if the variant could co-exist with the screens config.

[wongjn]

General pointers:

• You'd want to use the CSS configuration where possible rather than JS.
• screens.*.raw was deprecated during v3's lifecycle, as this stops min-* and max-* variants from working.
• print is a built-in variant so you don't need to configure it for the @media query version.

To get both class and media query versions, you can expand your @custom-variant to be like:

@custom-variant print {
  &:is(.print *) {
    @slot;
  }
  @media print {
    @slot;
  }
}