`contain-layout` does not seem to work v4 about tailwindcss HOT 2 CLOSED

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.

from tailwindcss.

@wongjn Awesome makes sense, thanks

from tailwindcss.