Visual studio code 如何将@tailwind CSS规则添加到CSS检查器

在标记为未知的规则处添加

@tailwind

css。 如何避免这个错误

例如

style.css

@顺风飞行前

@顺风实用程序
这是vscode内置列表提供的at规则无未知规则

为了摆脱它，您需要执行以下操作：

1。安装stylelint扩展
code--安装扩展stylelint.vscode stylelint

2。安装stylelint建议的配置
npm安装stylelint建议的配置--save dev

3。在vscode用户设置中添加这两行

"css.validate": false, // Disable css built-in lint
"stylelint.enable": true, // Enable sytlelint

4。将这些行粘贴到项目根目录中名为
.stylelintrc
的文件中，如果该文件不存在，请创建它。有关stylelint配置的更多信息，请访问以下链接：

我的建议是安装postCSS语言支持，然后将
tailwind.css
重命名为
tailwind.pcss
，然后更改
package.json
脚本（或用于tailwind的任何构建脚本）中的引用从
tailwind.css
到
tailwind.pcss
，一切正常

@应用规则与POSTSS兼容：
经过多次测试：
POSTCSS和手写笔语法高亮显示，删除警告，但CSS Intellisence不完整，不显示第一个Utilities类

我在VSCode中安装了“语言手写笔”插件

设置>用户设置：

"files.associations": {
   "* .css": "stylus"
 },

再见


SCSS

如果您将SASS与Tailwind一起使用，您仍然会在
.scss
文件中看到错误，这些文件使用了此问题的早期答案

要正确lint SASS，可以将以下内容添加到VS代码设置中：

"scss.validate": false,

"css.validate": false,
"scss.validate": false,
"stylelint.enable": true,

按照@hasusuf的说明操作，但关闭默认VS代码验证程序：

添加以下3个设置：

"scss.validate": false,

"css.validate": false,
"scss.validate": false,
"stylelint.enable": true,

VisualStudio代码允许您定义

例如，在工作区的
.vscode/settings.json
中，您可以添加：

{
“css.customData”：[“.vscode/css_custom_data.json”]
}

然后在
.vscode/css\u custom\u data.json中添加：

{
“反恐怖主义指令”：[
{
“名称”：“@tailwind”，
“说明”：“使用@tailwind指令将tailwind的'base'、'components'、'utilities'和'screens'样式插入CSS。”，
“参考资料”：[
{
“名称”：“Tailwind的”功能和指令“文档”，
“url”：”https://tailwindcss.com/docs/functions-and-directives/#tailwind"
}
]
}
]
}

请注意，您必须重新加载VS代码窗口才能获取更改

以下是
.vscode/css_custom_data.json
的副本，其中包含所有带有简短用法片段的指令（这些指令片段反过来会在vs代码中突出显示语法）：

{
“版本”：1.1，
“反恐怖主义指令”：[
{
“名称”：“@tailwind”，
“description”：“使用“@tailwind”指令将tailwind的'base'、'components'、'utilities'和'screens'样式插入CSS。”，
“参考资料”：[
{
“名称”：“顺风文件”，
“url”：”https://tailwindcss.com/docs/functions-and-directives#tailwind"
}
]
},
{
“名称”：“@responsive”，
“description”：“您可以通过将自己的类的定义包装在`@responsive`指令：\n``css中来生成它们的响应变体\n@responsive{\n.alert{\n背景色：#E53E3E；\n}\n}\n``\n“，
“参考资料”：[
{
“名称”：“顺风文件”，
“url”：”https://tailwindcss.com/docs/functions-and-directives#responsive"
}
]
},
{
“名称”：“@screen”，
“description:“`@screen`指令允许您创建通过**名称**引用断点的媒体查询，而不是在您自己的CSS中复制断点的值：\n``CSS\n@screensm{\n/*…*/\n}\n``\n…转换为：\n``css\n@media（最小宽度：640px）{\n/*…*/\n}\n``\n“，
“参考资料”：[
{
“名称”：“顺风文件”，
“url”：”https://tailwindcss.com/docs/functions-and-directives#screen"
}
]
},
{
“名称”：“@variants”，
“description”：“通过将其定义包装在“@variants”指令：\n``css中，生成您自己的实用程序的`hover`、`focus`、`active`和其他**变体**”\n@variants悬停，焦点{\n.btn品牌{\n背景色：#3182CE；\n}\n}\n`\n``\n“，
“参考资料”：[
{
“名称”：“顺风文件”，
“url”：”https://tailwindcss.com/docs/functions-and-directives#variants"
}
]
}
]
}

以下是结果预览：


缺少的唯一指令是
@apply
，因为它是在CSS属性级别声明的。CSS语言服务可能不希望属性级别出现
atRules
，也不会接收此类指令。
我通过添加
.vscode/settings.json
文件
“CSS.validate”：false
，在不安装外部库的情况下似乎对我有效

如果使用VS代码，则可以使用以下插件：
只需在
settings.json
文件中添加三行即可

"css.lint.unknownAtRules": "ignore",
"css.validate": true,
"scss.validate": true,

1。只需转到设置（ctrl+，）即可获得快捷方式。

2.在搜索栏中搜索CSS。

3.查找（CSS>Lint:Unknown At Rules）

4.从下拉选项中选择“忽略”。

仅此而已
事实上，这条@规则似乎只用于顺风工具。谢谢。也许比我想要的还要努力——但如果它奏效的话……：）安装非常简单。正是如图所示的4个步骤。我能够隐藏