React19项目中ShadCN与TailwindCSS V4初始化报Unexpected semicolon错误求助

这个问题在Tailwind CSS v4和ShadCN预览版（canary）的适配过渡期确实有不少开发者碰到过，核心原因是ShadCN初始化脚本生成的index.css代码和Tailwind v4的语法规则不兼容。

具体解决步骤： #

1. 修正index.css语法
   ShadCN生成的index.css可能还保留了Tailwind v3的指令写法，而v4已经简化了语法。你可以：

   • 保留自定义CSS变量部分（比如颜色、字体相关的变量定义）
   • 将原来的Tailwind指令块：

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

     替换为Tailwind v4兼容的写法：

     @tailwind css;
     

2. 更新ShadCN预览版
   执行最新的初始化命令，官方可能已经修复了这个语法问题：

   pnpm dlx shadcn@latest init
   

3. 验证Tailwind配置格式
   确保tailwind.config.js是Tailwind v4的正确ES模块格式：

   export default {
     theme: {
       // 你的主题自定义配置
     }
   }
   

按照以上步骤调整后，应该能在保留样式的同时解决Vite的语法报错问题。

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