tailwindlabs
Support for natively nested CSS not working as expected.
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.
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
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.
+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.
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
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.
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
actually looks like the issue is with escaped characters https://github.com/postcss/postcss-nested/issues/169
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/viteor@tailwindcss/clithen 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);
}
}
Hey!
Right now we do rely on a specific set of browser versions to ensure that all features in Tailwind CSS v4 work as expected: https://tailwindcss.com/docs/compatibility#browser-support
By default in development (and on Tailwind Play) we don't use Lightning CSS, which means that the generated CSS is using nesting. Once you create a production build, Lightning CSS will optimize the output and minify the CSS.
Going to close this for now since there are no immediate plans for changing the required browser versions.
Just leaving here that when using the CLI, the argument --optimize can be used to flatten nested CSS. I would suggest adding how to generate production builds in the docs. Thanks!
the argument
--optimizecan be used to flatten nested CSS
@FMCorz Thank you so much! I was looking for it for hours and was about to switch to tailwind as a post-css plugin. I'm not sure why this arg isn't mentioned anywhere. Is this arg supposed to be used or it might be removed in the future minor versions?
