Add @starting-style variant

[nix6839]

This allow authors to start CSS transitions on first style update.

More info about this: https://developer.chrome.com/en/blog/new-in-chrome-117/#exit-entry-animations

[JeroenReumkens]

Just noticed this has been added to v4 alpha. So perhaps they won't be adding it to v3 anymore, but v4 will have it!

#13329

[twilkinson3421]

If you want to use the variant now, you can add the following to the plugins array in your tailwind config:

/** @type {import('tailwindcss/types/config').PluginCreator} */
({ addVariant }: any) => {
  addVariant("starting", "@starting-style");
},

Then you can use the starting: variant in your tailwind styles.

[JeroenReumkens]

YES! I made a video about it last week, after figuring out how it works. Only forgot to update it here too 😂
Thanks for adding the comment here as well!

https://youtu.be/jCqtngrL2pA?si=Co0Ajzs0uPo5ju3T

[6TELOIV]

For better typing:

import type { PluginAPI } from "tailwindcss/types/config";
/* ... */
({ addVariant }: PluginAPI) => {
  addVariant("starting", "@starting-style");
}