The issue seemingly appears only when using fractional scaling (ie. 125%, 150%) on the OS configuration and also only when tailwind uses the xl viewport.
This also seemingly doesn't happen when scaling using the web browser on 100% system scaling.
What happens is mx-auto considerably decreases the horizontal margin, making it look too close to the screen borders in comparison to 100% scaling.
To replicate this bug, simply put your "Scale" system setting to anything above 100% and load a site that uses mx-auto with a viewport of xl:
Then, compare it to how it looks on 100% scaling, and voila.
Expected:
Result:
This bug does NOT happen on viewports other than xl:
What version of Tailwind CSS are you using?
v3.4.15
What build tool (or framework if it abstracts the build tool) are you using?
Unsure about that, will list all dependencies: "autoprefixer": "^10.4.20" "postcss": "^8.4.49" "tailwindcss": "^3.4.15"
I'm using ReactJS v13.4.0 as my framework too.
What version of Node.js are you using?
v22.11
What browser are you using?
Mozilla Firefox, but I confirmed it also happens in Chromium.
What operating system are you using?
Windows 11
Reproduction URL
Bug Report source code: https://github.com/Neutrovertido/tailwind-fractional-scaling-bug
Live preview: https://glowing-sunshine-667537.netlify.app/
Describe your issue
The issue seemingly appears only when using fractional scaling (ie. 125%, 150%) on the OS configuration and also only when tailwind uses the
xlviewport.This also seemingly doesn't happen when scaling using the web browser on 100% system scaling.
What happens is
mx-autoconsiderably decreases the horizontal margin, making it look too close to the screen borders in comparison to 100% scaling.To replicate this bug, simply put your "Scale" system setting to anything above 100% and load a site that uses
mx-autowith a viewport ofxl:Then, compare it to how it looks on 100% scaling, and voila.
Expected:
Result:
This bug does NOT happen on viewports other than
xl: