From 65cbb31e2f88666029d8f32b03ac922497355463 Mon Sep 17 00:00:00 2001 From: koreahghg Date: Fri, 3 Jul 2026 00:48:31 +0900 Subject: [PATCH 1/4] Support fractional opacity modifiers for named shadow sizes --- CHANGELOG.md | 1 + packages/tailwindcss/src/utilities.test.ts | 243 +++++++++++++++++++++ packages/tailwindcss/src/utilities.ts | 8 +- 3 files changed, 248 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b4058a7729bf..571d6db7b248 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Canonicalization: match arbitrary hex colors against theme colors case-insensitively (e.g. `bg-[#fff]` and `bg-[#FFF]` → `bg-white`) ([#20298](https://github.com/tailwindlabs/tailwindcss/pull/20298)) - Prevent Preflight from overriding Firefox's native `iframe:focus-visible` outline styles ([#20292](https://github.com/tailwindlabs/tailwindcss/pull/20292)) - Prevent `theme('colors.foo')` in JS plugins from returning an internal disambiguation object when a CSS theme key shares a prefix with a sibling key like `--color-foo-bar` ([#20299](https://github.com/tailwindlabs/tailwindcss/pull/20299)) +- Support fractional opacity modifiers (e.g. `shadow-sm/12.5`) for `shadow-*`, `text-shadow-*`, `drop-shadow-*`, and `inset-shadow-*` named sizes ## [4.3.2] - 2026-06-26 diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index e404a0a90dc2..c49c465d6f4b 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -27726,6 +27726,249 @@ test('shadow', async () => { ).toEqual('') }) +test('shadow, text-shadow, drop-shadow, and inset-shadow support fractional (non-integer) opacity modifiers', async () => { + // The named-size branch of these utilities used `isPositiveInteger` to + // validate a bare modifier like `/50`, instead of `isValidOpacityValue` + // (the helper every other opacity modifier in the codebase uses, e.g. for + // `bg-*`/`text-*`/`shadow-`). This meant a fractional modifier like + // `/12.5` was silently dropped for `shadow-sm`/`text-shadow-sm`/ + // `inset-shadow-sm`, and made `drop-shadow-sm` produce no output at all + // (it has an extra guard that bails out entirely when a modifier is given + // but couldn't be resolved to an alpha value). + expect( + await run( + ['shadow-sm/12.5', 'text-shadow-sm/12.5', 'drop-shadow-sm/12.5', 'inset-shadow-sm/12.5'], + css` + @theme { + --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075); + --drop-shadow-sm: 0 1px 1px rgb(0 0 0 / 0.05); + --inset-shadow-sm: 0 2px 4px rgb(0 0 0 / 0.05); + } + @tailwind utilities; + `, + ), + ).toMatchInlineSnapshot(` + " + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-blur: initial; + --tw-brightness: initial; + --tw-contrast: initial; + --tw-grayscale: initial; + --tw-hue-rotate: initial; + --tw-invert: initial; + --tw-opacity: initial; + --tw-saturate: initial; + --tw-sepia: initial; + --tw-drop-shadow: initial; + --tw-drop-shadow-color: initial; + --tw-drop-shadow-alpha: 100%; + --tw-drop-shadow-size: initial; + --tw-text-shadow-color: initial; + --tw-text-shadow-alpha: 100%; + } + } + } + + .shadow-sm\\/12\\.5 { + --tw-shadow-alpha: 12.5%; + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, oklab(0% 0 0 / .125)), 0 1px 2px -1px var(--tw-shadow-color, oklab(0% 0 0 / .125)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + + .inset-shadow-sm\\/12\\.5 { + --tw-inset-shadow-alpha: 12.5%; + --tw-inset-shadow: 0 2px 4px var(--tw-inset-shadow-color, oklab(0% 0 0 / .125)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + + .drop-shadow-sm\\/12\\.5 { + --tw-drop-shadow-alpha: 12.5%; + --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, oklab(0% 0 0 / .125))); + --tw-drop-shadow: var(--tw-drop-shadow-size); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + } + + .text-shadow-sm\\/12\\.5 { + --tw-text-shadow-alpha: 12.5%; + text-shadow: 0px 1px 0px var(--tw-text-shadow-color, oklab(0% 0 0 / .125)); + } + + @property --tw-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; + } + + @property --tw-shadow-color { + syntax: "*"; + inherits: false + } + + @property --tw-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; + } + + @property --tw-inset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; + } + + @property --tw-inset-shadow-color { + syntax: "*"; + inherits: false + } + + @property --tw-inset-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; + } + + @property --tw-ring-color { + syntax: "*"; + inherits: false + } + + @property --tw-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; + } + + @property --tw-inset-ring-color { + syntax: "*"; + inherits: false + } + + @property --tw-inset-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; + } + + @property --tw-ring-inset { + syntax: "*"; + inherits: false + } + + @property --tw-ring-offset-width { + syntax: ""; + inherits: false; + initial-value: 0; + } + + @property --tw-ring-offset-color { + syntax: "*"; + inherits: false; + initial-value: #fff; + } + + @property --tw-ring-offset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; + } + + @property --tw-blur { + syntax: "*"; + inherits: false + } + + @property --tw-brightness { + syntax: "*"; + inherits: false + } + + @property --tw-contrast { + syntax: "*"; + inherits: false + } + + @property --tw-grayscale { + syntax: "*"; + inherits: false + } + + @property --tw-hue-rotate { + syntax: "*"; + inherits: false + } + + @property --tw-invert { + syntax: "*"; + inherits: false + } + + @property --tw-opacity { + syntax: "*"; + inherits: false + } + + @property --tw-saturate { + syntax: "*"; + inherits: false + } + + @property --tw-sepia { + syntax: "*"; + inherits: false + } + + @property --tw-drop-shadow { + syntax: "*"; + inherits: false + } + + @property --tw-drop-shadow-color { + syntax: "*"; + inherits: false + } + + @property --tw-drop-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; + } + + @property --tw-drop-shadow-size { + syntax: "*"; + inherits: false + } + + @property --tw-text-shadow-color { + syntax: "*"; + inherits: false + } + + @property --tw-text-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; + } + " + `) +}) + test('inset-shadow', async () => { expect( await run( diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index c9fb0cc439c1..5da9e63e173f 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -4618,7 +4618,7 @@ export function createUtilities(theme: Theme) { if (candidate.modifier.kind === 'arbitrary') { alpha = candidate.modifier.value } else { - if (isPositiveInteger(candidate.modifier.value)) { + if (isValidOpacityValue(candidate.modifier.value)) { alpha = `${candidate.modifier.value}%` } } @@ -5427,7 +5427,7 @@ export function createUtilities(theme: Theme) { if (candidate.modifier.kind === 'arbitrary') { alpha = candidate.modifier.value } else { - if (isPositiveInteger(candidate.modifier.value)) { + if (isValidOpacityValue(candidate.modifier.value)) { alpha = `${candidate.modifier.value}%` } } @@ -5573,7 +5573,7 @@ export function createUtilities(theme: Theme) { if (candidate.modifier.kind === 'arbitrary') { alpha = candidate.modifier.value } else { - if (isPositiveInteger(candidate.modifier.value)) { + if (isValidOpacityValue(candidate.modifier.value)) { alpha = `${candidate.modifier.value}%` } } @@ -5699,7 +5699,7 @@ export function createUtilities(theme: Theme) { if (candidate.modifier.kind === 'arbitrary') { alpha = candidate.modifier.value } else { - if (isPositiveInteger(candidate.modifier.value)) { + if (isValidOpacityValue(candidate.modifier.value)) { alpha = `${candidate.modifier.value}%` } } From 21bbfa1cb9cfc1f25008ec5dd4080216425e2aa1 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 3 Jul 2026 14:16:21 +0200 Subject: [PATCH 2/4] remove unnecessary test --- packages/tailwindcss/src/utilities.test.ts | 243 --------------------- 1 file changed, 243 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index c49c465d6f4b..e404a0a90dc2 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -27726,249 +27726,6 @@ test('shadow', async () => { ).toEqual('') }) -test('shadow, text-shadow, drop-shadow, and inset-shadow support fractional (non-integer) opacity modifiers', async () => { - // The named-size branch of these utilities used `isPositiveInteger` to - // validate a bare modifier like `/50`, instead of `isValidOpacityValue` - // (the helper every other opacity modifier in the codebase uses, e.g. for - // `bg-*`/`text-*`/`shadow-`). This meant a fractional modifier like - // `/12.5` was silently dropped for `shadow-sm`/`text-shadow-sm`/ - // `inset-shadow-sm`, and made `drop-shadow-sm` produce no output at all - // (it has an extra guard that bails out entirely when a modifier is given - // but couldn't be resolved to an alpha value). - expect( - await run( - ['shadow-sm/12.5', 'text-shadow-sm/12.5', 'drop-shadow-sm/12.5', 'inset-shadow-sm/12.5'], - css` - @theme { - --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); - --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075); - --drop-shadow-sm: 0 1px 1px rgb(0 0 0 / 0.05); - --inset-shadow-sm: 0 2px 4px rgb(0 0 0 / 0.05); - } - @tailwind utilities; - `, - ), - ).toMatchInlineSnapshot(` - " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-shadow-alpha: 100%; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --tw-inset-shadow-alpha: 100%; - --tw-ring-color: initial; - --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: initial; - --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-offset-shadow: 0 0 #0000; - --tw-blur: initial; - --tw-brightness: initial; - --tw-contrast: initial; - --tw-grayscale: initial; - --tw-hue-rotate: initial; - --tw-invert: initial; - --tw-opacity: initial; - --tw-saturate: initial; - --tw-sepia: initial; - --tw-drop-shadow: initial; - --tw-drop-shadow-color: initial; - --tw-drop-shadow-alpha: 100%; - --tw-drop-shadow-size: initial; - --tw-text-shadow-color: initial; - --tw-text-shadow-alpha: 100%; - } - } - } - - .shadow-sm\\/12\\.5 { - --tw-shadow-alpha: 12.5%; - --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, oklab(0% 0 0 / .125)), 0 1px 2px -1px var(--tw-shadow-color, oklab(0% 0 0 / .125)); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - - .inset-shadow-sm\\/12\\.5 { - --tw-inset-shadow-alpha: 12.5%; - --tw-inset-shadow: 0 2px 4px var(--tw-inset-shadow-color, oklab(0% 0 0 / .125)); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - - .drop-shadow-sm\\/12\\.5 { - --tw-drop-shadow-alpha: 12.5%; - --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, oklab(0% 0 0 / .125))); - --tw-drop-shadow: var(--tw-drop-shadow-size); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); - } - - .text-shadow-sm\\/12\\.5 { - --tw-text-shadow-alpha: 12.5%; - text-shadow: 0px 1px 0px var(--tw-text-shadow-color, oklab(0% 0 0 / .125)); - } - - @property --tw-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; - } - - @property --tw-shadow-color { - syntax: "*"; - inherits: false - } - - @property --tw-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100%; - } - - @property --tw-inset-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; - } - - @property --tw-inset-shadow-color { - syntax: "*"; - inherits: false - } - - @property --tw-inset-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100%; - } - - @property --tw-ring-color { - syntax: "*"; - inherits: false - } - - @property --tw-ring-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; - } - - @property --tw-inset-ring-color { - syntax: "*"; - inherits: false - } - - @property --tw-inset-ring-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; - } - - @property --tw-ring-inset { - syntax: "*"; - inherits: false - } - - @property --tw-ring-offset-width { - syntax: ""; - inherits: false; - initial-value: 0; - } - - @property --tw-ring-offset-color { - syntax: "*"; - inherits: false; - initial-value: #fff; - } - - @property --tw-ring-offset-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; - } - - @property --tw-blur { - syntax: "*"; - inherits: false - } - - @property --tw-brightness { - syntax: "*"; - inherits: false - } - - @property --tw-contrast { - syntax: "*"; - inherits: false - } - - @property --tw-grayscale { - syntax: "*"; - inherits: false - } - - @property --tw-hue-rotate { - syntax: "*"; - inherits: false - } - - @property --tw-invert { - syntax: "*"; - inherits: false - } - - @property --tw-opacity { - syntax: "*"; - inherits: false - } - - @property --tw-saturate { - syntax: "*"; - inherits: false - } - - @property --tw-sepia { - syntax: "*"; - inherits: false - } - - @property --tw-drop-shadow { - syntax: "*"; - inherits: false - } - - @property --tw-drop-shadow-color { - syntax: "*"; - inherits: false - } - - @property --tw-drop-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100%; - } - - @property --tw-drop-shadow-size { - syntax: "*"; - inherits: false - } - - @property --tw-text-shadow-color { - syntax: "*"; - inherits: false - } - - @property --tw-text-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100%; - } - " - `) -}) - test('inset-shadow', async () => { expect( await run( From 3b8c09ab019028c79ba0c694d9de5c355af3637a Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 3 Jul 2026 14:16:26 +0200 Subject: [PATCH 3/4] add test cases to `shadow-*`, `drop-shadow-*`, `inset-shadow-*` and `text-shadow-*` --- packages/tailwindcss/src/utilities.test.ts | 28 ++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index e404a0a90dc2..5201878f2e43 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -24053,6 +24053,7 @@ test('filter', async () => { 'invert-[var(--value)]', 'drop-shadow', 'drop-shadow/25', + 'drop-shadow/12.5', 'drop-shadow-xl', 'drop-shadow-multi', 'drop-shadow-[0_0_red]', @@ -24150,6 +24151,13 @@ test('filter', async () => { filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .drop-shadow\\/12\\.5 { + --tw-drop-shadow-alpha: 12.5%; + --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, oklab(0% 0 0 / .125))); + --tw-drop-shadow: drop-shadow(var(--drop-shadow)); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + } + .drop-shadow\\/25 { --tw-drop-shadow-alpha: 25%; --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, oklab(0% 0 0 / .25))); @@ -26901,6 +26909,7 @@ test('text-shadow', async () => { 'text-shadow-[shadow:var(--value)]', 'text-shadow-sm/25', + 'text-shadow-sm/12.5', 'text-shadow-[12px_12px_#0088cc]/25', 'text-shadow-[12px_12px_var(--value)]/25', 'text-shadow-[10px_10px]/25', @@ -26979,6 +26988,11 @@ test('text-shadow', async () => { text-shadow: 12px 12px var(--tw-text-shadow-color, oklab(59.9824% -.067 -.124 / .25)); } + .text-shadow-sm\\/12\\.5 { + --tw-text-shadow-alpha: 12.5%; + text-shadow: 0px 1px 2px var(--tw-text-shadow-color, oklab(0% 0 0 / .125)), 0px 2px 2px var(--tw-text-shadow-color, oklab(0% 0 0 / .125)); + } + .text-shadow-sm\\/25 { --tw-text-shadow-alpha: 25%; text-shadow: 0px 1px 2px var(--tw-text-shadow-color, oklab(0% 0 0 / .25)), 0px 2px 2px var(--tw-text-shadow-color, oklab(0% 0 0 / .25)); @@ -27266,6 +27280,7 @@ test('shadow', async () => { 'shadow-[shadow:var(--value)]', 'shadow-sm/25', + 'shadow-sm/12.5', 'shadow-[12px_12px_#0088cc]/25', 'shadow-[12px_12px_var(--value)]/25', 'shadow-[10px_10px]/25', @@ -27368,6 +27383,12 @@ test('shadow', async () => { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .shadow-sm\\/12\\.5 { + --tw-shadow-alpha: 12.5%; + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, oklab(0% 0 0 / .125)), 0 1px 2px -1px var(--tw-shadow-color, oklab(0% 0 0 / .125)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-sm\\/25 { --tw-shadow-alpha: 25%; --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, oklab(0% 0 0 / .25)), 0 1px 2px -1px var(--tw-shadow-color, oklab(0% 0 0 / .25)); @@ -27742,6 +27763,7 @@ test('inset-shadow', async () => { 'inset-shadow-[12px_12px_#0088cc,12px_12px_var(--value,#0088cc)]', 'inset-shadow-sm/25', + 'inset-shadow-sm/12.5', 'inset-shadow-[12px_12px_#0088cc]/25', 'inset-shadow-[12px_12px_var(--value)]/25', 'inset-shadow-[10px_10px]/25', @@ -27857,6 +27879,12 @@ test('inset-shadow', async () => { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .inset-shadow-sm\\/12\\.5 { + --tw-inset-shadow-alpha: 12.5%; + --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, oklab(0% 0 0 / .125)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .inset-shadow-sm\\/25 { --tw-inset-shadow-alpha: 25%; --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, oklab(0% 0 0 / .25)); From b9550ace266e0aab6fda9cfc0a21247c0628b92e Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 3 Jul 2026 14:27:46 +0200 Subject: [PATCH 4/4] update changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 571d6db7b248..4b4256ce9377 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,7 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Canonicalization: match arbitrary hex colors against theme colors case-insensitively (e.g. `bg-[#fff]` and `bg-[#FFF]` → `bg-white`) ([#20298](https://github.com/tailwindlabs/tailwindcss/pull/20298)) - Prevent Preflight from overriding Firefox's native `iframe:focus-visible` outline styles ([#20292](https://github.com/tailwindlabs/tailwindcss/pull/20292)) - Prevent `theme('colors.foo')` in JS plugins from returning an internal disambiguation object when a CSS theme key shares a prefix with a sibling key like `--color-foo-bar` ([#20299](https://github.com/tailwindlabs/tailwindcss/pull/20299)) -- Support fractional opacity modifiers (e.g. `shadow-sm/12.5`) for `shadow-*`, `text-shadow-*`, `drop-shadow-*`, and `inset-shadow-*` named sizes +- Ensure fractional opacity modifiers work with named shadow sizes like `shadow-sm/12.5`, `text-shadow-sm/12.5`, `drop-shadow-sm/12.5`, and `inset-shadow-sm/12.5` ([#20302](https://github.com/tailwindlabs/tailwindcss/pull/20302)) ## [4.3.2] - 2026-06-26