Nested CSS doesn't compile?

[donnervetter]

Alright it's either i'm missing something fundamental or something simply doesn't work as intended.

Nested CSS doesn't compile and in the output it still comes out as nested. It seems to work as intended because the newest browsers already support nested CSS but the problem becomes visible on older devices that do not support it.

I've followed installation steps from the website in the Stackblitz demo and managed to reproduce my issue.
To reproduce: launch Tailwind on Stackblitz, in a separate terminal type "npm run tailwind".
Then try editing some nested styles in input.css.

As you can see, the output file contains nested styles:
body { h1 { background: red; } }

https://stackblitz.com/edit/stackblitz-starters-jqioyl?file=output.css

Edit: OMG, I think i've got it. Apparently Tailwind CLI doesn't have anything to do with css processing. If you want a css compiler, you have to integrate it yourself

[adamwathan]

Make sure you add the --postcss flag to your CLI command so that your PostCSS configuration is picked up and respected:

{
  "scripts": {
    "start": "servor --reload",
    "tailwind": "npx tailwindcss -i ./input.css -o ./output.css --watch --postcss"
  },
  "devDependencies": {
    "postcss-import": "^16.1.0",
    "postcss-nesting": "^12.1.5",
    "tailwindcss": "^3.4.4"
  },
  "dependencies": {
    "servor": "^4.0.2"
  }
}

[donnervetter]

Oh my god, i've spent entire day yesterday trying various ways to understand and eventually setting up a separate task for postcss to recompile the file... I haven't seen this option in documentation anywhere. :(

Thank you so much @adamwathan