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 feature on top: using & to concatenate stri