如何配置TailwindCSS IntelliSense消除Vue/Svelte/Astro的@apply警告

以下配置可在不关闭错误提示、不修改文件主关联、不添加lang="postcss"的前提下，消除css(unknownAtRules)警告并保留Tailwind智能提示：

1. 配置VSCode设置（settings.json） #

在用户或工作区的settings.json中添加以下配置：

{
  // 让Tailwind IntelliSense识别框架文件的样式语法
  "tailwindCSS.includeLanguages": {
    "vue": "postcss",
    "svelte": "postcss",
    "astro": "postcss"
  },
  // 指定Tailwind扩展需要扫描的文件范围
  "tailwindCSS.files.include": [
    "**/*.vue",
    "**/*.svelte",
    "**/*.astro",
    "**/*.css"
  ],
  // 启用Tailwind扩展自身的语法验证
  "tailwindCSS.validate": true,
  // 忽略自定义At规则的警告，保留其他CSS错误提示
  "css.lint.unknownAtRules": "ignoreCustomRules",
  "scss.lint.unknownAtRules": "ignoreCustomRules"
}

配置说明： #

• tailwindCSS.includeLanguages：将框架文件的语言映射到PostCSS，让Tailwind扩展能正确解析<style>区块，无需在文件内指定lang属性。
• tailwindCSS.files.include：确保扩展扫描所有目标框架文件，生成准确的智能提示和语法校验。
• tailwindCSS.validate：启用扩展自带的Tailwind语法验证，替代VSCode默认CSS服务对Tailwind指令的检查。
• css.lint.unknownAtRules: "ignoreCustomRules"：仅忽略自定义At规则（如@apply）的警告，对其他非法CSS规则仍会提示，满足“不关闭错误提示”的要求。

2. 确保Tailwind配置文件正确 #

在项目根目录的tailwind.config.js中，确认content字段包含所有框架文件：

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

完成以上配置后，重启VSCode即可生效，<style>区块内的@apply等Tailwind指令不再出现未知规则警告，同时保留框架文件的原有关联和完整错误提示。

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