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

[steveclarke]

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

[wongjn]

So spacing is a generic configuration "namespace" that handles spacing values in v3. This included width and height. While in v4, width no longer uses spacing but uses container first before spacing (#14898). The lg value for w-lg is then the --container-lg value which is included in the default v4 Tailwind configuration.

As per #15146, seems like the migration tool should account for this difference.

[adamwathan]

The w-* utilities do still read from --spacing-* actually but right now they look at --container-* first and then look at --spacing-* if there was no match. I think maybe we should swap the precedence there and check --spacing-* first.

[steveclarke]

The w-* utilities do still read from --spacing-* actually but right now they look at --container-* first and then look at --spacing-* if there was no match. I think maybe we should swap the precedence there and check --spacing-* first.

This makes sense to me. The use case for the named spacing is to make it easier for our team to choose consistent sizing between common elements. Referencing container first in this context is unexpected.

BTW, I changed the migrated spacing variables in the OP to:

  --spacing-xxs: calc(var(--spacing) * 1);
  --spacing-xs: calc(var(--spacing) * 2);
  --spacing-sm: calc(var(--spacing) * 4);
  --spacing-md: calc(var(--spacing) * 6);
  --spacing-lg: calc(var(--spacing) * 8);
  --spacing-xl: calc(var(--spacing) * 12);
  --spacing-2xl: calc(var(--spacing) * 16);

This makes it more resilient against changes to the --spacing variable. Not sure if this would be possible to do in the migrator.

Loving v4 so far!