Menu
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)
653
Currently (June 2023/v3.3.2) this is impossible with Tailwind CSS since the @page can't accept selectors — its value is applied for the entire application.
As a utility-first CSS framework, Tailwind CSS entire model is based on selectors.
As a proof of concept to show why this isn't possible, we can try to replicate some examples available at Using arbitrary variants doc page.
In Tailwind CSS it's currently not possible to use @page without rules, but since this at-rule 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: [playground]
@media print {
@page :left {
.print\:\[\@page_\:left\]\:\[size\:ledger_landscape\] {
size: ledger landscape;
}
}
@page :right {
.print\:\[\@page_\:right\]\:\[size\:ledger_landscape\] {
size: ledger landscape;
}
}
}
This CSS is —unfortunately— invalid.
194
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
