diff --git a/CHANGELOG.md b/CHANGELOG.md index 05ed30e84..d494939a5 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 a55d27e17..bdb5a841d 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/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; }" `) diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 5b7b2f765..e7cbaef4b 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', [