documentation should be much clearer about what directives are not supported by Safari

[vesper8]

https://tailwindcss.com/docs/browser-support does not mention anywhere that Safari is problematic except where it says that Certain features such as focus-visible are included but not supported natively by all modern browsers.

For example, both https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior and https://developer.mozilla.org/en-US/docs/Web/CSS/gap are not supported by Safari

But there is zero mention of this on https://tailwindcss.com/docs/overscroll-behavior and https://tailwindcss.com/docs/gap

I remember reading somewhere (can't remember where now) that Safari doesn't support overscroll, but this should be mentioned at the very least in https://tailwindcss.com/docs/overscroll-behavior and I would appreciate a list of TailwindCSS directives that are not supported by Safari in one central place, ideally on https://tailwindcss.com/docs/browser-support

I just learned the hard way that Safari doesn't support https://tailwindcss.com/docs/gap after I've already sprinkled it all over my code and now I need to spend time figuring out a solution or replacing it entirely

[ihorvorotnov]

I just learned the hard way that Safari doesn't support https://tailwindcss.com/docs/gap after I've already sprinkled it all over my code and now I need to spend time figuring out a solution or replacing it entirely

But gap, column-gap and row-gap are supported in Safari since 12.1, prefixed since 10.1, in grid layouts. And that is how TailwindCSS uses gaps. Here's my Safari showing gaps just fine:

[vesper8]

Sure, but on Chrome using gap-x-2 works in flex context, it doesn't require grid layout to work, but on Safari this isn't supported.. only works in grid layout

[ihorvorotnov]

1. Gaps in flex context spec is still in Working Draft stage. It's not a living standard yet (although Safari has it on the roadmap, it's already available in TP).
2. On mobile, only Android versions of Chrome and Firefox support it in flex context. Every other browser does not support it yet.
3. This rounds up to about 68% support worldwide, widely differs depending on country and niche (due to different market shares of major browsers). So it's a bit too early to support it on a framework level without providing polyfills etc.
4. Nowhere it the docs TailwindCSS uses gaps in flex context. In fact, they promote it specifically for grids, it's a part of "Grids" section.
   Considering all of the above, I'm curious why someone would expect gaps to work in flex context.