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

Question

Tailwind 在标记为未知的规则中添加 @tailwind css。 如何避免此错误？

例如styles.css

@tailwind preflight;

@tailwind utilities;

Answer 1

这是 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 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"]
  }
}

Answer 2

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

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

Answer 3

经过多次测试： POSTCSS 和 STYLUS 语法高亮，删除警告但 CSS Intellisence 不完整，不显示第一个实用程序类 Tailwind

我在 VSCode

中安装了“language-stylus”插件

设置> 用户设置：

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

待会见！

CSS Intellisence is incomplete

Answer 4

SCSS

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

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

"scss.validate": false,

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

添加这 3 个设置：

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

Answer 5

Visual Studio Code 允许您定义Custom Data for CSS Language Service。

例如，在您工作区的.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 的副本，其中包含所有短用法 sn-ps 的指令（这反过来会在 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 6

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

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

Answer 7

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

Answer 8

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

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

Answer 9

1. 只需转到设置 (ctrl + ,) 即可获得快捷方式。
2. 在搜索栏中搜索 CSS。
3. 查找 (CSS> Lint:Unknown At Rules)
4. 从下拉选项中选择“忽略”。
就是这样

Answer 10

推荐的 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

Answer 11

如果tailwind css不能正常工作以及由于未知规则导致的错误，你需要重新构建它。例如，如果您一直在本地环境中运行npm run dev，您可以使用ctrl + c 退出并再次运行npm run dev 以创建一个普通的纯CSS 文件，这将使tailwind CSS 工作。

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