Add transition-behavior utilities

[lukewarlow]

transition-behavior is a new CSS property that allows you to transition on discrete properties.

This is new in Chrome 117. See https://chromestatus.com/feature/5071230636392448

One major use case for this is styling dialog and popover transitions when showing. (See comment for exit transitions)

See #12040 for a related PR to add a @starting-style variant.

[lukewarlow]

Not sure on the exact best class names for this?

[lukewarlow]

It would also be good to add a utility for transition: overlay. https://drafts.csswg.org/css-position-4/#overlay

The overlay property shipped in Chrome 117 See https://chromestatus.com/feature/5138724910792704

While transition-behavior allows styling entry animations for popover and dialog for exit animations you need transition-property to include overlay

See https://developer.chrome.com/en/blog/new-in-chrome-117/#exit-entry-animations for a good example.

[lukewarlow]

See https://developer.chrome.com/blog/entry-exit-animations/ for a good overview on all these new capabilities in Chrome

[brandonmcconnell]

@lukewarlow I've been wanting a CSS property like that for years! 🙌🏼

For a Tailwind CSS implementation, I think we may want to wait until at least all modern browsers implement the feature:
https://caniuse.com/mdn-css_properties_transition-behavior

[lukewarlow]

WebKit/standards-positions#148

WebKit have a positive standards position on this and look like they have it implemented as well.

[lukewarlow]

This is part of Interop 2024 so should be in all 3 browsers by the end of the year

[lukewarlow]

I have no clue what's happened to the branch and why there's so many conflicts and commits but I imagine it's a simple fix

[brandonmcconnell]

@lukewarlow Yeah, that's happened to some of mine in the past too. Usually, they just have to rebase it on the latest main/master branch.

[RobinMalfait]

Hey!

You might have noticed that I forced pushed to this branch. The reason is because the PR now uses next as the base branch which is our working branch for Tailwind CSS v4. In other words, the feature you implemented here is now written in the new codebase.

The code is ported as-is, so no API changes of your feature happened while moving it to the new codebase.

I also made sure to add you as a co-author because you still deserve all the credit 💪

[brandonmcconnell]

Congrats, @lukewarlow!

[philipp-spiess]

Looks like this was added to v4 in #15051.