Translate @media print @page CSS to Tailwind
Question
I have the following CSS:
@media print {
@page {
size: ledger landscape;
}
}
How can I do that in Tailwind? And where would I put it? Ideally, it's only applied to a certain part of my React app (so not on the <html> tag)
1 answers
solution1
3 2023-06-08 22:13:42
I wasn't able to find a reference for arbitrary at-rules in Tailwind CSS documentation except for @media and @supports — so I assume this is not something the core team actually went thru yet.
By what is described in Using arbitrary variants , we can arbitrary create something like [@page(some-rule-here]] , but not [@page] standalone (without a rule).
But… Since you want to use @page , which has the possible rules :left (selects even pages) and :right (selects odd pages) [ mdn ], we can aim for both these rules, creating the following classes:
print:[@page_:left]:[size:ledger_landscape]
print:[@page_:right]:[size:ledger_landscape]
… which will generate the following CSS:
@media print {
@page :left {
.print\:\[\@page_\:left\]\:\[size\:ledger_landscape\] {
size: ledger landscape;
}
}
@page :right {
.print\:\[\@page_\:right\]\:\[size\:ledger_landscape\] {
size: ledger landscape;
}
}
}
Playground: play.tailwindcss.com/lp9P676XK6
I personally don't think this is better than using pure CSS, but it answers your question while Tailwind CSS doesn't support it officially.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.