[bug]: Shadcn not validating Tailwind CSS installation after Tailwind 4 update

[Ranbir5ingh]

Describe the bug

After the update to Tailwind CSS 4, the npx shadcn@latest init command fails to validate the Tailwind CSS installation due to the removal of the Tailwind config file. This prevents the proper initialization of Shadcn. It is recommended to update the installation documentation to reflect these changes.

Affected component/components

N/A (This issue affects the initialization process rather than specific components)

How to reproduce

1. Update Tailwind CSS to version 4.
2. Run the command npx shadcn@latest init.
3. Observe that the command fails to validate the Tailwind CSS installation.

Codesandbox/StackBlitz link

No response

Logs

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

No Tailwind CSS configuration found at C:\Users\ranbi\OneDrive\Desktop\Portfolio website\client.
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.

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

System Info

- Operating System: Windows 11
- Node.js version: (v22.12.0)
- NPM version: (10.9.0)

Before submitting

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

[brrock]

This is urgent @shadcn

[Richi2293]

Hi,

same issue for me!

macos 15.2 node v23.5.0 npm 11.0.0

[sharath-ops]

use this cmd

npm install -D [email protected] postcss autoprefixer

mention (@3.4.0)

[sharath-ops]

if you are using js make sure adding jsconfig file in root folder with this content

{ "compilerOptions": { "baseUrl": ".", "paths": { "@/": ["./src/"] } } }

[Ranbir5ingh]

use this cmd

npm install -D [email protected] postcss autoprefixer

mention (@3.4.0)

Yes It works, but it will not solve the issue with tailwind 4

[andreibadescu]

same issue

[lloydrichards]

Just to be clear, this is just an issue with init and components that change the tailwind config (accordion, sidebar). You can quite easily have tailwind v4 running, create a tailwind.config.ts, and then run npx shadcn@latest init. Afterwards you will need to update the tailwind theme in global.css the way tailwind v4 now defines the config or add the config using @config "../../tailwind.config.js";

Check out the example repo for how the global.css should be setup: https://github.com/shadcn/app-tailwind-v4

[obada-jaras]

same here

[bilalsadiq03]

if you are using js make sure adding jsconfig file in root folder with this content

{ "compilerOptions": { "baseUrl": ".", "paths": { "@/": ["./src/"] } } }

it only debugs the import alias issue that is: No import alias found in your tsconfig.json file. Visit https://ui.shadcn.com/docs/installation/vite to learn how to set an import alias.

but the main issue is with the tailwind configuration.

[brrock]

I think a quick update is needed

[bilalsadiq03]

@shadcn urgently sort out this issue

[farhanf-rafi]

@shadcn update the issue

[DestroyCom]

I'm a subscriber to the issue, so I can read all the messages, with all due respect, but the people who are screaming to fix this urgently, why don't you do your own fork/PR? That's the point of an opensource project, we're already lucky enough to have a community pushing this project to the max, I'm sure they're already looking at the problem, there's no point in pressing them anymore/disturbing them....

Give them time to fix the problem, don't forget that for most of them this is a project in addition to their main job.

[shadcn]

I'm actively working on this. There's a bit of work here. We're currently in a transition phase where we need to support both React 18 + Tailwind v3 and React 19 + Tailwind v3, along with all possible combinations.

I've made some headway and will share an update soon.

In the meantime, here's how you can start using/testing Tailwind v4:

1. Install Tailwind v3 and npx shadcn init.
2. Add all components: npx shadcn add --all.
3. Run the Tailwind upgrade: npx @tailwindcss/upgrade@next.

This will upgrade all components and primitives to Tailwind v4.

[PsSave]

Nice! @shadcn, Thank you.

For others, be more patient, it won't be one less version that will end your project, just follow the steps and be happy.

[muhammadalizkhan]

I'm a subscriber to the issue, so I can read all the messages, with all due respect, but the people who are screaming to fix this urgently, why don't you do your own fork/PR? That's the point of an opensource project, we're already lucky enough to have a community pushing this project to the max, I'm sure they're already looking at the problem, there's no point in pressing them anymore/disturbing them....

Give them time to fix the problem, don't forget that for most of them this is a project in addition to their main job.

Yes, the issue will be resolved by @shadcn itself, and we should wait. Spreading panic in this manner is not appropriate.

[JuniorPacheco]

If anyone has problems with vite, it is necessary to have version 4 or 5. The command is the following:

npm create vite@5

[ssangani]

