From e1c74ca9355c1f03f28f0f65bb1e76bb88902326 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sat, 9 Nov 2024 09:32:04 -0500 Subject: [PATCH] Deprecate `shadow-inner` utility (#14933) This PR deprecates the `shadow-inner` value in favor of `inset-shadow-sm` which does the same thing but is composable with other outer shadows. It's still included in the default theme but is registered as `inline reference` and doesn't add any CSS variables to the output. --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> --- CHANGELOG.md | 1 + .../@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap | 1 - packages/tailwindcss/src/__snapshots__/index.test.ts.snap | 1 - packages/tailwindcss/theme.css | 2 +- 4 files changed, 2 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e1240739a920..bbf991a13cac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -64,6 +64,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Revert specificity of `*` variant to match v3 behavior ([#14920](https://github.com/tailwindlabs/tailwindcss/pull/14920)) - Replace `outline-none` with `outline-hidden`, add new simplified `outline-none` utility ([#14926](https://github.com/tailwindlabs/tailwindcss/pull/14926)) - Revert adding borders by default to form inputs ([#14929](https://github.com/tailwindlabs/tailwindcss/pull/14929)) +- Deprecate `shadow-inner` utility ([#14933](https://github.com/tailwindlabs/tailwindcss/pull/14933)) ## [4.0.0-alpha.31] - 2024-10-29 diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index 54a3167bb05f..de154e72b3a5 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -286,7 +286,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a; --shadow-2xl: 0 25px 50px -12px #00000040; - --shadow-inner: inset 0 2px 4px 0 #0000000d; --inset-shadow-2xs: inset 0 1px #0000000d; --inset-shadow-xs: inset 0 1px 1px #0000000d; --inset-shadow-sm: inset 0 2px 4px #0000000d; diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index 980e7d6dfdf3..378b7eca991a 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -285,7 +285,6 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a; --shadow-2xl: 0 25px 50px -12px #00000040; - --shadow-inner: inset 0 2px 4px 0 #0000000d; --inset-shadow-2xs: inset 0 1px #0000000d; --inset-shadow-xs: inset 0 1px 1px #0000000d; --inset-shadow-sm: inset 0 2px 4px #0000000d; diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css index 266dad4fd8f0..c309d273c49d 100644 --- a/packages/tailwindcss/theme.css +++ b/packages/tailwindcss/theme.css @@ -317,7 +317,6 @@ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); - --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); /* Inset shadows */ --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05); @@ -463,6 +462,7 @@ @theme default inline reference { --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06); --radius: 0.25rem; }