[docs]: the documentation incorrectly mixes the installation steps for TailwindCSS v3 and v4

[rozsazoltan]

I'm not an experienced Shadcn user. I helped people on StackOverflow clarify the confusion caused by the documentation. See:

• Error Installing Shadcn UI and Tailwind CSS in React.js Project with Vite

I couldn't really find where to report outdated information in the documentation. So, I'd like to mention it here.

Shadcn with Vite

The Vite installation steps do mention the canary version, but if someone doesn't click through, they will encounter the command

npm install tailwindcss postcss autoprefixer

which is incorrect.

This assumes a v3-specific installation, but npm install tailwindcss will install v4 by default.
The correct v3-specific installation command is:

npm install tailwindcss@3 postcss autoprefixer

See:

• Get started TailwindCSS v3 with Vite - TailwindCSS v3 Docs
• Get started TailwindCSS v4 with Vite - TailwindCSS v4 Docs

Shadcn with Remix

It also incorrectly suggests the installation steps. Specifically, it recommends the latest version while displaying v3 installation steps.

npm install -D tailwindcss@latest autoprefixer@latest

The installation should be corrected to use @3 here as well.

npm install -D tailwindcss@3 autoprefixer@latest

Shadcn with Astro (just a note)

Just leaving a note here that the entire installation process breaks from v4 onward. Starting from v4, TailwindCSS comes with a Vite plugin, making it installable alongside Astro using that. Additionally, preprocessors are no longer supported in v4, while Astro's v3 plugin still explicitly recommends them. Fortunately, the v3 installation remains the same and still works. See:

• @astrojs/tailwind: Deprecated from TailwindCSS v4 - Astro Docs
• Get started TailwindCSS with Astro - TailwindCSS v4 Docs
• Styles and CSS with TailwindCSS v3 - Astro Docs