Media queries not working in Safari 16.4 #17197
-
|
What version of Tailwind CSS are you using? v4.0.14 What browser are you using? iOS Safari 16.4 Reproduction URL https://play.tailwindcss.com/dS3OSSgS08?layout=preview&size=540x720 Describe your issue Although Safari 16.4 is supposed to support media query range syntax, my testing shows it's not actually working with Tailwind v4. 😵💫 
No idea what the problem is here. I wonder if the ranged syntax doesn't work together with CSS nesting. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
Hey! What you're seeing is that CSS nesting isn't supported at all in Safari 16.4: https://caniuse.com/css-nesting We don't flatten nesting in development with Tailwind because we assume that developers are developing using recent browser version that does support nesting, but we do flatten nesting in production builds. We use Lightning CSS for that which introduced some overhead so we skip it in development. Tailwind Play doesn't run Lightning CSS either so we can keep the website light/fast and not ship all the WASM necessary to the client. Your example should work if you do a production build 👍 We're also exploring moving the nesting flattening into core instead of relying on Lightning CSS for this so things are flattened in both dev and prod because of stuff like this, but not quite there yet. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @adamwathan! Of course that makes sense. 🤦 Yes, I specifically ran into this today after I worked around another issue which uncovered this one. When it reproduced on the playground, I figured that was two environments exhibiting the same behaviour, and I didn't stop to think whether I was missing the transpilation step in both cases. 😫😫😫 Another good reminder that the Playground is not always a good enough repro! |
Beta Was this translation helpful? Give feedback.
Hey! What you're seeing is that CSS nesting isn't supported at all in Safari 16.4:
https://caniuse.com/css-nesting
We don't flatten nesting in development with Tailwind because we assume that developers are developing using recent browser version that does support nesting, but we do flatten nesting in production builds. We use Lightning CSS for that which introduced some overhead so we skip it in development.
Tailwind Play doesn't run Lightning CSS either so we can keep the website light/fast and not ship all the WASM necessary to the client.
Your example should work if you do a production build 👍 We're also exploring moving the nesting flattening into core instead of relying on Lightning…