Media query is not working for all browsers not just Safari

[benjaminv]

What version of Tailwind CSS are you using?

example: v4.0.16

What build tool (or framework if it abstracts the build tool) are you using?

Vite 6.2.0

What version of Node.js are you using?

v20.0.0

What browser are you using?

Chrome, Safari, and Firefox

What operating system are you using?

macOS, iOS

Describe your issue

This applies to both Dev and final build.
The css is translated to

@layer utilities {
.lg\:bg-blue-300 {
    @media (width >= '990px') {
      background-color: var(--color-blue-300);
    }
  }
}

Where it should be

@layer utilities {
.lg\:bg-blue-300 {
    @media (width >=  900px) { /* should not have quote in size */
      background-color: var(--color-blue-300);
    }
  }
}

or more conveniently,

@layer utilities {
.lg\:bg-blue-300 {
    @media (min-width:900px) {
      background-color: var(--color-blue-300);
    }
  }
}

the difference is currently @media (width >= '990px') with '' on size is not working, otherwise @media (width >= 900px) works.

According to MWD reference the size value should not have quote.

[benjaminv]

I finally figured out why. I did have to dive into the source code to know (sort of) how new tailwind is working via the entry stylesheet.

Reason of this issue: I had used '640px' on my --breakpoint overriding config. The correct version is to treat as a normal css value, never use any quotes.

@theme {

  /* screen breakpoints */
  --breakpoint-*: initial;
  --breakpoint-sm: 640px;
  --breakpoint-md: 750px;
  --breakpoint-lg: 990px;
  --breakpoint-xl: 1300px;
  --breakpoint-xxl: 1480px;