Support for natively nested CSS not working as expected.

[boutzamat]

What version of Tailwind CSS are you using?

v4.0.0-alpha.28

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

Vite 5.4.8

What version of Node.js are you using?

20.11.0

What browser are you using?

Chrome (latest as of today)

What operating system are you using?

MacOS

Reproduction URL

This is currently on localhost. Since v4 isn't available in the playground, i can't provide a reproduction URL. If needed, i can publish the current project to a public URL.

Describe your issue

Testing out v4-alpha, and i was expecting native CSS nesting to be supported, as it's supported by all browsers and has become a web standard. However, it seems that the output (production) CSS file are creating a new line for each selector, instead of nesting them as in the raw CSS.

Input (src/app.css) body { @apply bg-red-500; img { @apply w-8; } a { @apply underline; } }

Output (dist/app.css) body { background-color: var(--color-red-500, oklch(0.637 0.237 25.331)); } body img { width: var(--spacing-8, 2rem); } body a { text-decoration-line: underline; }

Expected: body { background-color: var(--color-red-500, oklch(0.637 0.237 25.331)); img { width: var(--spacing-8, 2rem); } a { text-decoration-line: underline; } }

The current output is creating alot of extra code, that will create unnecessary repeated CSS. I read somewhere that TW4 would support nested CSS, but wether it's in the output as expected, i don't know, so i thought i'd open an issue just in case.