Why BEM Nesting Breaks in Tailwind v4

So today I spent sometime debugging why some CSS styles weren't applying. Turns out, Tailwind v4 quietly broke something on was working Tailwind v3. What happened I had CSS like this: .dropdown { background: white; &--open { background: blue; } &__icon { width: 16px; } } In Tailwind v3, this worked perfectly. It would compile to: .dropdown { background: white; } .dropdown--open { background: blue; } .dropdown__icon { width: 16px; } But in Tailwind v4? Nothing. No error. No warning. It just silently does nothing. Meanwhile, this still works fine: .dropdown { &:hover { background: gray; } & .child { color: red; } } Wait, what? &:hover works but &--open doesn't? Why?? The reason It comes down to native CSS nesting vs SASS nesting. Native CSS (what browsers understand) supports & only for: Pseudo-classes: &:hover, &:focus, &::before Combinators: & .child, & > .child, & + .sibling Chaining: &.another-class SASS added an extra featur