Safari iOS v15 TW4 Breakpoints fix?

[sameasterling]

Safari iOS v15 isn't rendering breakpoints. I found the following suggested fix but it is not working. Any suggestions other than rolling back to TW3?

`@theme {
/* Disable default responsive variants /
--breakpoint-: initial;
}

@custom-variant sm (@media (min-width 40rem));
@custom-variant md (@media (min-width 48rem));
/* Etc. */`

[gregsullivan]

Hi Sam—Thanks for posting this!

Can you describe in what sense the fix above isn't working? Are no media queries being generated at all, are they different from what you expected, or are they generated, but not working in Safari?

[sameasterling]

Hey Greg, thanks for responding.
I'm getting an error "Failed to parse selectors ... [postcss-nesting]" error on all instances of a breakpoint. I tried @custom-variant as well as @variant.

``@theme {
/* Disable default responsive variants /
--breakpoint-: initial;
}

@variant sm (min-width: 640px);
@variant md (min-width: 768px);
@variant lg (min-width: 1024px);
@variant xl (min-width: 1280px);
@variant 2xl (min-width: 1536px);
/* Etc. */``

[gregsullivan]

I think you want this style:

@custom-variant sm (@media (min-width: 640px));
@custom-variant md (@media (min-width: 768px));
...

Do you get the error using those?

If you do, I would comment out this line:

_tw/postcss.config.js

Line 12 in 320d863

'postcss-nesting': {},

Then I would run npm run dev again and see what the generated CSS looks like for the media queries. If you paste that code in here, I'd be happy to take a look and troubleshoot the Failed to parse selectors error.

[sameasterling]

I am no longer getting the error and this code is working to produce the correct breakpoints in iOS15.
I also reset the default TW breakpoints to initial in @theme, but it appears this might not be necessary.

Thanks again for your help!

[gregsullivan]

I think you're right: If you override all of the breakpoints that you use on your site individually, the global breakpoint reset to initial wouldn't have an effect on the final CSS.

You're very welcome—happy to hear this is working!