From 6e2b60e84a6054bb1397259e7c01fa11aa381621 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Sun, 3 May 2026 01:00:56 +0200
Subject: [PATCH] Do not generate CSS for `start` and `end` (#20003)

This PR fixes a bug where CSS was generated for `start` and `end`. This
was accidentally introduced when we moved the `start-*` and `end-*`
utilities to the legacy utilities. But this meant that we now generate
CSS for `start` and `end` even if no value is provided.

Fixes: #20002

## Test plan

1. Updated the tests to make sure of `--spacing: 0.25rem` which made the
tests fail, and are fixed again by applying the fix.
2. Other tests are still passing
---
 CHANGELOG.md                                  |  1 +
 .../src/compat/legacy-utilities.test.ts       | 20 +++++++++----------
 .../src/compat/legacy-utilities.ts            |  7 +------
 3 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3c7025f0c..6991c744c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Upgrade: don’t migrate inline `style` attributes ([#19918](https://github.com/tailwindlabs/tailwindcss/pull/19918))
 - Allow multiple `@utility` definitions with the same name but different value types ([#19777](https://github.com/tailwindlabs/tailwindcss/pull/19777))
 - Export missing `PluginWithConfig` type from `tailwindcss/plugin` to fix errors when inferring plugin config types ([#19707](https://github.com/tailwindlabs/tailwindcss/pull/19707))
+- Ensure `start` and `end` legacy utilities without values do not generate CSS ([#20003](https://github.com/tailwindlabs/tailwindcss/pull/20003))
 
 ## [4.2.4] - 2026-04-21
 
diff --git a/packages/tailwindcss/src/compat/legacy-utilities.test.ts b/packages/tailwindcss/src/compat/legacy-utilities.test.ts
index 24222f882..d76aa09ab 100644
--- a/packages/tailwindcss/src/compat/legacy-utilities.test.ts
+++ b/packages/tailwindcss/src/compat/legacy-utilities.test.ts
@@ -217,7 +217,7 @@ test('start', async () => {
     await compileCss(
       css`
         @theme {
-          --spacing-4: 1rem;
+          --spacing: 0.25rem;
           --inset-shadowned: 1940px;
         }
         @tailwind utilities;
@@ -235,12 +235,12 @@ test('start', async () => {
     ),
   ).toMatchInlineSnapshot(`
     ":root, :host {
-      --spacing-4: 1rem;
+      --spacing: .25rem;
       --inset-shadowned: 1940px;
     }
 
     .-start-4 {
-      inset-inline-start: calc(var(--spacing-4) * -1);
+      inset-inline-start: calc(var(--spacing) * -4);
     }
 
     .-start-full {
@@ -252,7 +252,7 @@ test('start', async () => {
     }
 
     .start-4 {
-      inset-inline-start: var(--spacing-4);
+      inset-inline-start: calc(var(--spacing) * 4);
     }
 
     .start-\\[4px\\] {
@@ -275,7 +275,7 @@ test('start', async () => {
     await compileCss(
       css`
         @theme reference {
-          --spacing-4: 1rem;
+          --spacing: 0.25rem;
           --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
         }
         @tailwind utilities;
@@ -304,7 +304,7 @@ test('end', async () => {
     await compileCss(
       css`
         @theme {
-          --spacing-4: 1rem;
+          --spacing: 0.25rem;
           --inset-shadowned: 1940px;
         }
         @tailwind utilities;
@@ -322,12 +322,12 @@ test('end', async () => {
     ),
   ).toMatchInlineSnapshot(`
     ":root, :host {
-      --spacing-4: 1rem;
+      --spacing: .25rem;
       --inset-shadowned: 1940px;
     }
 
     .-end-4 {
-      inset-inline-end: calc(var(--spacing-4) * -1);
+      inset-inline-end: calc(var(--spacing) * -4);
     }
 
     .-end-full {
@@ -339,7 +339,7 @@ test('end', async () => {
     }
 
     .end-4 {
-      inset-inline-end: var(--spacing-4);
+      inset-inline-end: calc(var(--spacing) * 4);
     }
 
     .end-\\[4px\\] {
@@ -362,7 +362,7 @@ test('end', async () => {
     await compileCss(
       css`
         @theme reference {
-          --spacing-4: 1rem;
+          --spacing: 0.25rem;
           --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
         }
         @tailwind utilities;
diff --git a/packages/tailwindcss/src/compat/legacy-utilities.ts b/packages/tailwindcss/src/compat/legacy-utilities.ts
index dc53e4217..8e7829035 100644
--- a/packages/tailwindcss/src/compat/legacy-utilities.ts
+++ b/packages/tailwindcss/src/compat/legacy-utilities.ts
@@ -126,12 +126,7 @@ export function registerLegacyUtilities(designSystem: DesignSystem) {
 
     function handleInset({ negative }: { negative: boolean }) {
       return (candidate: Extract<import('../candidate').Candidate, { kind: 'functional' }>) => {
-        if (!candidate.value) {
-          if (candidate.modifier) return
-          let value = designSystem.theme.resolve(null, ['--inset', '--spacing'])
-          if (value === null) return
-          return [decl(property, negative ? `calc(${value} * -1)` : value)]
-        }
+        if (candidate.value === null) return
 
         if (candidate.value.kind === 'arbitrary') {
           if (candidate.modifier) return