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

Posted

技术标签:

【中文标题】如何将@tailwind CSS 规则添加到 CSS 检查器【英文标题】：How to add a @tailwind CSS rule to css checker 【发布时间】：2021-05-28 00:57:03 【问题描述】：

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

例如styles.css

@tailwind preflight;

@tailwind utilities;

【问题讨论】：

其实这个@规则似乎只被tailwind工具使用。 this *** 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"]

【讨论】：

谢谢。也许比我想要的更多的努力 - 但如果它有效...... :) 安装非常简单。如图所示，正是这 4 个步骤。 我能够通过仅安装 stylelint 扩展和禁用内置 css、scss 和 less lint 并启用 stylelint 扩展来隐藏警告（无需进一步的步骤）。 @hasusuf 谢谢，它有效！但是block-no-empty 和unit-whitelist 呢？这里不需要这个，对吧？ Tailwind 本身有 px 单位，所以我不明白为什么它们没有被列入白名单。这只是个人喜好吗？ @RamboNo5 配置与stylelint-config-recommended相关【参考方案2】：

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

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

【讨论】：

PostCSS 语言支持扩展现在也绑定到 .css 文件，因此无需更改扩展 我做了类似的事情，调用文件filename.pcss.css 来跟踪什么是css vs postcss。【参考方案3】：

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

我在 VSCode

中安装了“language-stylus”插件

设置> 用户设置：

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

待会见！

CSS Intellisence is incomplete

【讨论】：

【参考方案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,

【讨论】：

【参考方案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 并且不会接收此类指令。

【讨论】：

感谢您提供不需要任何项目或包更改的解决方案。恕我直言，这应该是主要答案。 ❤️ > 请注意，您必须重新加载 VS Code 窗口才能获取更改。 ~~~ 它为我立即加载（VSCode 1.46.1 Win10）。感谢所有指令列表。 这是部分解决方案，与***.com/a/62801203/640208 中建议的安装 PostCSS 语言支持不同。 我真的更喜欢这个解决方案，而不是安装不必要的包。 我为@apply 添加了一个部分，它对我有用。我确实必须先重新加载 VS Code。【参考方案6】：

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

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

【讨论】：

【参考方案7】：

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

【讨论】：

似乎不适用于 VueJS、Volar 和 .vue 文件 对于像我这样想在.scss 文件（在我的情况下为 Angular 应用程序）上使用此功能的人，请将其添加到您的settings.json："files.associations": "*.scss": "postcss" 就像一个魅力。谢谢 虽然这对我来说消除了警告，但它也禁用了 CSS 的所有智能感知。我只能假设我做错了什么或忘记了一个步骤，但很难说当只有 1 个时可以忘记哪个步骤......【参考方案8】：

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

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

【讨论】：

这对我有用。干净利落。谢谢。 （VS 1.52.1 版） 这不起作用……它只会关闭所有智能。啊！ 它对我有用，只添加了这个“scss.lint.unknownAtRules”：“ignore”，注意 scss 之前的 s。因为这就是我正在使用的！谢谢！【参考方案9】：

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

【讨论】：

问题是如何添加顺风支持。忽略它并跳过语法意识是一个糟糕的答案。 这是一个伟大而简单的答案！它不需要安装危险的插件来解决一个简单的问题。谢谢！【参考方案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

【讨论】：

【参考方案11】：

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

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

【讨论】：

以上是关于如何将@tailwind CSS 规则添加到 CSS 检查器的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 Next.js 将 PNG 徽标添加到 Tailwind CSS 导航栏？

将 Tailwind.css 添加到 Vue.js 项目后，某些类没有效果

将导航选项卡添加到 Tailwind CSS 导航栏

Tailwind CSS 不适用于 React App

如何在没有 Webpacker 的情况下将 Tailwind CSS 添加到 Rails？

如何从 Tailwind 中拆分生成的 CSS 代码？