Media queries nested inside selector is correctly processed in build mode, but not dev mode

[hugentobler]

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
/*! tailwindcss v4.0.0 | MIT License | https://tailwindcss.com */ article.s-SR93p9P2y7Or { columns: auto; @media (width >= 64rem) { --visible-columns: 2; columns: calc(min(65ch, (100cqw - var(--x-spacer) * 2 ) / var(--visible-columns))); } @media (width >= 96rem) { --visible-columns: 3; } @media (width >= 120rem) { --visible-columns: 4; } }	article.svelte-1fsglyr { columns: auto; } @media (width > =64rem) { article.svelte-1fsglyr { --visible-columns: 2; columns: min(65ch,(100cqw - var(--x-spacer) * 2) /var(--visible-columns)); column-gap: 0; } } @media (width > =96rem) { article.svelte-1fsglyr { --visible-columns:3 } } @media (width > =120rem) { article.svelte-1fsglyr { --visible-columns:4 } }

[philipp-spiess]

Hey @hugentobler. Do you mind attaching a small reproduction for this that we can run locally? I'm curious which post-processing step adds the space between the >= sign - That's definitly not Tailwind CSS! 😅

Maybe a work-around would be to use min-width: and max-width: media queries instead?

[hugentobler]

Hi @philipp-spiess sorry the space between >= is just a typo when I was copy pasting.
I'm pretty certain that all the browsers support range-based media queries.
But I'm not sure if Safari dev doesn't work simply because media queries are not allowed to be nested in selectors, or there is sth else going on.
If it is just that media queries are not allowed to be nested, then I will just rewrite the styling.

[adamwathan]

What version of Safari are you using?

[hugentobler]

Safari v18.3

[nwrenger]

Just to continue this issue: In the skeleton framework, a nested media query is also used and we're encountering a similar issue. Being that the contents inside the query are not recognized by Safari:

:root {
	color-scheme: light;
	@variant dark {
  		color-scheme: dark;
	}
}

So on dev mode this is missing/won't be recognized as such (copy from a build version of the website, just an example):

@layer base {
	@media (prefers-color-scheme:dark) {
		body {
			color: var(--base-font-color-dark);
		}
	}
}

[Cretezy]

Seems like the following is always failing for me using regular .css files:

@utility my-button {
  color: blue;
  @media (width >= theme(--breakpoint-md)) {
    color: red
  }
}

Currently have to do:

.my-button {
  color: blue;
}
@media (width >= theme(--breakpoint-md)) {
  .my-button {
    color: red;
  }
}

[endigo9740]

@Cretezy just FYI we encountered similar issues with media queries for breakpoints. Variants are supported for these specifically.

@utility my-button {
  color: blue;
  @variant md {
    color: red
  }
}

[endigo9740]

I wanted to help showcase @nwrenger 's issue here. Here's a minimal reproduction:

https://play.tailwindcss.com/4zRUzHyTow?file=css

Kapture.2025-03-21.at.13.04.07.mp4

The catch being is this does not show the error, it's fully functional in Safari. But that's the weird part of this issue - it seems to be restricted to ONLY dev servers for SvelteKit and Astro apps (so far).

• Safari + dev server => scheme does not change to match mode.
• Safari + production build => scheme does change to match mode (the desired outcome)

To make matters more more interesting, the issue seems to have been introduced in macOS 15 Sequoia. The version of Safari is tied to the OS, so here's a quick comparison.

Here's an Astro-based app using light-dark + color scheme on Safari 17.5

safari-17.5.mp4

And then again on Safari 18.3.1

safari-18.3.1.mp4

My theory here is something has change in the latest version of macOS/Safari that's affecting the Vite dev server for SvelteKit and Astro based apps. I'm not 100% sure this is an issue on Tailwind's end, but we might need some coordination between Tailwind/Vite to figure this one out.