Tailwind@tailwind在标记为未知的规则处添加css。我怎样才能避免这个错误？
例如styles.css
@tailwind preflight;
@tailwind utilities;
问问题
127746 次
12 回答
217
如果你使用 VS Code，你可以使用PostCSS 语言支持插件。
确保将scss文件与PostCSS.
于 2020-07-08T18:19:59.803 回答
142
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 代码中突出显示语法）：
{
"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属性级别，也不会选择此类指令。
于 2020-04-20T23:23:56.613 回答
118
这是 vscode 内置列表提供的 at-rule-no-unknown 规则。
为了摆脱它，您需要执行以下操作：
1 . 安装 stylelint 扩展code --install-extension stylelint.vscode-stylelint
2 . 安装 stylelint 推荐配置npm install stylelint-config-recommended --save-dev
3 . 在您的 vscode 用户设置中添加这两行
"css.validate": false, // Disable css built-in lint
"stylelint.enable": true, // Enable sytlelint
"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"]
}
}
于 2018-01-09T09:56:49.037 回答
32
1.只需进入设置 (ctrl + ,) 即可获得快捷方式。
2.在搜索栏中搜索 CSS。
3.查找（CSS> Lint:Unknown At Rules）
4.从下拉选项中选择“忽略”。
就这样
于 2020-10-05T14:54:35.897 回答
25
我的建议是安装 postCSS 语言支持，然后重命名tailwind.css，tailwind.pcss然后将脚本中的引用package.json（或您用于 tailwind 的任何构建脚本）更改为tailwind.pcssfrom tailwind.css，一切都应该正常工作。
@apply 规则与 postCSS 兼容：https ://github.com/tailwindcss/tailwindcss/issues/325
于 2018-06-22T19:58:09.947 回答
11
SCSS
如果您将 SASS 与 Tailwind 一起使用，您仍然会在.scss使用此问题的这些早期答案的文件中看到错误。
要正确 lint SASS，您可以添加到 VS Code 设置中：
"scss.validate": false,
按照@hasusuf 的说明进行操作，但关闭默认的 VS Code 验证器：
添加这 3 个设置：
"css.validate": false,
"scss.validate": false,
"stylelint.enable": true,
于 2019-04-18T23:25:35.410 回答
9
只需将三行添加到settings.json文件中
"css.lint.unknownAtRules": "ignore",
"css.validate": true,
"scss.validate": true,
于 2020-09-27T07:06:07.770 回答
9
推荐的 VS 代码设置
官方 Tailwind CSS IntelliSense VS 文档
VS Code 具有内置的 CSS 验证，当使用 Tailwind 特定的语法（例如 @apply）时可能会显示错误。您可以使用 css.validate 设置禁用此功能：
"css.validate": false
默认情况下，VS Code 在编辑“字符串”内容时不会触发完成，例如在 JSX 属性值中。更新 editor.quickSuggestions 设置可能会改善您的体验：
"editor.quickSuggestions": {
"strings": true
}
将两者结合起来，您的settings.json文件（如果是新的）将如下所示：
{
"css.validate": false,
"editor.quickSuggestions": {
"strings": true
}
}
来源：https ://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
于 2021-07-12T16:36:41.140 回答
5
我通过添加来编辑我的.vscode/settings.json文件"css.validate": false，似乎对我有用而无需安装外部库。
https://github.com/Microsoft/vscode/issues/14999#issuecomment-258635188
于 2020-05-26T08:41:14.413 回答
4
经过多次测试：POSTCSS 和 STYLUS 语法高亮，删除警告但 CSS Intellisence 不完整，不显示第一个实用程序类 Tailwind
我在VSCode中安装了“ language-stylus ”插件
设置>用户设置：
"files.associations": {
"* .css": "stylus"
},
回头见！
于 2018-07-09T04:53:07.423 回答
-1
您只需将这些论文添加到
- 单击文件 > 首选项 > setting.json
"css.lint.unknownAtRules": "ignore", "css.validate": true, "scss.validate": true,
在 setting.json 添加这些代码
于 2022-01-08T15:22:04.773 回答
-1
如果 tailwind css 不工作以及由于未知规则导致的错误，您需要重新构建它。例如，如果您一直npm run dev在本地环境中运行，您可以退出ctrl + c并再次运行npm run dev以创建一个普通的纯 CSS 文件，这将使 tailwind CSS 工作。
这正是我遇到的问题以及我如何解决它。
于 2021-11-09T08:30:40.210 回答