Tailwind CSS does not work with native nested CSS

[stefnotch]

What version of Tailwind CSS are you using?

3.4.1

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

Vite 5.2.2 and postcss 8.4.38, following the https://tailwindcss.com/docs/guides/vite tutorial

https://caniuse.com/css-nesting

What version of Node.js are you using?

v18.14.0

What browser are you using?
Firefox 123

What operating system are you using?

Windows 11

Reproduction URL

A freshly created project, set up according to the guide above. And with a single component that demonstrates the issue
my-project.zip

Steps to reproduce

1. Download it
2. npm install
3. npm run dev
4. Go to the website
5. The console shows the following warning

[vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting
3  |  .cat {
4  |    background-color: blue;
5  |    & .dog {
   |    ^^^^^^^^
6  |      background-color: red;
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^
7  |    }
   |  ^^^

Describe your issue
When I use nested CSS, which is widely supported https://caniuse.com/css-nesting , TailwindCSS or Vite kicks in and displays a warning. I consider that to be an issue, since I would hope that excellent tools are compatible with the latest browser standards.

[adamwathan]

Hey! We've loosened up our error handling around nesting here: #13325

This will be in the next patch release (v3.4.2) which will likely be out this week. In the mean time you can install our insiders build to try it right away:

npm install tailwindcss@insiders

The one situation we still need to error is if you try to @apply a class that uses nesting, for example:

.custom-parent {
  .custom-child {
    display: flex;
  }
}

.foo {
  @apply custom-parent;
}

@apply is just not smart enough in the v3 engine to deal with this situation properly, would require a full overhaul of how everything works to fix.

Thankfully we did that full overhaul for the v4 codebase which is currently in alpha, and this situation will work there once we add support for using @apply with custom CSS (not done yet).

So going to close this one as fixed, and expect things to get better still in this department with the upcoming v4 release 👍🏻

[stefnotch]

That's awesome to hear, thank you very much for this quick fix!