I'm actively working on this. There's a bit of work here. We're currently in a transition phase where we need to support both React 18 + Tailwind v3 and React 19 + Tailwind v3, along with all possible combinations.

I've made some headway and will share an update soon.

In the meantime, here's how you can start using/testing Tailwind v4:

1. Install Tailwind v3 and npx shadcn init.
2. Add all components: npx shadcn add --all.
3. Run the Tailwind upgrade: npx @tailwindcss/upgrade@next.

This will upgrade all components and primitives to Tailwind v4.

I tried this but for some reason the buttons become glitchy. When hovering over button cursor doesn't change to pointer

[shadcn]

I've updated the cli to support Tailwind v4 and React 19. Please test and share your feedback in the following thread: https://github.com/shadcn-ui/ui/issues/6585

[brrock]

@shadcn close issue and thanks so much

[code-with-sharan]

I have used tailwind version 3.4.17 and that works for my vite + javascript project.

1. npm create vite@latest
2. npm install -D [email protected] postcss autoprefixer
3. npx tailwindcss init -p
4. In src/index.css, paste this:

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

5. Update ‘content’ of the tailwind.config.js with this:

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

6. create a jsconfig.json file and paste this:

{
    "files": [],
    "references": [
      {
        "path": "./jsconfig.app.json"
      }
    ],
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["./src/*"]
      }
    }
  }

7. create a jsconfig.app.json file and paste this:

{
    "compilerOptions": {
      // ...
      "baseUrl": ".",
      "paths": {
        "@/*": [
          "./src/*"
        ]
      }
      // ...
    }
}

8. Run this command:

npm install -D @types/node

9. Replace vite.config.js file with this code:

import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

10. Run the CLI:

npx shadcn@latest init

[Ananya020]

Oh my god YES, i'm facing this issue, hopefully we get the solution soon

[Ananya020]

Facing this issue in my Next.js project

[AyourElwazani97]

i faced same probl in astro today (19/02/2025) i used pnpm dlx shadcn@canary init and it worked fine

`pnpm dlx shadcn@canary init Packages: +167 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Progress: resolved 167, reused 165, downloaded 2, added 167, done ✔ Preflight checks. ✔ Verifying framework. Found Astro. ✔ Validating Tailwind CSS config. Found v4. ✔ Validating import alias. √ Which color would you like to use as the base color? » Neutral √ Would you like to use CSS variables for theming? ... no / yes ✔ Writing components.json. ✔ Checking registry. ✔ Updating src\styles\global.css ✔ Installing dependencies. ✔ Created 1 file:

• src\lib\utils.ts Success! Project initialization completed. You may now add components. `

[ericksousa]

The problem seems to be simple. I believe this Tailwind validation step looks for the following directives:

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

I simply created a file src/assets/index.css with the content above and ran the command pnpm dlx shadcn@latest init, and it worked just fine.

An update needs to be made in this validation step to also consider @import "tailwindcss";.

[shadcn]

This should be fixed now. Is this still happening?

[ricmello]

@shadcn it worked on a fresh new Hydrogen project, I just had to install tailwindcss manually because Hydrogen only have @tailwindcss/vite installed by default. There is an issue on their end about this: https://github.com/Shopify/hydrogen/issues/2557.

Maybe preflight messaging could be more specific about which validation failed, because I had to check preflight-init.ts source code to find the root cause.

This is the message that I got due to a missing dependency:

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

No Tailwind CSS configuration found at /Users/ricardo/projects/personal/hydrogen-storefront.
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.

[mislavmiocevic]

The problem seems to be simple. I believe this Tailwind validation step looks for the following directives:

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

I simply created a file src/assets/index.css with the content above and ran the command pnpm dlx shadcn@latest init, and it worked just fine.

An update needs to be made in this validation step to also consider @import "tailwindcss";.

I can confirm this works with

"next": "15.2.0",
"react": "^19.0.0",

and using pnpm

thanks @ericksousa !

[PedroPini]

This should be fixed now. Is this still happening?

@shadcn I faced exactly the same issue when using a blank starter from payloadCMS, the issue arrises because when installing pnpm dlx shadcn init it requires a global.css file. In this case payload uses style.css, so just adding global.css fixed for me.

[MuratDoganer]

This should be fixed now. Is this still happening?

@shadcn I faced exactly the same issue when using a blank starter from payloadCMS, the issue arrises because when installing pnpm dlx shadcn init it requires a global.css file. In this case payload uses style.css, so just adding global.css fixed for me.

Run this: npx @tailwindcss/upgrade and then retry :)