VSCode 报 Unknown at rule @tailwind 是因内置 CSS 语言服务不识别 Tailwind 非标准指令；解决方法是设置 css.lint.unknownAtRules 为 ignore，并安装 Tailwind CSS IntelliSense 插件以获得语法高亮与补全。
VSCode 报 Unknown at rule @tailwind 是什么问题
这不是 Tailwind 本身出错，而是 VSCode 内置的 CSS 语言服务不认识 @tailwind、@apply 这类非标准 CSS 规则。它只按 W3C CSS 规范校验，而 Tailwind 的指令必须经 PostCSS 处理才生效——编辑器没走这一步，就直接标黄警告。
怎么让 VSCode 忽略这个警告
最轻量、见效最快的方案是关掉它的“过度校验”：
- 打开 VSCode 设置（
Ctrl+,或Cmd+,） - 搜索
css.lint.unknownAtRules - 把值从
warning改成ignore
改完不用重启，立刻生效。注意：这只是屏蔽编辑器提示，不解决构建或运行时问题——只要你的 postcss.config.cjs 和 tailwind.config.cjs 配对正确，样式照样能编译出来。
为什么只改设置还不够？还得装插件
单纯设 ignore 能消警告，但会丢掉语法高亮、类名自动补全、颜色预览这些关键能力。真正推荐的做法是组合使用：
立即学习“前端免费学习笔记（深入）”；
- 安装官方扩展：
Tailwind CSS IntelliSense（必须） - 顺带装上：
PostCSS Language Support（可选但建议） - 确保项目根目录有
tailwind.config.cjs，且content字段覆盖了你所有模板文件路径，比如./src/**/*.{js,ts,jsx,tsx}
插件依赖配置文件存在才能工作；如果 content 漏写了某个目录，IntelliSense 就不会索引那里的类名，补全就失效。
常见连环失败点：postcss.config.cjs 写法错误
很多人卡在这步：VSCode 不报错了，但浏览器里 @tailwind base 完全没输出。典型原因是 postcss.config.cjs 格式不对：
- 必须用 CommonJS 导出：
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } } - ❌ 别写成 ES module：
export default { ... }或import语法 - ❌ 别加引号：
"tailwindcss"或"@tailwindcss/postcss"都是错的（后者根本不存在） - ✅ Tailwind v4 用户可直接删掉
postcss.config.cjs，改用@tailwindcss/vite插件接管
这个文件一旦写错，VSCode 即使装了插件也识别不了 Tailwind 指令上下文，补全和跳转会全部失效——表面没警告，实则功能残缺。
