Skip to content

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

Open
@hugentobler

Description

@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
}
}


Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions