[bug]: Discrepancies in Vite Installation Steps for Shadcn and TailwindCSS

[Keith-Web3]

Describe the bug

When following shadcn's documentation to set up the library in a vite project, the steps for configuring tailwindcss result in errors that prevent the project from running. These errors can only be resolved by consulting the tailwindcss official docs and following their installation instructions. The primary issue seems to be around configuration settings that are either missing or misaligned between the two documentation.

Affected component/components

All

How to reproduce

1. Create a new react-ts project with typescript.
2. Go to the shadcn vite setup docs.
3. Follow the steps to setup shadcn in your vite app.
4. Notice all the inconsistencies.

Codesandbox/StackBlitz link

https://github.com/Keith-Web3/shadcn-issue-reprod

Logs

No Tailwind CSS configuration found at `path to project folder`
It is likely you do not have Tailwind CSS installed or have an invalid configuration.
Install Tailwind CSS then try again.
Visit https://tailwindcss.com/docs/guides/vite to get started.

System Info

Windows 11

Before submitting

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

[matcastaneda]

I think what you are missing is modifying the index.css file, adding the base directives, components and utilities, plus adding the paths to all your template files in your tailwind.config.js file.

[guerreroderrick]

I had the same error in the shadcn init command until I edited the index.css file as noted in https://tailwindcss.com/docs/guides/vite. The shadcn instructions at https://ui.shadcn.com/docs/installation/vite seem to include instructions to install tailwind, so it's surprising that they're missing this step or a link to more complete tailwind installation steps.

[Keith-Web3]

I think what you are missing is modifying the index.css file, adding the base directives, components and utilities, plus adding the paths to all your template files in your tailwind.config.js file.

Yeah, I was able to fix it by following those steps but I had to consult the tailwind docs first to identify the missing pieces which I feel shouldn’t be necessary for a seamless setup experience. It would be great if those steps were included directly in shadcn's docs to prevent other users from running into the same issue.