Add support for "safe"/"unsafe" alignment utilities

[bakura10]

Hi,

Browsers support very useful features for flexbox and grid alignment, with the safe and unsafe keyword. Especially for grid this has the same support as for all the other features. The safe alignment allow something to use center alignment but behave as start if the content overflow.

Documentation can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

It would basically be adding a new "justify-safe-center", "content-safe-center", "items-safe-center", "justify-items-safe-center", "self-safe-center", "justify-self-safe-center".

EDIT: actually those should also be added for all the "space-between" / "space-evenly" / "space-between" which also support the safe keyword.

[LorenzoBloedow]

Currently only Firefox supports safe and unsafe, but you can use margin: auto instead to achieve the same effect across all browsers.
If for some reason you still want to use it, I made a plugin for it.

[silverwind]

All major browser support it as of 2023-07-18. Also, why is this a discussion and not an issue?

[RobinDev]

Safari is not supporting it... https://caniuse.com/?search=justify%20safe

[silverwind]

The caniuse data is out of date. This example works in Safari 17.3.

MDN also has it wrong, I opened mdn/browser-compat-data#22478 there.

[silverwind]

Turns out there was an error in the example and Safari as of 17.3 does not support it, see mdn/browser-compat-data#22478 (comment).

[maurer2]

Hello, it was recently announced that Safari 18 would support the safe keyword (https://developer.apple.com/documentation/safari-release-notes/safari-18-release-notes#CSS), so it seems like a good idea to revisit the issue. Support in other browsers is pretty good as well (https://caniuse.com/mdn-css_properties_align-self_flex_context_safe_unsafe). The safe keyword should avoid cutting off content in flex children by accident.

I created two examples to illustrate the issue:
"justify-content: center": https://play.tailwindcss.com/UJaCCNX2KJ (content gets cut off)
"justify-content: safe center": https://play.tailwindcss.com/g4NfoR7f30 (content isn't cut off)

Additional links
https://www.stefanjudis.com/today-i-learned/safe-unsafe-alignment-in-css-flexbox/
https://www.smashingmagazine.com/2018/08/flexbox-alignment/#safe-and-unsafe-alignment

Cheers

Edit: There is also another post on this topic: #12916

[therealPaulPlay]

Yes please!

[brycekunkel]

The safe keyword fixes a weird issue where items in an overflow-x: scroll box may not be able to scroll into view. Would be nice to have some way to accomplish this, even if its an additional class like .justify-safe or .space-safe, though I think that would go against the general mantra of single functional utility classes. Perhaps an more standardized implementation like @bakura10 says would be ideal. The safe keyword is currently supported across all major browsers. Of course, until then, we can still just use :first-of-type:ml-auto :last-of-type:mr-auto.