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.

[ngbrown]

+1 on customizing the Lightning CSS browser target.

For reasons, I am still targeting back to Safari 15.8, since we have iPads that won't update to the newer OS/browser.

[hichemfantar]

similar issue here where the hover css is being generated outside the nesting parent
i'm trying to use tailwind for a library where users can import the css and it"s scoped by the id but i can't do it because of this issue.
breaks with media queries as well

v3 https://play.tailwindcss.com/4L4HQiVNmh

seems even more broken in v4

[hichemfantar]

actually looks like my usecase was resolved by the selector strategy

edit: actually it seems like the base rules generated by tw are not scoped so the only solution is to ditch the selector strategy property, remove nesting, generate the css with tw cli, wrap everything manually with #id, then do an scss run to properly nest everything.

[hichemfantar]

is there a way make the selector strategy support base styles? i really wanna use tw for my lib and avoid css modules
https://stackoverflow.com/a/74501200

[hichemfantar]

actually looks like the issue is with escaped characters postcss/postcss-nested#169

[finfin]

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.

From the output CSS, nesting did not seem to be flatted with v4.0.0-beta.4

https://play.tailwindcss.com/PAYz5bRbUy

I added a @variant dark (&:where(.dark, .dark *)); here, with a class of dark:text-white

but the generated class is

  .dark\:text-white {
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }