Angular项目.css文件中Tailwind @apply黄色下划线问题求助

原因 #

黄色下划线是编辑器（大概率是VS Code）的CSS语法校验工具不认识Tailwind的@apply指令——原生CSS里没有这个规则，所以编辑器会把它标记为未知语法，但实际编译时Tailwind会正确处理，所以样式能正常生效。

解决方法 #

• 安装Tailwind CSS IntelliSense插件
  这个插件专门用来识别Tailwind语法，安装后不仅能消掉@apply的黄色下划线，还能提供Tailwind类名补全提示。直接在VS Code扩展商店搜索该插件安装即可。

• 修改编辑器CSS校验设置
  如果不想装插件，或者装了插件仍有问题，可以调整VS Code的设置，让它忽略未知的CSS at规则：
  打开设置（快捷键Ctrl+,），搜索css.lint.unknownAtRules，把值改成ignore；也可以直接在settings.json中添加以下配置：

  "css.lint.unknownAtRules": "ignore"
  

• 确认Tailwind配置文件正确关联项目
  检查项目根目录的tailwind.config.js（或.ts）是否正确配置了内容路径，确保包含你的Angular组件文件，示例配置如下：

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

  正确的配置能让语法识别工具更精准地匹配项目中的Tailwind语法。

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