Include --default-transition-* variables in transition-* utility output (#14482)

Fixes #14479.

Back in March we made a change to the `transition-*` utilities that
inlined the values of the `--default-transition-*` variables to fix a
bug where things would break if those variables didn't exist in your
CSS. At the time though we weren't outputting CSS variables as part of
the values of any utilities, for example `bg-red-500` didn't actually
reference the `--color-red-500` variable.

We later changed that but missed this situation, so these variables were
still inlined even though nothing else was.

This PR fixes that and makes things more consistent, so these variables
will be used as expected unless using the `@theme inline` option, like
with everything else.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

CHANGELOG.md

@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Allow `anchor-size(…)` in arbitrary values ([#14394](https://github.com/tailwindlabs/tailwindcss/pull/14394))
 - Skip candidates with invalid `theme()` calls ([#14437](https://github.com/tailwindlabs/tailwindcss/pull/14437))
 - Don't generate `inset-*` utilities for `--inset-shadow-*` and `--inset-ring-*` theme values ([#14447](https://github.com/tailwindlabs/tailwindcss/pull/14447))
+- Include `--default-transition-*` variables in `transition-*` utility output ([#14482](https://github.com/tailwindlabs/tailwindcss/pull/14482))
 
 ### Changed
 

packages/tailwindcss/src/utilities.test.ts

@@ -12898,12 +12898,73 @@ test('transition', async () => {
 
     .transition {
       transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, -webkit-backdrop-filter, backdrop-filter;
-      transition-duration: .1s;
-      transition-timing-function: ease;
+      transition-timing-function: var(--default-transition-timing-function, ease);
+      transition-duration: var(--default-transition-duration, .1s);
     }
 
     .transition-\\[--value\\] {
       transition-property: var(--value);
+      transition-timing-function: var(--default-transition-timing-function, ease);
+      transition-duration: var(--default-transition-duration, .1s);
+    }
+
+    .transition-all {
+      transition-property: all;
+      transition-timing-function: var(--default-transition-timing-function, ease);
+      transition-duration: var(--default-transition-duration, .1s);
+    }
+
+    .transition-colors {
+      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+      transition-timing-function: var(--default-transition-timing-function, ease);
+      transition-duration: var(--default-transition-duration, .1s);
+    }
+
+    .transition-opacity {
+      transition-property: opacity;
+      transition-timing-function: var(--default-transition-timing-function, ease);
+      transition-duration: var(--default-transition-duration, .1s);
+      transition-property: var(--transition-property-opacity, opacity);
+      transition-timing-function: var(--default-transition-timing-function, ease);
+      transition-duration: var(--default-transition-duration, .1s);
+    }
+
+    .transition-shadow {
+      transition-property: box-shadow;
+      transition-timing-function: var(--default-transition-timing-function, ease);
+      transition-duration: var(--default-transition-duration, .1s);
+    }
+
+    .transition-transform {
+      transition-property: transform, translate, scale, rotate;
+      transition-timing-function: var(--default-transition-timing-function, ease);
+      transition-duration: var(--default-transition-duration, .1s);
+    }
+
+    .transition-none {
+      transition-property: none;
+    }"
+  `)
+
+  expect(
+    await compileCss(
+      css`
+        @theme inline {
+          --default-transition-timing-function: ease;
+          --default-transition-duration: 100ms;
+        }
+        @tailwind utilities;
+      `,
+      ['transition', 'transition-all', 'transition-colors'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root {
+      --default-transition-timing-function: ease;
+      --default-transition-duration: .1s;
+    }
+
+    .transition {
+      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, -webkit-backdrop-filter, backdrop-filter;
       transition-duration: .1s;
       transition-timing-function: ease;
     }
@@ -12918,31 +12979,6 @@ test('transition', async () => {
       transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
       transition-duration: .1s;
       transition-timing-function: ease;
-    }
-
-    .transition-opacity {
-      transition-property: opacity;
-      transition-duration: .1s;
-      transition-timing-function: ease;
-      transition-property: var(--transition-property-opacity, opacity);
-      transition-duration: .1s;
-      transition-timing-function: ease;
-    }
-
-    .transition-shadow {
-      transition-property: box-shadow;
-      transition-duration: .1s;
-      transition-timing-function: ease;
-    }
-
-    .transition-transform {
-      transition-property: transform, translate, scale, rotate;
-      transition-duration: .1s;
-      transition-timing-function: ease;
-    }
-
-    .transition-none {
-      transition-property: none;
     }"
   `)
 

packages/tailwindcss/src/utilities.ts

@@ -3703,8 +3703,9 @@ export function createUtilities(theme: Theme) {
   }
 
   {
-    let defaultTimingFunction = theme.get(['--default-transition-timing-function']) ?? 'ease'
-    let defaultDuration = theme.get(['--default-transition-duration']) ?? '0s'
+    let defaultTimingFunction =
+      theme.resolve(null, ['--default-transition-timing-function']) ?? 'ease'
+    let defaultDuration = theme.resolve(null, ['--default-transition-duration']) ?? '0s'
 
     staticUtility('transition-none', [['transition-property', 'none']])
     staticUtility('transition-all', [