如何添加一个@tailwind CSS 规则到 CSS 检查器

Tailwind 在标记为未知的规则处添加 @tailwind css。 我如何避免这个错误？

例如 styles.css

@tailwind preflight;

@tailwind utilities;

199776 次浏览
小开

这是vscode内置列表提供的at-rule-no-unknown规则。

为了摆脱它，你需要做以下事情:

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

2。安装stylelint推荐配置npm install stylelint-config-recommended --save-dev

3.。在vscode USER SETTINGS中添加这两行

"css.validate": false, // Disable default css built-in lint
"stylelint.enable": true, // Enable stylelint
"scss.validate": false, // Disable scss lint (optional if using 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"]
}
}
小开

我的建议是安装postCSS语言支持，然后将tailwind.css重命名为tailwind.pcss，然后将你的package.json脚本(或你正在使用的顺风构建脚本)中的引用从tailwind.css更改为tailwind.pcss，一切都应该正常工作。

@apply规则兼容postCSS: https://github.com/tailwindcss/tailwindcss/issues/325

小开
经过多次测试: POSTCSS和STYLUS语法高亮显示，删除警告，但CSS智能是不完整的，不显示第一实用工具类Tailwind

我在VSCode中安装了'language-stylus'插件

>用户设置:

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

再见!

CSS智能是不完整的

小开

SCSS

如果你正在使用顺风的SASS，你仍然会在你的.scss文件中看到错误，使用这些前面对这个问题的答案。

要正确地lint SASS，你可以添加到你的VS Code设置:

"scss.validate": false,

按照@hasusuf的指示，但关闭默认的VS Code验证器:

添加以下3个设置:

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

2022 - 05年更新

官方的顺风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"
}
]
}
]
}

以下是结果预览:

preview of @screen directive

唯一缺少的指令是@apply，因为它是在CSS属性级别声明的。CSS语言服务可能不会在属性级别上期望atRules，并且不会拾取这样的指令。

小开

我通过添加"css.validate": false来编辑我的.vscode/settings.json文件，似乎不需要安装外部库就可以为我工作。

https://github.com/Microsoft/vscode/issues/14999#issuecomment-258635188

小开

如果你使用VS Code，你可以使用PostCSS语言支持插件。

确保你的scss文件与PostCSS相关联。

小开

只需在settings.json文件中添加三行即可

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

1.只需进入设置(ctrl +，)快捷键。
2.在搜索栏搜索CSS。
3.查找(CSS>Lint:Unknown At Rules)
4.选择“忽略”;从下拉选项。
这是所有的< / p >

小开

VS代码推荐设置

官方顺风CSS智能感知VS文档

VS Code有内置的CSS验证，当使用tailwind特定的语法时可能会显示错误，比如@apply。你可以在css中禁用它。验证设置:

"css.validate": false

默认情况下，VS Code在编辑“字符串”时不会触发补全。内容，例如在JSX属性值中。更新编辑器。quickrecommendations设置可以改善您的体验:

"editor.quickSuggestions": {
"strings": true
}

将两者结合起来，你的settings.json文件(如果是新的)将看起来类似于:

{
"css.validate": false,
"editor.quickSuggestions": {
"strings": true
}
}

来源:https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

小开

如果顺风css不像未知规则引起的错误那样工作，你需要重新构建它。例如，如果你已经在本地环境中运行了npm run dev，你可以使用ctrl + c退出并再次运行npm run dev来创建一个正常的纯CSS文件，这将使顺风CSS工作。

这正是我所遇到的问题以及我是如何解决它的。

小开

你只需要把这些加到

  • 点击文件>偏好比;setting.json
"css.lint.unknownAtRules": "ignore",
"css.validate": true,
"scss.validate": true,

在setting.json中添加这些代码

小开

在这里输入图像描述 对于Vue 3，您可能尝试安装Vue 3支持扩展

小开

添加VSCode扩展

添加语言支持

小开

根据tailwindcss-intellisense github库:

VS代码推荐设置

files.associations

使用files.associations设置告诉VS Code总是在Tailwind CSS模式下打开.css文件:

"files.associations": {
"*.css": "tailwindcss"
}

它修复了@顺风警告，并增加了顺风指令，功能的智能感知

更多关于tailwindcss智能感知扩展的信息可以找到 在github库

小开

使用VScode打开用户设置CTRL + ,

搜索未知At规则

将Lint从警告改为忽略

小开

我知道现在回答已经太迟了，但是当我处理CSS和SCSS时，这对我来说是有效的。在settings.json中，添加/编辑下面的代码。

"files.associations": {
"*.css": "tailwindcss",
"*.scss": "tailwindcss"
}
小开
确保安装PostCSS语言支持，在VSCODE中找到扩展。 这将删除所显示的错误

@apply规则兼容postCSS: https://github.com/tailwindcss/tailwindcss/issues/325

VS市场链接:https://marketplace.visualstudio.com/items?itemName=csstools.postcss

注意:卸载PostCSS智能感知和突出显示扩展从VS Code否则它将无法工作。


提交答案