[v4] Problem with custom spacing - v4 is referencing var(--container-*) instead of var(--spacing-*)

[adamwathan]

I think we should probably read from --spacing-* before reading from --container-* for most of these utilities to solve this.

Discussed in #15145

^{Originally posted by steveclarke November 23, 2024}
In my Tailwind v3 project I have the following custom named spacing:

  theme: {
    extend: {
      spacing: {
        xxs: defaultTheme.spacing[1],
        xs: defaultTheme.spacing[2],
        sm: defaultTheme.spacing[4],
        md: defaultTheme.spacing[6],
        lg: defaultTheme.spacing[8],
        xl: defaultTheme.spacing[12],
        "2xl": defaultTheme.spacing[16],
      }
    },
  },

I'm then able to use class="w-lg h-lg" in my project. In version 3, w-lg and w-hg are correctly being set to width: 2rem, and height; 2rem, respectively.

When I upgraded to v4, the above configuration got converted to:

@theme {
  --spacing-xxs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
}

Now my h-lg continues to work as expected. However, my w-lg is using the container-lg value. The generated CSS looks like:

  .h-lg {
    height: var(--spacing-lg);
  }
  .w-lg {
    width: var(--container-lg);
  }

Notice that h-lg references the CSS variable --spacing-lg, but w-12 references the CSS variable --container-lg

This causes content width to be incorrect after the upgrade. Wondering if this is a known issue?

---

For the following HTML:

      <div class="flex gap-4 p-10">
        <div class="w-lg h-lg debug flex justify-center items-center">1</div>
        <div class="w-8 h-8 debug flex justify-center items-center">2</div>
      </div>

V3

V4