[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!

[nixpare]

Hi there, sorry for jumping in after some time, but I stumbled on a problem: I started using tailwindcss a few months ago, and I started directly in v4. Today I was messing around my global.css and I was trying to improve consistency with margins and paddings and so I did the same as above. But then the page broke because the sections (which have max-w-2xl in some cases) have shrunk because now max-w-2xl uses --spacing-2xl instead of the old --container-2xl.

The question is: isn't this confusing? And also i find it quite non-logical, it's probably because of my lack of experience (and I would love some suggestions on how to handle this), but when I think about "spacing" in the context of margins and paddings, I don't consider them in the same way as "element width or size", a small padding on the left of a text is not the same as a small button (I know it's not the best example, but I hope you can get the idea behind).

And btw the website is stating something different from the actual behavior (https://tailwindcss.com/docs/theme#theme-variable-namespaces).

Thanks in advance for the help and for the amazing product that tailwindcss is.