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

@@ -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
 

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;

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;

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;
 }