顺风在规则中添加@顺风css,标记为未知。 如何避免这种错误?
如styles.css
@tailwind起飞前的;
@tailwind公用事业;
顺风在规则中添加@顺风css,标记为未知。 如何避免这种错误?
如styles.css
@tailwind起飞前的;
@tailwind公用事业;
当前回答
只需进入设置(ctrl +,)的快捷方式。
打开设置,搜索“未知”,第一个结果应该是你要找的:CSS > Lint: unknown At Rules:
将其更改为忽略:
完成了!干杯!
还是不明白?跟着图片走
其他回答
根据tailwindcss-intellisense github库:
VS代码推荐设置
files.associations
使用这些文件。associations设置告诉VS Code总是在顺风CSS模式下打开。CSS文件:
"files.associations": {
"*.css": "tailwindcss"
}
它修复了@顺风警告,并增加了顺风指令,功能的智能感知
关于tailwindcss智能感知扩展的更多信息可以找到 在github存储库
2022 - 05年更新
官方的Tailwind CSS智能感知扩展现在扩展了内置的CSS语言模式来修复这些lint警告,而不会失去任何VS Code的默认智能感知功能。
查看推荐的VS代码设置部分,为工作空间中的所有CSS文件启用此功能。
如果您不想安装额外的扩展,我在下面保留了我最初的答案,但自从v0.8.0以来,它不再与内置的CSS支持冲突,因此这是我推荐的方法。
没有扩展的旧答案
Visual Studio Code允许您为CSS语言服务定义自定义数据。
例如,在工作空间的.vscode/settings中。Json,你可以添加:
{
"css.customData": [".vscode/css_custom_data.json"]
}
然后在。vscode/css_custom_data中。json添加:
{
"atDirectives": [
{
"name": "@tailwind",
"description": "Use the @tailwind directive to insert Tailwind’s `base`, `components`, `utilities`, and `screens` styles into your CSS.",
"references": [
{
"name": "Tailwind’s “Functions & Directives” documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives/#tailwind"
}
]
}
]
}
请注意,您可能需要重新加载VS Code窗口以获取更改。
下面是.vscode/css_custom_data的副本。Json,它包含了所有带有简短用法片段的指令(反过来在vs code中突出显示语法):
{
"version": 1.1,
"atDirectives": [
{
"name": "@tailwind",
"description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
}
]
},
{
"name": "@responsive",
"description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
}
]
},
{
"name": "@screen",
"description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#screen"
}
]
},
{
"name": "@variants",
"description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#variants"
}
]
}
]
}
以下是结果预览:
唯一缺少的指令是@apply,因为它是在CSS属性级别声明的。CSS语言服务可能不会在属性级别上使用atRules,也不会接收这样的指令。
SCSS
如果你正在使用顺风的SASS,你仍然会在你的.scss文件中看到错误,使用这些前面的答案。
要正确地lint SASS,你可以添加到你的VS Code设置:
"scss.validate": false,
按照@hasusuf的指示,但关闭默认的VS Code验证器:
添加以下3个设置:
"css.validate": false,
"scss.validate": false,
"stylelint.enable": true,
只需进入设置(ctrl +,)的快捷方式。
打开设置,搜索“未知”,第一个结果应该是你要找的:CSS > Lint: unknown At Rules:
将其更改为忽略:
完成了!干杯!
还是不明白?跟着图片走
我知道现在回答已经太迟了,但是当我处理CSS和SCSS时,这对我来说是有效的。在你的设置中。添加/编辑下面的代码。
"files.associations": {
"*.css": "tailwindcss",
"*.scss": "tailwindcss"
}