React+Tailwind项目所有JSX文件首行报CssSyntaxError错误求助

问题原因 #

• Stylelint/ESLint配置失误，把JSX文件当成CSS文件做语法校验
• Tailwind CSS IntelliSense插件的验证逻辑出错，错误解析JSX内容
• 项目根目录的校验配置文件（如.stylelintrc、.eslintrc）规则越界，给JSX文件套了CSS的检查规则

解决步骤 #

1. 修正Stylelint配置

   • 打开.stylelintrc或.stylelintrc.json，确认files字段只包含CSS类文件（比如**/*.css、**/*.scss），绝对不能加**/*.jsx/**/*.tsx
   • 没配置files的话，直接添加：

     {
       "files": ["**/*.css", "**/*.scss"],
       // 保留其他原有配置
     }
     

   • 也可以暂时禁用Stylelint插件，观察错误是否消失，快速定位问题

2. 调整ESLint配置

   • 打开.eslintrc.js或对应配置文件，确保parser设置为@babel/eslint-parser（JS项目）或@typescript-eslint/parser（TS项目），不要使用CSS相关的解析器
   • 检查是否安装了多余的CSS类ESLint插件，比如eslint-plugin-css，没用就直接卸载

3. 修复Tailwind插件的VS Code配置

   • 打开VS Code设置（按Ctrl+,），搜索Tailwind CSS: Validate，取消勾选该选项，避免插件错误校验JSX文件
   • 或者在项目的.vscode/settings.json中添加配置：

     {
       "tailwindCSS.validate": false
     }
     

4. 清缓存重启工具

   • 执行npx eslint --cache-clear清除ESLint缓存
   • 重启VS Code，确保所有配置生效

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