Remove --drop-shadow-none from default theme (#14847)

This PR removes `--drop-shadow-none` from the default theme which
shouldn't ever have been there since we handle all `*-none` utilities as
static/permanent utilities in the framework now.

I've added `drop-shadow-none` as an explicit static utility, and also
slightly improved test coverage for `getClassList` around drop shadows
while touching this part of the code.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

CHANGELOG.md

@@ -15,6 +15,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - _Upgrade (experimental)_: Install `@tailwindcss/postcss` next to `tailwindcss` ([#14830](https://github.com/tailwindlabs/tailwindcss/pull/14830))
 - _Upgrade (experimental)_: Remove whitespace around `,` separator when print arbitrary values ([#14838](https://github.com/tailwindlabs/tailwindcss/pull/14838))
 
+### Changed
+
+- Remove `--drop-shadow-none` from the default theme in favor of a static `drop-shadow-none` utility ([#14847](https://github.com/tailwindlabs/tailwindcss/pull/14847))
+
 ## [4.0.0-alpha.31] - 2024-10-29
 
 ### Added

packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

@@ -296,7 +296,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --drop-shadow-lg: 0 10px 8px #0000000a, 0 4px 3px #0000001a;
     --drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014;
     --drop-shadow-2xl: 0 25px 25px #00000026;
-    --drop-shadow-none: 0 0 #0000;
     --spacing-px: 1px;
     --spacing-0: 0px;
     --spacing-0_5: .125rem;

packages/tailwindcss/src/__snapshots__/index.test.ts.snap

@@ -295,7 +295,6 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --drop-shadow-lg: 0 10px 8px #0000000a, 0 4px 3px #0000001a;
   --drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014;
   --drop-shadow-2xl: 0 25px 25px #00000026;
-  --drop-shadow-none: 0 0 #0000;
   --spacing-px: 1px;
   --spacing-0: 0px;
   --spacing-0_5: .125rem;

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -1900,6 +1900,8 @@ exports[`getClassList 1`] = `
   "divide-y-4",
   "divide-y-8",
   "divide-y-reverse",
+  "drop-shadow-none",
+  "drop-shadow-sm",
   "duration-100",
   "duration-1000",
   "duration-150",

packages/tailwindcss/src/intellisense.test.ts

@@ -21,6 +21,7 @@ function loadDesignSystem() {
   theme.add('--perspective-dramatic', '100px')
   theme.add('--perspective-normal', '500px')
   theme.add('--opacity-background', '0.3')
+  theme.add('--drop-shadow-sm', '0 1px 1px rgb(0 0 0 / 0.05)')
   return buildDesignSystem(theme)
 }
 

packages/tailwindcss/src/utilities.ts

@@ -3655,6 +3655,11 @@ export function createUtilities(theme: Theme) {
       },
     ])
 
+    staticUtility('drop-shadow-none', [
+      filterProperties,
+      ['--tw-drop-shadow', ' '],
+      ['filter', cssFilterValue],
+    ])
     functionalUtility('drop-shadow', {
       themeKeys: ['--drop-shadow'],
       handle: (value) => [

packages/tailwindcss/theme.css

@@ -331,7 +331,6 @@
   --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-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
-  --drop-shadow-none: 0 0 #0000;
 
   /* Spacing */
   --spacing-px: 1px;