[bug]: PostCSS and Tailwind new configuration: components no longer work / Outdated documentation

[SALV19]

Describe the bug

The documentation no longer works, I believe it has to do with the new version of tailwind, or it might just be some error with the documentation. I tried multiple times, and followed tutorials to see if I am messing something up, but in fact the documentation needs some update because of how tailwind works with postcss:
plugin:vite:css] [postcss] It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration

Affected component/components

General function of PostCSS with Tailwind

How to reproduce

Follow Vite's documentation to run shadCN, and it will say the following error:
plugin:vite:css] [postcss] It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration

Codesandbox/StackBlitz link

Can't reproduce in Codesandbox because it doesn't let me use the terminal

Logs

System Info

Browser: Opera, using vscode,

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[nicholas5538]

Have you tried changing postcss to lightningcss? I tried that on my personal Nuxt project which uses Vite as a build tool, I had the same warning until I change it to lightningcss, here a guide on Vite's documentation.

On the Tailwind's documentation, they recommend a different approach for Vite, you're not supposed to use the @tailwindcss/postcss plugin