Minify flag on Tailwind CLI creating invalid CSS for Safari 14 #12140
Unanswered
DeveloperRob
asked this question in
Help
Replies: 1 comment
-
I've observed the same behavior with non-functional gradients with minified build using Tailwinds CLI and Safari v14.1.1 on Mac OS Big Sur |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Good Afternoon all,
We had a bit of a tricky to diagnosis issue on Safari 14 on iOS recently. We are currently creating a minified CSS file at present using
npx tailwindcss --minify
. Inspecting the non-minified CSS, near the top of the file you have as expected (most of the variables have been replaced for brevity, but the removed variables are the same in both set of rules):The problem I have is when using the minified CSS, the rules are combined - so you have:
::backdrop
was only introduced in Safari 15.4 (https://caniuse.com/dialog), so when the rules are combined Safari considers the rules invalid and ignores them. This then means anything that relies on these default variables no longer works correctly.I believe --minify uses
cssnano
, but when testing with that allow it doesn't combine the rules. Is this a bug in Tailwind, or am I missing a step in the process which is responsible for incorrect combining the rules?See #8788 where the problem was first found; with the issue in the non-minifed output being fixed in #8567.
Example to replicate the issue:
index.html:
tailwind.config.js
:Working:
npx tailwindcss -o output.css
Doesn't work (the first gradient box is empty):
npx tailwindcss -o output.css --minify
Thanks,
Robert
Beta Was this translation helpful? Give feedback.
All reactions