Ensure spacing utilities with no value (e.g. px) don't generate CSS (…

…#14911)

This PR fixes an issue where utilities like `px` would read the
`--spacing` variable and use its value as the utility value, similar to
how `shadow` reads `--shadow` by default. That doesn't make sense for
these utilities since `--spacing` is reserved as a special multiplier
variable.

---------

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

CHANGELOG.md

@@ -32,6 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Rebase `url()` inside imported CSS files when using Vite ([#14877](https://github.com/tailwindlabs/tailwindcss/pull/14877))
 - Ensure that CSS transforms from other Vite plugins correctly work in full builds (e.g. `:deep()` in Vue) ([#14871](https://github.com/tailwindlabs/tailwindcss/pull/14871))
 - Don't unset keys like `--inset-shadow-*` when unsetting keys like `--inset-*` ([#14906](https://github.com/tailwindlabs/tailwindcss/pull/14906))
+- Ensure spacing utilities with no value (e.g. `px` or `translate-y`) don't generate CSS ([#14911](https://github.com/tailwindlabs/tailwindcss/pull/14911))
 - _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))
 - _Upgrade (experimental)_: Fix crash during upgrade when content globs escape root of project ([#14896](https://github.com/tailwindlabs/tailwindcss/pull/14896))

packages/tailwindcss/src/utilities.test.ts

@@ -16124,6 +16124,18 @@ describe('spacing utilities', () => {
       }"
     `)
   })
+
+  test('spacing utilities must have a value', async () => {
+    let { build } = await compile(css`
+      @theme reference {
+        --spacing: 4px;
+      }
+      @tailwind utilities;
+    `)
+    let compiled = build(['px'])
+
+    expect(optimizeCss(compiled).trim()).toEqual('')
+  })
 })
 
 describe('custom utilities', () => {

packages/tailwindcss/src/utilities.ts

@@ -278,7 +278,10 @@ export function createUtilities(theme: Theme) {
         // `defaultValue` (for candidates like `grow` that have no theme values)
         // or a bare theme value (like `--radius` for `rounded`). No utility
         // will ever support both of these.
-        value = desc.defaultValue ?? theme.resolve(null, desc.themeKeys ?? [])
+        value =
+          desc.defaultValue !== undefined
+            ? desc.defaultValue
+            : theme.resolve(null, desc.themeKeys ?? [])
       } else if (candidate.value.kind === 'arbitrary') {
         if (candidate.modifier) return
         value = candidate.value.value
@@ -394,6 +397,7 @@ export function createUtilities(theme: Theme) {
       themeKeys,
       supportsFractions,
       supportsNegative,
+      defaultValue: null,
       handleBareValue: ({ value }) => {
         let multiplier = theme.resolve(null, ['--spacing'])
         if (!multiplier) return null