自己的 .css 中的 @tailwind 基础存在问题（在规则 @tailwindcss（unknownAtRules）中未知）答案

【问题标题】：Problem with @tailwind base in own .css (Unknown at rule @tailwindcss(unknownAtRules)自己的 .css 中的 @tailwind 基础存在问题（在规则 @tailwindcss（unknownAtRules）中未知）
【发布时间】：2022-08-19 04:21:51
【问题描述】：

我在顺风和 vite 中的自定义 css 有问题。我的 maian.js 看起来像：

import \"./styles.css\";
// import \"tailwindcss/tailwind.css\";

document.querySelector(\"#app\").innerHTML = `
  <h1>Hello Vite!</h1>
  <a href=\"https://vitejs.dev/guide/features.html\" target=\"_blank\">Documentation</a>
`;

我的styles.css 看起来像：

@tailwind base;
@tailwind components;
@tailwind utilities;

.header-nav-section {
  @apply bg-gradient-to-br from-gray-100e to-gray-300;
}

但是 vscode 告诉我：

出了什么问题，我阅读了文档，这个案例会奏效。

附言完整回购： https://github.com/mxcdh/vite-tailwind

标签： tailwind-css vite

【解决方案1】：

请按照以下步骤操作

为 CSS 文件 css_custom_data.json 添加以下自定义数据。

将其声明到 VSCode 设置文件中。

.vscode/settings.json：

{
  "css.customData": [".vscode/css_custom_data.json"]
}

.vscode/css_custom_data.json：

{
  "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"
        }
      ]
    }
  ]
}

如果这不起作用，请尝试将您的 node.js 更新到最新的当前稳定版本，然后重试

【讨论】：

【解决方案2】：

你的顺风管用吗？可能只是安装错误。
否则尝试安装官方的 vscode 扩展或disable custom at rules validation

【讨论】：

当我未提交时：//导入“tailwindcss/tailwind.css”；它正在工作，但是当我提交这一行并添加： import "./styles.css";不工作。

【解决方案3】：

如果您在 VSCode 中工作，则需要禁用 unknownAtRules 的 lint 规则。

推荐修复：

在项目的根目录创建 .vscode 创建名为 settings.json 的文件确定您正在使用的文件类型，例如 css 或 scss 创建一个空的 json 对象 {} 在 json 对象内添加，“[第 3 步的文件扩展].lint.unknownAtRules”：“忽略” 这是在 scss 扩展的情况下文件的外观：

.vscode > settings.json

{
  "scss.lint.unknownAtRules": "ignore"
}

它可以帮助您推动 git 中的更改并与团队共享修复。

第二种方式：

在 VSCode 全局 settings.json 中执行与上述相同的操作。它将为您解决问题，但不会为使用相同代码库的其他人解决问题。您可以使用 Cmd+Shift+P 打开文件，然后选择“首选项：打开设置 (JSON)”。通常，它会立即解决问题，但如果需要，您可以重新加载浏览器。

修复：对于 vue，使用“css.lint.unknownAtRules”：“ignore”。学分 => @zijizhu

https://github.com/tailwindlabs/tailwindcss/discussions/5258

https://flaviocopes.com/fix-unknown-at-rule-tailwind/#:~:text=Here's%20how%20to%20fix%20this,Done！

【讨论】：