如何修复或忽略VS Code中Tailwind CSS的'appearance'兼容性警告？

修复警告（推荐） #

VS Code的警告是因为你只添加了webkit内核的私有前缀属性，缺少标准的appearance属性。直接在现有代码里补充标准属性即可：

button,[type="button"],[type="reset"],[type="submit"] {
  -webkit-appearance: button;
  appearance: button;
}

这样既兼容webkit内核浏览器，也符合标准规范，警告会自动消失。

忽略警告（仅特殊场景使用） #

如果不想修改代码，可以通过两种方式忽略：

• 单行忽略：在属性行末尾添加注释禁用检查（针对stylelint等lint工具的警告）：

  button,[type="button"],[type="reset"],[type="submit"] {
    -webkit-appearance: button; /* stylelint-disable-line property-no-vendor-prefix */
  }
  

• 全局关闭该规则：打开VS Code的设置（快捷键Ctrl+,），搜索css.lint.vendorPrefix，将其值改为ignore，就能全局关闭这类前缀相关的警告。

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