Description
What version of Tailwind CSS are you using?
v4.0.6
What browser are you using?
This is a Safari issue.
I am working with svelte files. I had implemented media queries nested inside of selectors which were working just fine in Chrome. However when I was testing in Safari, I realised that nesting media queries inside of selectors is technically invalid syntax, even though Chrome is able to render it.
So looking into it, I realised that postcss processes the styles into valid markup in build mode, but not in dev mode. So Safari renders it correctly in build mode but not dev mode.
I'm wondering what is the suggested way to use media queries in svelte files then. (I know this is not the preferred utilities-based tailwind syntax, but I have this use-case where I don't want to inline these styles). And also wondering if there is a postcss issue on dev or the aforementioned behaviour is expected.
<style lang="postcss">
@reference "../../app.css";
article {
columns: auto;
@media (width >= theme(--breakpoint-lg)) {
--visible-columns: 2;
columns: calc(min(65ch, (100cqw - var(--x-spacer) * 2) / var(--visible-columns)));
}
@media (width >= theme(--breakpoint-2xl)) {
--visible-columns: 3;
}
@media (width >= theme(--breakpoint-3xl)) {
--visible-columns: 4;
}
</style>
Dev | Build |
|
|