diff --git a/CHANGELOG.md b/CHANGELOG.md index 247fe492c465..621ab7a62980 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - _Upgrade (experimental)_: Ensure migrating to the `in-*` requires a descendant selector ([#15054](https://github.com/tailwindlabs/tailwindcss/pull/15054)) +### Changed + +- Use single drop shadow values instead of multiple ([#15056](https://github.com/tailwindlabs/tailwindcss/pull/15056)) + ## [4.0.0-alpha.35] - 2024-11-20 ### Added diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index 17c977f96e35..8c3e73afe0f5 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -335,10 +335,10 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` --inset-shadow-xs: inset 0 1px 1px #0000000d; --inset-shadow-sm: inset 0 2px 4px #0000000d; --drop-shadow-xs: 0 1px 1px #0000000d; - --drop-shadow-sm: 0 1px 2px #0000001a, 0 1px 1px #0000000f; - --drop-shadow-md: 0 4px 3px #00000012, 0 2px 2px #0000000f; - --drop-shadow-lg: 0 10px 8px #0000000a, 0 4px 3px #0000001a; - --drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014; + --drop-shadow-sm: 0 1px 2px #00000026; + --drop-shadow-md: 0 3px 3px #0000001f; + --drop-shadow-lg: 0 4px 4px #00000026; + --drop-shadow-xl: 0 9px 7px #0000001a; --drop-shadow-2xl: 0 25px 25px #00000026; --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index cbb08e74d084..29d9523a445d 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -334,10 +334,10 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using --inset-shadow-xs: inset 0 1px 1px #0000000d; --inset-shadow-sm: inset 0 2px 4px #0000000d; --drop-shadow-xs: 0 1px 1px #0000000d; - --drop-shadow-sm: 0 1px 2px #0000001a, 0 1px 1px #0000000f; - --drop-shadow-md: 0 4px 3px #00000012, 0 2px 2px #0000000f; - --drop-shadow-lg: 0 10px 8px #0000000a, 0 4px 3px #0000001a; - --drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014; + --drop-shadow-sm: 0 1px 2px #00000026; + --drop-shadow-md: 0 3px 3px #0000001f; + --drop-shadow-lg: 0 4px 4px #00000026; + --drop-shadow-xl: 0 9px 7px #0000001a; --drop-shadow-2xl: 0 25px 25px #00000026; --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 420377bd08b4..cca68670174b 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -13613,8 +13613,8 @@ test('filter', async () => { css` @theme { --blur-xl: 24px; - --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06); - --drop-shadow-xl: 0 20px 13px rgb(0 0 0 / 0.03), 0 8px 5px rgb(0 0 0 / 0.08); + --drop-shadow: 0 1px 1px rgb(0 0 0 / 0.05); + --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1); } @tailwind utilities; `, @@ -13639,6 +13639,7 @@ test('filter', async () => { 'invert', 'invert-0', 'invert-[var(--value)]', + 'drop-shadow', 'drop-shadow-xl', 'drop-shadow-[0_0_red]', 'saturate-0', @@ -13653,8 +13654,8 @@ test('filter', async () => { ).toMatchInlineSnapshot(` ":root { --blur-xl: 24px; - --drop-shadow: 0 1px 2px #0000001a, 0 1px 1px #0000000f; - --drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014; + --drop-shadow: 0 1px 1px #0000000d; + --drop-shadow-xl: 0 9px 7px #0000001a; } .blur-\\[4px\\] { @@ -13692,6 +13693,11 @@ 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 { + --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-\\[0_0_red\\] { --tw-drop-shadow: drop-shadow(0 0 red); 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, ); diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css index 9e443f5afcad..c46f037f2e4c 100644 --- a/packages/tailwindcss/theme.css +++ b/packages/tailwindcss/theme.css @@ -367,10 +367,10 @@ --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05); - --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06); - --drop-shadow-md: 0 4px 3px rgb(0 0 0 / 0.07), 0 2px 2px rgb(0 0 0 / 0.06); - --drop-shadow-lg: 0 10px 8px rgb(0 0 0 / 0.04), 0 4px 3px rgb(0 0 0 / 0.1); - --drop-shadow-xl: 0 20px 13px rgb(0 0 0 / 0.03), 0 8px 5px rgb(0 0 0 / 0.08); + --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15); + --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12); + --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15); + --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15); --ease-in: cubic-bezier(0.4, 0, 1, 1);