You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Yeah this is currently by design because we can't properly sort media queries and get the correct precedence behavior when applying the classes in your HTML when they are mixed like this, but I'm going to leave this open for a bit as a reminder to look into it again and sort of remember where the challenges were and see if we can't do something a bit better.
One idea is to group the media queries by "type" for sorting purposes and keep the min/max ones grouped with the regular min-width-based media queries for example. Could do the same thing for the mixed unit problem possibly — you'd get strange results but if they are deterministic perhaps that's all we need.
What version of Tailwind CSS are you using?
v3.3.5
What build tool (or framework if it abstracts the build tool) are you using?
Vite 4
What version of Node.js are you using?
v18.0.0
What browser are you using?
Chrome, Safari, or N/A
What operating system are you using?
Windows / Linux
Reproduction URL
https://play.tailwindcss.com/fvlYPhEOPh?file=config
Describe your issue
When extending screens in tailwind configuration (using min/max or raw), it breaks arbitrary values:
Makes this don't work:
The text was updated successfully, but these errors were encountered: