VSCode中SCSS结合TailwindCSS报错：at-rule or selector expected 修复方案

错误原因 #

SCSS语法检查器报错是因为#{!important}不符合SCSS插值语法规范：#{}仅用于插入变量、表达式或合法的SCSS片段，!important是CSS优先级标记，不需要通过SCSS插值包裹，且Tailwind本身提供了原生方式处理!important。

修复方案 #

1. 替换错误语法（核心解决方法） #

根据使用场景调整写法：

• 在Tailwind @apply中使用：直接在@apply规则末尾添加!important，不需要SCSS插值：

  .primary-btn {
    @apply bg-green-600 text-white py-2 px-4 rounded !important;
  }
  

• 在普通SCSS属性中使用：直接将!important放在属性值后，无需插值：

  .custom-text {
    font-size: 18px !important;
    color: #333 !important;
  }
  

2. 确保PostCSS配置生效 #

确认已安装所需依赖（如果未安装，执行以下命令）：

npm install postcss-import tailwindcss/nesting autoprefixer tailwindcss --save-dev

你的现有PostCSS配置是正确的，无需修改，确保构建工具（如Vite、Webpack）正确加载该配置。

3. 调整VSCode SCSS lint规则（可选） #

如果仍有残留提示，在settings.json中添加以下规则，屏蔽无效属性值的错误提示：

{
  ...
  "scss.lint.invalidPropertyValue": "ignore"
}

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