Migrate default utilities to have a value suffix

CHANGELOG.md

@@ -13,6 +13,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `svh`, `dvh`, `svw`, `dvw`, and `auto` values to all width/height/size utilities ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857))
 - _Upgrade (experimental)_: Migrate `grid-cols-[subgrid]` and `grid-rows-[subgrid]` to `grid-cols-subgrid` and `grid-rows-subgrid` ([#14840](https://github.com/tailwindlabs/tailwindcss/pull/14840))
 - _Upgrade (experimental)_: Support migrating projects with multiple config files ([#14863](https://github.com/tailwindlabs/tailwindcss/pull/14863))
+- _Upgrade (experimental)_: Rename `shadow` to `shadow-sm`, `shadow-sm` to `shadow-xs`, and `shadow-xs` to `shadow-2xs` ([#14875](https://github.com/tailwindlabs/tailwindcss/pull/14875))
+- _Upgrade (experimental)_: Rename `inset-shadow` to `inset-shadow-sm`, `inset-shadow-sm` to `inset-shadow-xs`, and `inset-shadow-xs` to `inset-shadow-2xs` ([#14875](https://github.com/tailwindlabs/tailwindcss/pull/14875))
+- _Upgrade (experimental)_: Rename `drop-shadow` to `drop-shadow-sm` and `drop-shadow-sm` to `drop-shadow-xs` ([#14875](https://github.com/tailwindlabs/tailwindcss/pull/14875))
+- _Upgrade (experimental)_: Rename `rounded` to `rounded-sm` and `rounded-sm` to `rounded-xs` ([#14875](https://github.com/tailwindlabs/tailwindcss/pull/14875))
+- _Upgrade (experimental)_: Rename `blur` to `blur-sm` and `blur-sm` to `blur-xs` ([#14875](https://github.com/tailwindlabs/tailwindcss/pull/14875))
 
 ### Fixed
 

integrations/upgrade/index.test.ts

@@ -71,6 +71,14 @@ test(
         <div
           class="!flex sm:!block bg-gradient-to-t bg-[--my-red] max-w-screen-md ml-[theme(screens.md)]"
         ></div>
+        <!-- Migrate to sm -->
+        <div class="blur shadow rounded inset-shadow drop-shadow"></div>
+
+        <!-- Migrate to xs -->
+        <div class="blur-sm shadow-sm rounded-sm inset-shadow-sm drop-shadow-sm"></div>
+
+        <!-- Migrate to 2xs -->
+        <div class="shadow-xs inset-shadow-xs"></div>
       `,
       'src/input.css': css`
         @tailwind base;
@@ -95,6 +103,14 @@ test(
       <div
         class="flex! sm:block! bg-linear-to-t bg-[var(--my-red)] max-w-[var(--breakpoint-md)] ml-[var(--breakpoint-md)]"
       ></div>
+      <!-- Migrate to sm -->
+      <div class="blur-sm shadow-sm rounded-sm inset-shadow-sm drop-shadow-sm"></div>
+
+      <!-- Migrate to xs -->
+      <div class="blur-xs shadow-xs rounded-xs inset-shadow-xs drop-shadow-xs"></div>
+
+      <!-- Migrate to 2xs -->
+      <div class="shadow-2xs inset-shadow-2xs"></div>
 
       --- ./src/input.css ---
       @import 'tailwindcss';

packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.test.ts

@@ -15,6 +15,23 @@ test.each([
   ['max-lg:hover:decoration-slice', 'max-lg:hover:box-decoration-slice'],
   ['max-lg:hover:decoration-slice!', 'max-lg:hover:box-decoration-slice!'],
   ['max-lg:hover:!decoration-slice', 'max-lg:hover:box-decoration-slice!'],
+
+  ['shadow', 'shadow-sm'],
+  ['shadow-sm', 'shadow-xs'],
+  ['shadow-xs', 'shadow-2xs'],
+
+  ['inset-shadow', 'inset-shadow-sm'],
+  ['inset-shadow-sm', 'inset-shadow-xs'],
+  ['inset-shadow-xs', 'inset-shadow-2xs'],
+
+  ['drop-shadow', 'drop-shadow-sm'],
+  ['drop-shadow-sm', 'drop-shadow-xs'],
+
+  ['rounded', 'rounded-sm'],
+  ['rounded-sm', 'rounded-xs'],
+
+  ['blur', 'blur-sm'],
+  ['blur-sm', 'blur-xs'],
 ])('%s => %s', async (candidate, result) => {
   let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
     base: __dirname,

packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.ts

@@ -13,6 +13,23 @@ const LEGACY_CLASS_MAP = {
   'flex-shrink-0': 'shrink-0',
   'decoration-clone': 'box-decoration-clone',
   'decoration-slice': 'box-decoration-slice',
+
+  shadow: 'shadow-sm',
+  'shadow-sm': 'shadow-xs',
+  'shadow-xs': 'shadow-2xs',
+
+  'inset-shadow': 'inset-shadow-sm',
+  'inset-shadow-sm': 'inset-shadow-xs',
+  'inset-shadow-xs': 'inset-shadow-2xs',
+
+  'drop-shadow': 'drop-shadow-sm',
+  'drop-shadow-sm': 'drop-shadow-xs',
+
+  rounded: 'rounded-sm',
+  'rounded-sm': 'rounded-xs',
+
+  blur: 'blur-sm',
+  'blur-sm': 'blur-xs',
 }
 
 const SEEDED = new WeakSet<DesignSystem>()