React中使用@tailwind和@apply报错，已尝试常规解决方法

1. 调整编辑器的CSS规则检查配置 #

• 打开VS Code设置（快捷键Ctrl+,），搜索css.lint.unknownAtRules，将其值改为ignore
• 也可以在项目根目录创建.vscode/settings.json文件，写入以下配置（同时兼容SCSS）：

  {
    "css.lint.unknownAtRules": "ignore",
    "scss.lint.unknownAtRules": "ignore"
  }
  

• 若使用PostCSS，安装postcss-syntax扩展，让编辑器正确识别Tailwind的自定义规则

2. 核对Tailwind相关配置文件 #

• 确认tailwind.config.js在项目根目录，且content字段包含所有需要扫描的文件路径：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./src/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 检查postcss.config.js是否存在，配置是否正确：

  module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }
  

3. 确认样式文件的写法 #

• 在全局样式文件（如src/index.css）中必须导入Tailwind的基础指令：

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

• 使用@apply时，确保写在.css或.module.css文件中，且该文件已被正确导入到组件中

4. 彻底重置依赖与缓存 #

• 删除node_modules和锁文件，重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

• 重启VS Code（快捷键Ctrl+Shift+P，选择"Reload Window"）
• 清除项目构建缓存：
  • Create React App项目：执行npm start --reset-cache
  • Vite项目：删除.vite文件夹后重启开发服务

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