我的建议是安装postCSS语言支持，然后重命名tailwind.css为tailwind。然后PCSS更改包中的引用。Json脚本(或任何构建脚本你正在使用顺风)顺风。PCSS从顺风。css和一切应该工作正常。

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

当前推荐的VS代码设置(更新于2022年12月15日)

官方顺风CSS智能感知VS文档

使用这些文件。associations设置告诉VS Code总是在顺风CSS模式下打开。CSS文件:

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

提示:按Ctrl +，从VS Code打开设置;然后，输入“Files Associations”。

默认情况下，VS Code在编辑“字符串”内容时不会触发补全，例如在JSX属性值中。更新编辑器。quickrecommendations设置可以改善您的体验:

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

结合两者，你的设置。Json文件(如果是新的)将看起来像这样:

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

来源:https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

以前推荐的VS代码设置(已弃用)

VS Code有内置的CSS验证，当使用tailwind特定的语法时可能会显示错误，比如@apply。你可以在css中禁用它。验证设置:

"css.validate": false

“编辑器。quickrecommendations”设置建议保持不变。结合两者，你的设置。Json文件(如果是新的)看起来类似这样:

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

确保安装PostCSS语言支持，在VSCODE中找到扩展。 这将删除正在显示的错误。

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

VS市场链接:https://marketplace.visualstudio.com/items?itemName=csstools.postcss

注意:从VS Code中卸载PostCSS智能感知和高亮扩展，否则它将无法工作。

我编辑了我的.vscode/settings。通过添加“css. Json”文件。Validate ": false，似乎在没有安装外部库的情况下为我工作。

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

2022 - 05年更新

官方的Tailwind CSS智能感知扩展现在扩展了内置的CSS语言模式来修复这些lint警告，而不会失去任何VS Code的默认智能感知功能。

查看推荐的VS代码设置部分，为工作空间中的所有CSS文件启用此功能。

如果您不想安装额外的扩展，我在下面保留了我最初的答案，但自从v0.8.0以来，它不再与内置的CSS支持冲突，因此这是我推荐的方法。

没有扩展的旧答案

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 code中突出显示语法):

{
  "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，也不会接收这样的指令。

如果顺风css不像未知规则引起的错误那样工作，你需要重新构建它。例如，如果你已经在本地环境中运行了npm run dev，你可以用ctrl + c退出并再次运行npm run dev来创建一个正常的纯CSS文件，这将使顺风CSS工作。

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