React项目中Tailwind CSS报错‘Cannot apply unknown utility class lg:’求助

算力阿峰

2026-6-13

排查React+Tailwind项目中「Cannot apply unknown utility class lg:」错误

检查工具类完整性
单独的lg:不是有效工具类，必须紧跟具体样式规则（如lg:w-1/2、lg:flex）。排查代码中是否存在仅写lg:的错误写法，比如误输入className="lg:"或className="lg: w-1/2"（lg:后多空格）。

验证Tailwind断点配置
打开tailwind.config.js，确认screens配置中保留了lg断点：

module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px', // 确保该断点未被删除或重命名
      // ...其他断点配置
    },
  },
}

清理缓存并重启服务
Tailwind JIT模式可能缓存旧类信息，执行以下操作：
1. 终止当前React开发服务（Ctrl+C）
2. 执行npx tailwindcss-cli@latest build --purge "./src/**/*.{js,jsx,ts,tsx}" -o ./src/output.css清理缓存
3. 重新启动服务：npm start或yarn start
检查依赖版本兼容性
查看package.json中依赖版本，确保Tailwind v3+搭配PostCSS v8+、Autoprefixer v10+：
```
"dependencies": {
  "tailwindcss": "^3.3.0",
  "postcss": "^8.4.20",
  "autoprefixer": "^10.4.13"
}
```
版本不兼容时执行npm update tailwindcss postcss autoprefixer更新。