From d01e103cc4741c29764afaa287d2fb21356f7eea Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 8 Jun 2026 23:08:52 +0200 Subject: [PATCH] Add missing `inset` keyword for `inset-shadow-none` (#20208) This PR fixes an issue where the `inset-shadow-none` class did not use the `inset` keyword. This PR fixes that by introducing the `inset` keyword: ```diff .inset-shadow-none { - --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow: inset 0 0 #0000; box-shadow: var(--tw-inset-shadow), var } ``` While the end effect is the same (there will be no shadow), it also means that we switch between the types of shadows. This results in the fact that things like transitions don't behave the way they should. A minimal reproduction looks like this: https://play.tailwindcss.com/iOrnKWP49a (depending on when you visit this link, it might be fixed) ## Test plan 1. Updated tests to reflect 2. Verified in the Vite playground that this is the case. In the video you will notice that the transition is smooth in the fixed case, but there is no transition in the current state: https://github.com/user-attachments/assets/15d8c78e-6be5-4c6c-8df9-1044c14e8f39 --- CHANGELOG.md | 1 + packages/tailwindcss/src/utilities.test.ts | 2 +- packages/tailwindcss/src/utilities.ts | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 213583c9a..6c60d51ef 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Ensure `@source` globs with symlinks are preserved ([#20203](https://github.com/tailwindlabs/tailwindcss/pull/20203)) - Ensure later `@source` rules can re-include files excluded by earlier `@source not` rules ([#20203](https://github.com/tailwindlabs/tailwindcss/pull/20203)) - Upgrade: don't migrate empty class rules to invalid `@utility` rules ([#20205](https://github.com/tailwindlabs/tailwindcss/pull/20205)) +- Ensure transitions between `inset-shadow-none` and other inset shadows work correctly ([#20208](https://github.com/tailwindlabs/tailwindcss/pull/20208)) ### Changed diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 25344dcf9..3adabd010 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -27850,7 +27850,7 @@ test('inset-shadow', async () => { } .inset-shadow-none { - --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow: inset 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 2d9b4a3c6..ba7b9a39d 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -5734,7 +5734,7 @@ export function createUtilities(theme: Theme) { if (candidate.modifier) return return [ boxShadowProperties(), - decl('--tw-inset-shadow', nullShadow), + decl('--tw-inset-shadow', `inset ${nullShadow}`), decl('box-shadow', cssBoxShadowValue), ]