[bug]: TailWind Vesrison 4.0 new Update issue with Shadcn/ui vite documentation

[sajithcode]

Describe the bug

npx tailwindcss init -p

The above commis and not working in tailwind version 4.0 new update. because tailwind.config file is not included in tailwind version 4.0

Affected component/components

code

How to reproduce

update the documentation

Codesandbox/StackBlitz link

No response

Logs

System Info

system

Before submitting

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

[today-]

Temporary workaround:
Add @tailwind base to your main .css file. Later you can remove this line back.

https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-project-info.ts#L149C28-L149C42

[forhadakhan]

Same Issue Here

The current shadcn/ui recommended installation and configuration for Vite does not work with TailwindCSS v4 settings.

The npx tailwindcss init -p command no longer exists in TailwindCSS v4. If we follow the updated settings outlined in the TailwindCSS installation documentation for Vite (v4), running npx shadcn@latest init results in the following error:

PS > npx shadcn@latest init
Need to install the following packages:
shadcn@2.3.0
Ok to proceed? (y) y
✔ Preflight checks.
✔ Verifying framework. Found Vite.
✖ Validating Tailwind CSS.
  → This suggests that the `tailwind.config.js` file is missing or improperly configured.
✖ Validating import alias.
  → This indicates that the `tsconfig.json` file does not define an import alias.
No Tailwind CSS configuration found at A:\react-projects\hosting-manager.
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.

---

Temporary Workaround

To resolve this issue temporarily, follow these steps:

1. Create a New Vite Project:

   npm create vite@latest

2. Install TailwindCSS v3.4.17, along with postcss and autoprefixer:

   npm install -D tailwindcss@3.4.17 postcss autoprefixer

3. Generate the Tailwind Configuration File:

   npx tailwindcss init -p

4. Continue with the Rest of the shadcn/ui Recommended Installation:
   Follow the current official guide for Vite to complete the setup.

This workaround uses TailwindCSS v3.4.17, which is compatible with the present shadcn/ui Vite guide.

---

Key Notes:

• The issue arises because TailwindCSS v4 introduces changes that are not yet supported by the shadcn CLI.
• This temporary solution ensures compatibility until shadcn officially supports TailwindCSS v4.

[vikasutf8]

This is not bug instead its shadcn still not configured with tailwindv4

• as much use of shadcn UI is third party library that used for compoeent pre-build integration as my understanding or experience.
• on other hand, tailwindCSS is now in V4 is not allowing to integrate it.

Conslusion:

• if use want to use Shadcn now, using tailiwind v3.4 that have very good compatiblity.
• Working with version 4 , its own classes are good to sound.

More :

• Still shadcn documation vite+tailwind3.4+shadcn

[finfin]

Temporary workaround: Add @tailwind base to your main .css file. Later you can remove this line back.

https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-project-info.ts#L149C28-L149C42

A refined workaround for tailwind v4:

add /* @tailwind base */ at the first line of your css file, that'll pass the test with no other side effect, no need to remove.

[shadcn]

I've updated the cli to support Tailwind v4 and React 19. Please test and share your feedback in the following thread: #6585