如何将@tailwind CSS规则添加到css检查器

Question

Tailwind@tailwind在规则中添加了css,标记为未知.我怎样才能避免这个错误？

例如 styles.css

@tailwind preflight;

@tailwind utilities;

Answer 1

如果您使用 VS Code，您可以使用以下插件：https : //marketplace.visualstudio.com/items? itemName =csstools.postcss

Answer 2

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在性能水平，并不会拿起这样的指令。

Answer 3

当前推荐的 Visual Studio Code 设置（更新于 2022 年 12 月 15 日）

官方 Tailwind CSS IntelliSense Visual Studio 代码文档

使用files.associations设置告诉 Visual Studio Code 始终在 Tailwind CSS 模式下打开 .css 文件：

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

提示：在 Visual Studio Code 中按Ctrl+,打开“设置”；然后，输入“文件关联”。

默认情况下，在编辑“字符串”内容（例如在 JSX 属性值中）时，Visual Studio Code 不会触发完成。更新editor.quickSuggestions设置可能会改善您的体验：

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

将两者结合起来，您的settings.json文件（如果是新的）将类似于以下内容：

    {
        "files.associations": {
          "*.css": "tailwindcss"
        },
        "editor.quickSuggestions": {
            "strings": true
        }
    }

来源：Tailwind CSS IntelliSense

以前推荐的 Visual Studio Code 设置（已弃用）

Visual Studio Code 具有内置 CSS 验证，在使用 Tailwind CSS 特定语法（例如 @apply）时可能会显示错误。您可以使用css.validate设置禁用此功能：

"css.validate": false

“editor.quickSuggestions”设置建议当时和现在保持不变。将两者结合起来，您的settings.json文件（如果是新的）将类似于以下内容：

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

Answer 4

我是新来的，但解决此问题的最简单答案是按照以下步骤操作：

\n

\n

1. 打开导入 Tailwind CSS 的 CSS 文件

   \n
\n

2. 按 Ctrl + Shift + P 并搜索 \xe2\x80\x9c更改语言模式\xe2\x80\x9d

   \n
\n

3. 在搜索栏中，输入 \xe2\x80\x9ctailwindcss\xe2\x80\x9d 并选择它。

   \n
\n

4. 现在，您的 CSS 文件与 Tailwind CSS 而不是常规 css 关联，并且警告应该消失。

   \n
\n

\n

致谢：https://batchnepal.com/topic/fix-unknown-at-rule-warning-in-vscode

\n

这样您就不需要安装任何第三个插件或忽略任何错误。谢谢阅读！

\n

Answer 5

这是由vscode的内置列表提供的规则不可知的规则.

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

1.安装stylelint扩展code --install-extension shinnn.stylelint

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

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

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

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-whitelist": ["em", "rem", "s"]
  }
}

Answer 6

根据tailwindcss-intellisense GitHub 存储库：

推荐的 Visual Studio 代码设置

files.associations

使用该files.associations设置告诉 Visual Studio Code 始终.css以 Tailwind CSS 模式打开文件：

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

它修复了@tailwind警告，并添加了 Tailwind CSS 指令和智能感知功能。

有关 Tailwind CSS intellisense 扩展的更多信息可以在GitHub 存储库中找到。

Answer 7

1.只需转到设置（ctrl + ,）的快捷方式。
2.在搜索栏中搜索 CSS。
3.寻找（ CSS> Lint:Unknown At Rules ）
4.从下拉选项中选择“忽略”。
就这样

Answer 8

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

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

Answer 9

社会保障局

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

要正确 lint SASS，您可以添加到您的 VS Code 设置中：

"scss.validate": false,

按照@hasusuf 的说明操作，但关闭默认的 VS Code 验证器：

添加以下 3 个设置：

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

Answer 10

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

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

Answer 11

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

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

Answer 12

经过多次测试：

PostCSS 和 STYLUS 语法荧光笔删除了警告，但 CSS Intellisence 并不完整。它不显示第一个实用程序类 Tailwind。

我在 Visual Studio Code 中安装了“语言手写笔”插件。

设置 > 用户设置：

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

CSS 智能不完整

Answer 13

当我处理 CSS 和 SCSS 时，这对我有用。在您的settings.json文件中，添加/编辑以下代码。

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