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]>
tailwindlabs · Nov 20, 2024 · 85dc3db · 85dc3db
1 parent 75deeca
commit 85dc3db
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 0 deletions.
diff --git a/CHANGELOG.md b/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))

diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/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",

diff --git a/packages/tailwindcss/src/property-order.ts b/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',

diff --git a/packages/tailwindcss/src/utilities.test.ts b/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 {

diff --git a/packages/tailwindcss/src/utilities.ts b/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