[bug]: New Shadcn CLI for VITE React Projects - No Tailwind CSS configuration found

[dmcleish91]

Describe the bug

When following the vite project setup guide you will get an error when you get to the step where you run the pnpm dlx shadcn@latest init command. This is due to the index.css missing the tailwind css headers. The documentation needs to be updated at step 2 to.

I've created a pull request with the fix here #4676

Affected component/components

None

How to reproduce

1. Follow Documentation for setting up vite react project.
2. Get to step 6 and run the command to get the error.

Codesandbox/StackBlitz link

No response

Logs

PS C:\Users\Dwight\Documents\Develop\Typescript\React\pet-form-lhs> npx shadcn@latest init
✔ Preflight checks.
✔ Verifying framework. Found Vite.
✖ Validating Tailwind CSS.
✔ Validating import alias.

No Tailwind CSS configuration found at C:\Users\Dwight\Documents\Develop\Typescript\React\pet-form-lhs.
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

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

[Amankori2307]

I am also facing the same issue

[KYPHI-HQ]

same here

[eliasuruz]

I am also facing the same issue

[shubhaemk]

If someone stumbles upon this issue from Google, add the following tailwind headers to index.css of you project -

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

[MihailKirkov]

same issue

[MangelSanabria]

Same issue in Astro Project

[raphaeleliass]

Just add the following to your index.css:

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

And add the following to your tailwind.confirg.js

 content: ["./src/**/*.{js,jsx,ts,tsx}"],

[hbijen]

If someone stumbles upon this issue from Google, add the following tailwind headers to index.css of you project -

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

In my case I added ithem in src/styles/globals.css

[happygoluckycodeeditor]

The new documentation is completely messed up haha, The answer above is great!

[malik991]

just add these lines in index.css or in global.css

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

and than you need to add the following in tailwind.config.css

content: ["./src//*.{js,jsx,ts,tsx}"],**

otherwise tailwind will not properly load.

[aghwotu]

I have the same issue with React + Vite using SCSS and TypeScript.
TailwindCSS is already installed and working.
This is the error I am getting:

✔ Preflight checks.
✔ Verifying framework. Found Vite.
✖ Validating Tailwind CSS.
✔ Validating import alias.

No Tailwind CSS configuration found at /project-folder-path.
It is likely you do not have Tailwind CSS installed or have an invalid configuration.
Install Tailwind CSS then try again.

[Amankori2307]

People who are using SCSS for styling in React + Vite + TypeScript, you can just create an index.css in the src folder where main file is and just add the mentioned code and imprort this file in your main.ts/index.ts

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

[aghwotu]

People who are using SCSS for styling in React + Vite + TypeScript, you can just create an index.css in the src folder where main file is and just add the mentioned code and imprort this file in your main.ts/index.ts

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

@Amankori2307 Thank you, this worked!