add transition-behavior utilities

Co-authored-by: Luke Warlow <luke@warlow.dev>
tailwindlabs · Apr 17, 2024 · 42266ef · 42266ef
1 parent cc8c069
commit 42266ef
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -1717,6 +1717,8 @@ exports[`getClassList 1`] = `
   "transform-view",
   "transition",
   "transition-all",
+  "transition-allow-discrete",
+  "transition-behavior-normal",
   "transition-colors",
   "transition-none",
   "transition-opacity",

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
@@ -10475,6 +10475,19 @@ test('transition', () => {
   ).toEqual('')
 })
 
+test('transition-behavior', () => {
+  expect(run(['transition-allow-discrete', 'transition-behavior-normal'])).toMatchInlineSnapshot(`
+    ".transition-allow-discrete {
+      transition-behavior: allow-discrete;
+    }
+
+    .transition-behavior-normal {
+      transition-behavior: normal;
+    }"
+  `)
+  expect(run(['-transition-allow-discrete', '-transition-behavior-normal'])).toEqual('')
+})
+
 test('delay', () => {
   expect(run(['delay-123', 'delay-200', 'delay-[300ms]'])).toMatchInlineSnapshot(`
     ".delay-123 {

diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
@@ -3609,6 +3609,9 @@ export function createUtilities(theme: Theme) {
       ],
     })
 
+    staticUtility('transition-allow-discrete', [['transition-behavior', 'allow-discrete']])
+    staticUtility('transition-behavior-normal', [['transition-behavior', 'normal']])
+
     functionalUtility('delay', {
       handleBareValue: ({ value }) => {
         if (Number.isNaN(Number(value))) return null