Custom breakpoints defined in main.css not overriding default Tailwind breakpoints after import

[mina20088]

What version of Tailwind CSS are you using?

Tailwind CSS Version : v4.1.16​

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

Vite (latest version likely 6.x series)

What version of Node.js are you using?

v24.4.1

What browser are you using?
Chrome

What operating system are you using?

Windows 11 (Version 24H2 or 23H2)

Reproduction URL

https://play.tailwindcss.com/U39x3UWjut?size=888x720&file=css

Describe your issue

the problem is that when i tried to override the initial brakpoints in the main.csss after importing the tailwind css it dose to got affected , it dose nor work , included a video for the issue please check the style tap at the dev tools

Screen.Recording.2025-10-25.200427.mp4

[RobinMalfait]

Hey! I don't fully understand what's broken here?

On large breakpoints (xl), the hamburger is correctly hidden, and the styles are applied according to devtools:

On small breakpoints (xs), the hamburger is correctly visible, and the styles are applied according to devtools:

If you look in the generated CSS, you can see that the rem based values are being used in the media queries, just like you configured them. So from a Tailwind CSS (and CSS in general) perspective everything is working as expected.

That said, in media queries, the rem values always map to your browser settings, not to a root font size. So if the pixel based values in your responsive view don't line up, then I'm assuming you have different browser settings. So double check your page zoom settings: chrome://settings/?search=page+zoom

This is what I see with default settings at 1199px:

And this is what I see with default settings at 1200px, which is the equivalent of 75rem:

[mina20088]

@wongjn Do you think that’s normal behavior? I believe browser settings shouldn’t affect this. If they do, then why doesn’t the same issue occur when using regular media queries?

[wongjn]

Yes, it is normal behavior, as per the CSS specification of media queries:

Relative length units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the em unit is relative to the initial value of font-size, defined by the user agent or the user’s preferences, not any styling on the page.

So, rem units in @media take the user preference font size from the browser.

Furthermore, I'm not sure what you mean by "regular" media queries, but you would see this behavior occur with any media query using rem criteria.

[mina20088]

@wongjn I mean media queries in general, not those related to any framework. But this behavior occurs only when using rem, not pixels, right?

[wongjn]

This behavior will occur using rem but not pixels.

[mina20088]

ok thank you i will try after i changed the font size to meduim which is recommended by my browser and i will be back tommorow
thank yuo very mush