如何解决VSCode将Tailwind的@tailwind、@apply标记为未知规则的问题？

以下是几种可行的解决方案，按推荐优先级排序：

1. 通过自定义数据文件让VSCode识别Tailwind专属规则 #

这是最精准的方案，既能保留对合法CSS规则的校验，又能让VSCode识别Tailwind的专属@规则：

• 在项目根目录的.vscode/settings.json（无则新建）中添加配置：

{
  "css.customData": ["./node_modules/tailwindcss/dist/tailwindcss.custom-data.json"]
}

• 保存后重启VSCode，@tailwind、@apply等规则将不再被标记为错误。

2. 直接忽略CSS未知at规则的提示 #

若上述方案无效，或需要快速临时解决，可关闭该lint提示：

• 在.vscode/settings.json中添加：

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

• 注意：此设置会忽略所有未知CSS at规则，可能掩盖其他真实语法问题，仅建议在确认无风险时使用。

补充说明 #

• 确保使用最新版Tailwind CSS，旧版本可能未提供tailwindcss.custom-data.json文件；
• 优先使用工作区设置（.vscode/settings.json）而非全局VSCode设置，避免影响其他项目。

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