使用Tailwind CSS 如何解决Unknown at rule @applyscss(unknownAtRules)警告？

���案来源：https://duncanleung.com/tailwind-css-unknown-at-rule/

问题如下：

@tailwind base;^^^^^^^^^ Unknown at rule @tailwind css(unknownAtRules)

VSCode 解决方案：在工作区设置文件中 settings.json 加载 Tailwind 指令的自定义 CSS 数据集

注意：通常需要重新加载 VS Code 窗口才能识别更改。

// .vscode/settings.json{  "css.customData": [".vscode/tailwindcss.json"],}

// .vscode/tailwindcss.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": "@apply",      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",      "references": [        {          "name": "Tailwind Documentation",          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"        }      ]    },    {      "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"        }      ]    }  ]}