`contain-layout` does not seem to work v4

[Tiedye]

What version of Tailwind CSS are you using?

For example: v4.0.0-alpha.14

What build tool (or framework if it abstracts the build tool) are you using?

For example: vite 5.2.8

What version of Node.js are you using?

For example: v20.11.1

What browser are you using?

For example: Edge, Firefox

What operating system are you using?

For example: Windows

Reproduction URL
Stackblitz was being problematic when I tried to setup a tailwind 4 project, its a simple issue so hopefully I can skip this.

Describe your issue

The contain-layout class does not seem to work:


Removing the inactive variables causes the style to be applied correctly:

Behaves the same in both Edge and Firefox.

If I may, why are these classes not implemented like they were in #12747 ? I don't understand what the additional complexity achieves.

[wongjn]

If I may, why are these classes not implemented like they were in #12747? I don't understand what the additional complexity achieves.

The CSS variable approach means we can combine values together. If we compare #12747 with the current implementation:

<div class="contain-size contain-layout">

#12747

.contain-layout {
  contain: layout;
}
.contain-size {
  contain: size;
}

The contain-size rule would override the value of contain-layout since they both set contain. This means the final resolved CSS value of contain would be size.

CSS Variables

.contain-layout {
  --tw-contain-layout: layout;
  contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );
}
.contain-size {
  --tw-contain-size: size;
  contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );
}

The contain-size rule's contain value would again override contain-layout. However, the CSS variable values remain intact from contain-layout. This means the final resolved CSS value of contain would be size layout.

Read more about this concept in this blog post by Adam Wathan.

[Tiedye]

@wongjn Awesome makes sense, thanks