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.

[wongjn]

As an FYI, v4 is actually available in https://play.tailwindcss.com and does seem to produce the CSS you are expecting: https://play.tailwindcss.com/8TO3gDUjpq

[RobinMalfait]

Hey!

Tailwind CSS v4 works with nested CSS internally, and you can write your own CSS as nested CSS. Tailwind also emits nested CSS. That is what you see in Tailwind Play that @wongjn is mentioning.

However, what you are locally seeing is that if you use the @tailwindcss/postcss, @tailwindcss/vite or @tailwindcss/cli then there is an additional optimization layer of Lightning CSS that optimizes the output.

They make sure that all modern features we use have prefixes for browser that need it, fallbacks for modern colors are applied and as you noticed they also flatten the CSS.

To make sure Tailwind CSS v4 can be used by most people, we currently target Safari 16.4 which doesn't have full support for nesting yet which is why Lightning CSS flattens the nesting.

So right now this is expected behavior. Will keep this open for now so that we can discuss if we want to allow overriding the Lightning CSS browser targets to change this behavior or not.