如何将@tailwind CSS规则添加到CSS检查器中
如何将@tailwind CSS规则添加到CSS检查器中
在Visual Studio Code的内置列表中，提供了一个at-rule-no-unknown规则。
为了摆脱它，你需要执行以下步骤：
1. 安装Stylelint扩展：code --install-extension stylelint.vscode-stylelint
2. 安装Stylelint推荐配置：npm install stylelint-config-recommended --save-dev
3. 在Visual Studio Code的用户设置中添加以下两行：
"css.validate": false, //禁用默认的CSS内置检查
"stylelint.enable": true, //启用Stylelint
"scss.validate": false, //禁用SCSS检查（如果使用scss的话，可选）
4. 将以下代码粘贴到名为.stylelintrc的文件中，放在项目的根目录下；如果该文件不存在，则创建它。关于Stylelint配置的更多信息，请查看以下链接：https://stylelint.io/user-guide/
{
"extends": "stylelint-config-recommended",
"rules": {
"at-rule-no-unknown": [ true, {
"ignoreAtRules": [
"extends",
"tailwind"
]
}],
"block-no-empty": null,
"unit-allowed-list": ["em", "rem", "s"]
}
}
安装非常简单，只需要按照上述4个步骤进行操作即可。
我只安装了stylelint扩展，并禁用了内置的css、scss和less检查，然后启用了stylelint扩展，就隐藏了警告（无需进一步的步骤）。
谢谢，它起作用了！但是block-no-empty和unit-whitelist呢？这里不需要吧？Tailwind本身有px单位，所以我不明白为什么它们没有被加入白名单。这只是个人喜好吗？
这个配置与stylelint-config-recommended有关。
shinnn.stylelint扩展已被删除，因此这些内容已不相关。
对我来说，第3步起作用了。不需要第4步。谢谢！
对我来说不起作用，只是在我的非常简单的css规则代码中显示更多的错误：.button { p-1; }
unit-whitelist已被弃用，请使用unit-allowed-list。参见：github.com/stylelint/stylelint/blob/13.7.0/lib/rules/…
如果你正在使用Vuejs和Vetur，请确保使用“vetur”。
如果使用Vue和Vetur，并且想要在.vue文件的