React项目集成shadcn/ui时Tailwind CSS初始化报错求助

问题根源 #

Tailwind CSS 4.0.0是重大版本更新，CLI执行逻辑与v3完全不同，且当前shadcn/ui默认适配的是Tailwind v3版本，直接安装v4会触发兼容性问题，导致npx无法找到正确的可执行文件。

方案一：降级到Tailwind CSS v3（推荐，完美适配shadcn/ui） #

1. 卸载现有v4依赖：

npm uninstall -D tailwindcss postcss autoprefixer

2. 安装v3稳定版本：

npm install -D tailwindcss@^3 postcss autoprefixer

3. 重新执行初始化命令：

npx tailwindcss init -p

4. 后续按照shadcn/ui官方指引修改tailwind.config.js等配置文件即可正常使用。

方案二：适配Tailwind CSS 4.0.0（需注意兼容性） #

若坚持使用v4，需调整CLI调用方式：

1. 在项目根目录的package.json中添加自定义脚本：

{
  "scripts": {
    "tailwind:init": "tailwindcss init -p"
  }
}

2. 通过npm脚本执行初始化：

npm run tailwind:init

3. 注意：Tailwind v4的配置格式、API与v3差异极大，shadcn/ui组件可能需要手动调整样式适配，建议先查阅v4官方文档确认配置细节。

额外排查点 #

• 检查node_modules/.bin目录下是否存在tailwindcss可执行文件，若不存在，删除node_modules和package-lock.json后重新执行npm install
• 若问题仍存在，尝试清空npm缓存：

npm cache clean --force

内容的提问来源于stack exchange，提问作者Haflan Nisthar