Tailwind print-only styles not working

[Synchro]

I'm using a very vanilla tailwind setup, with a few colours as the only customisation. I have a section in a document that I only want to appear when rendering for print, that's styled like this, in accordance with tailwind docs:

<p class="hidden print:block">hello</p>

This isn't working – it's always hidden. Other print-only styles don't seem to work either, for example this doesn't print in red:

<p class="print:text-red-600">hello</p>

But this is only hidden when printing:

<p class="print:hidden">hello</p>

I am generating PDFs using Spatie's BrowserShot, and using emulateMedia('print'), but I don't think that has anything to do with it as it also fails to heed these styles when I use a browser's built-in print function.

Any idea why these print styles are not working?

[cubedhuang]

For me, it was fixed after making the styles !important using the ! modifier:

<p class="hidden print:!block">hello</p>

<p class="print:!text-red-600">hello</p>

Although I'm not sure why there's an inconsistency -- sometimes it'll work without it and sometimes it won't.

[ecstrema]

For those looking to a tailwind4 answer, add this to your style.css:

@custom-variant print (@media print);

[wongjn]

You shouldn't have to do this; print is built in.

[ecstrema]

Oh wow, I missed it.

[ecstrema]

Hence why it worked though:)