Tailwind error when installing shadcn in Vite React App

Question

I was setting up shadcn in a React App using Vite by using the following command:

npx shadcn@latest init

and I received an error (please see error below). I had installed tailwind and did setup as mentioned on official website.

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Error:

No Tailwind CSS configuration found at /Users/mubashirahmed/Code/shadcn-project.
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.

What could be the possible reason for that?

Answer 1

So after some search, I found a fix (from GitHub issues of repo) and the fix is quite simple you just have to add tailwind headers to index.css (global css file) of your project.

@tailwind base;
@tailwind components;
@tailwind utilities;

You can see other discussion here as well: https://github.com/shadcn-ui/ui/issues/4677