Add new transition-discrete and transition-normal utilities (#15051)

This PR adds two new utilities for the `transition-behavior` property:

| Name | Definition |
| --- | --- |
| `transition-discrete` | `transition-behavior: allow-discrete` |
| `transition-normal` | `transition-behavior: normal` |


# Test plan

Not a lot too test here, but verified in the browser that these
properties generate correct CSS:
<img width="301" alt="image"
src="https://github.com/user-attachments/assets/db314750-e129-47d6-b605-d3b367ae81a4">
<img width="253" alt="image"
src="https://github.com/user-attachments/assets/24da5a6e-0b6a-48aa-a042-5ec19773bc6b">

---------

Co-authored-by: Adam Wathan <[email protected]>

Author: RobinMalfait

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Bundle `@tailwindcss/forms`, `@tailwindcss/typography`, and `@tailwindcss/aspect-ratio` with the standalone CLI ([#15028](https://github.com/tailwindlabs/tailwindcss/pull/15028))
 - Allow `addUtilities()` and `addComponents()` to work with child combinators and other complex selectors ([#15029](https://github.com/tailwindlabs/tailwindcss/pull/15029))
 - Support colors that use `<alpha-value>` in JS configs and plugins ([#15033](https://github.com/tailwindlabs/tailwindcss/pull/15033))
+- Add new `transition-discrete` and `transition-normal` utilities for `transition-behavior` ([#15051](https://github.com/tailwindlabs/tailwindcss/pull/15051))
 - _Upgrade (experimental)_: Migrate `[&>*]` to the `*` variant ([#15022](https://github.com/tailwindlabs/tailwindcss/pull/15022))
 - _Upgrade (experimental)_: Migrate `[&_*]` to the `**` variant ([#15022](https://github.com/tailwindlabs/tailwindcss/pull/15022))
 - _Upgrade (experimental)_: Warn when trying to migrating a project that is not on Tailwind CSS v3 ([#15015](https://github.com/tailwindlabs/tailwindcss/pull/15015))

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -7176,7 +7176,9 @@ exports[`getClassList 1`] = `
   "transition",
   "transition-all",
   "transition-colors",
+  "transition-discrete",
   "transition-none",
+  "transition-normal",
   "transition-opacity",
   "transition-shadow",
   "transition-transform",

packages/tailwindcss/src/property-order.ts

@@ -339,6 +339,7 @@ export default [
   'backdrop-filter',
 
   'transition-property',
+  'transition-behavior',
   'transition-delay',
   'transition-duration',
   'transition-timing-function',

packages/tailwindcss/src/utilities.test.ts

@@ -14463,6 +14463,20 @@ test('transition', async () => {
   ).toEqual('')
 })
 
+test('transition-behavior', async () => {
+  expect(await run(['transition-discrete', 'transition-normal'])).toMatchInlineSnapshot(`
+    ".transition-discrete {
+      transition-behavior: allow-discrete;
+    }
+
+    .transition-normal {
+      transition-behavior: normal;
+    }"
+  `)
+
+  expect(await run(['-transition-discrete', '-transition-normal'])).toEqual('')
+})
+
 test('delay', async () => {
   expect(await run(['delay-123', 'delay-200', 'delay-[300ms]'])).toMatchInlineSnapshot(`
     ".delay-123 {

packages/tailwindcss/src/utilities.ts

@@ -3552,6 +3552,9 @@ export function createUtilities(theme: Theme) {
       ],
     })
 
+    staticUtility('transition-discrete', [['transition-behavior', 'allow-discrete']])
+    staticUtility('transition-normal', [['transition-behavior', 'normal']])
+
     functionalUtility('delay', {
       handleBareValue: ({ value }) => {
         if (!isPositiveInteger(value)) return null