diff --git a/CHANGELOG.md b/CHANGELOG.md index 05ed30e84bfc..d494939a5f35 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index a55d27e17337..bdb5a841d9e0 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -12898,47 +12898,47 @@ 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-duration: .1s; - transition-timing-function: ease; + transition-timing-function: var(--default-transition-timing-function, ease); + transition-duration: var(--default-transition-duration, .1s); } .transition-all { transition-property: all; - transition-duration: .1s; - transition-timing-function: ease; + 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-duration: .1s; - transition-timing-function: ease; + transition-timing-function: var(--default-transition-timing-function, ease); + transition-duration: var(--default-transition-duration, .1s); } .transition-opacity { transition-property: opacity; - transition-duration: .1s; - transition-timing-function: ease; + transition-timing-function: var(--default-transition-timing-function, ease); + transition-duration: var(--default-transition-duration, .1s); transition-property: var(--transition-property-opacity, opacity); - transition-duration: .1s; - transition-timing-function: ease; + transition-timing-function: var(--default-transition-timing-function, ease); + transition-duration: var(--default-transition-duration, .1s); } .transition-shadow { transition-property: box-shadow; - transition-duration: .1s; - transition-timing-function: ease; + 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-duration: .1s; - transition-timing-function: ease; + transition-timing-function: var(--default-transition-timing-function, ease); + transition-duration: var(--default-transition-duration, .1s); } .transition-none { @@ -12946,6 +12946,42 @@ test('transition', async () => { }" `) + 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; + } + + .transition-all { + transition-property: all; + transition-duration: .1s; + transition-timing-function: ease; + } + + .transition-colors { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-duration: .1s; + transition-timing-function: ease; + }" + `) + expect( await compileCss( css` diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 5b7b2f765e59..e7cbaef4be98 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/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', [