[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 https://github.com/shadcn-ui/ui/pull/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

• [X] I've made research efforts and searched the documentation
• [X] 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!

[ZODIAC3K]

1. Update your /src/index.css file: Add the following Tailwind directives:

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

2. Configure your tailwind.config.js file: Ensure that the content property includes all relevant file extensions. It should look like this:

   module.exports = {
     // other configurations
     content: ["./src/**/*.{js,jsx,ts,tsx}"],
     // other configurations
   };
   

[CYBRSMTH]

Can confirm the fixes outlined here work.

[David-Sungkyu-Kim]

After install, you can change aliases, paths in component.json with your vite config.

[mudasirpandith]

I am not able to add shadcn.

[im-sivaprakash]

It works after following https://tailwindcss.com/docs/guides/vite

[nikolas-beckel]

Thanks Bro, I faced the same issue.

[guillaumeduhan]

Alright, if you are still struggling, here's a solution.

1. My missing part was: I had no globals.[css,scss,sass] at the root of project. I created it.
2. I added the tailwindcss markers:

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

3. Ran again npx shadcn@latest init

It launched the shadcn CLI.

[CodeFromRahul]

If you are using js rather then ts then you may come through this problem solution:Enter this in src/index.css @tailwind base; @tailwind components; @tailwind utilities;

[danabdn]

Same here - first time trying to use ShadUI with React/Remix/Vite/Tailwind for building a Shopify storefront.

Basic init

  [email protected]
Ok to proceed? (y) y
✔ Preflight checks.
✔ Verifying framework. Found Remix.
✖ Validating Tailwind CSS.
✖ Validating import alias.

No Tailwind CSS configuration found at C:\GitHub\XXXX\hydrogen\hydrogen.
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/remix to get started.

No import alias found in your tsconfig.json file.
Visit https://ui.shadcn.com/docs/installation/remix to learn how to set an import alias.

Firstly, I most definitely have Tailwind installed and is working like a dream.

Secondly, the second step in the instructions in the second link above regarding an import alias, is part of the problem. Step 2 in those instructions causes the above error - Chicken / Egg situtation.

I do not use the @tailwind references as above, but instead use the below (which I believe is just as valid and recommended for use with postcss ...and works fine).

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Happens on either install or if you try and add a component e.g. calendar.

I do have a configuration files for tailwind.config.js and tsconfig.js.

The configuration is valid because it is working. My files are not within src it is within app.

My tailwind config has the following content line

export default {
 content: ['./app/**/*.{js,ts,jsx,tsx}']
...}

Hope this helps and any suggestions welcome.

Thanks, Dan.

[Plaximo]

Had the same issue in nextjs.

Tailwind was setuped correctly with

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

in globals.scss, but the problem was still there.

The problem was that the global file must be a .css file and not a .scss file.

[yangenmanuel]

I had the same issue and I solved it moving my index.css file from ./public directory to the ./src/styles directory

[larswolterssoftware]

Should this not be added to the docs though? In the situation that you create a Vite app and install shadcn afterwards, mentioning to add this to index.css + the tailwind.config.js config would be useful.

[dheerajsingh01]

I also had the same issue and in the CLI gives a link for the tailwind docs

Visit https://tailwindcss.com/docs/guides/vite to get started.

At tailwind docs its gives full documentation about how to setup Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file. @tailwind base; @tailwind components; @tailwind utilities;

[m-abdullahh]

Adding Directives in index.css works but this was automated months ago, wasnt it? I dont remember doing this step

[dheerajsingh01]

Adding Directives in index.css works but this was automated months ago, wasnt it? I dont remember doing this step

i don't think so. Because i got the same issue recently.

[prajoshjohny10329]

This solution has 2 steps:

 1. Add these three commands in index.css or global.css 
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     
  2. Change only content values like the below
  export default {
             content: ['./app/**/*.{js,ts,jsx,tsx}']
   ...}

[rishabredhu]

I have all the steps done as discussed above, but the error still remain the same same. I was initially working with .csj files but even with a complete new setup of tailwindcss still didnt' take away the error.