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