TailwindCSS v4搭配Parcel出现Unexpected token CloseSquareBracket错误求助

1. 排查版本兼容性 #

确保Parcel与Tailwind CSS v4版本兼容：

• 运行 npm list parcel tailwindcss 查看当前安装版本
• 升级Parcel到最新稳定版：npm install parcel@latest --save-dev
• 升级Tailwind CSS v4到最新版：npm install tailwindcss@latest --save-dev

2. 检查Tailwind配置文件语法 #

自动生成的CSS出现语法错误，大概率是tailwind.config.js存在语法问题：

• 检查配置中的括号、逗号是否匹配，比如自定义主题时是否误将对象写成数组（例：colors: { primary: ['#xxx'] } 应改为 colors: { primary: '#xxx' }）
• 移除配置中多余的方括号或无效语法，确保符合ES模块规范

3. 清除Parcel缓存 #

Parcel缓存可能残留旧的错误构建文件：

• 执行命令删除缓存和构建产物：

  # Linux/macOS
  rm -rf .parcel-cache dist
  
  # Windows
  rd /s /q .parcel-cache dist
  

• 重新启动开发服务器：npx parcel index.html

4. 简化PostCSS配置（若存在） #

Tailwind CSS v4无需复杂的PostCSS配置，若你有postcss.config.js，确保内容如下：

export default {
  plugins: {
    tailwindcss: {},
  },
};

• 删除多余的PostCSS插件（如autoprefixer，Tailwind v4已内置），避免冲突

5. 重新安装依赖 #

可能依赖安装过程中出现损坏：

• 删除node_modules、package-lock.json（或yarn.lock）
• 重新执行安装：npm install

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