VS Code "unknown at rule" in Tailwind solution

Archived from: https://github.com/tailwindlabs/tailwindcss/discussions/5258#discussioncomment-1979394, originally contributed by mrfambo.

In .vscode directory within the workspace, create tailwind.json with the following contents:

 1{
 2  "version": 1.1,
 3  "atDirectives": [
 4    {
 5      "name": "@tailwind",
 6      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
 7      "references": [
 8        {
 9          "name": "Tailwind Documentation",
10          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
11        }
12      ]
13    },
14    {
15      "name": "@apply",
16      "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.",
17      "references": [
18        {
19          "name": "Tailwind Documentation",
20          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
21        }
22      ]
23    },
24    {
25      "name": "@responsive",
26      "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",
27      "references": [
28        {
29          "name": "Tailwind Documentation",
30          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
31        }
32      ]
33    },
34    {
35      "name": "@screen",
36      "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",
37      "references": [
38        {
39          "name": "Tailwind Documentation",
40          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
41        }
42      ]
43    },
44    {
45      "name": "@variants",
46      "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",
47      "references": [
48        {
49          "name": "Tailwind Documentation",
50          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
51        }
52      ]
53    }
54  ]
55}

Create or amend the existing .vscode/settings.json to include:

1{
2  "css.customData": [".vscode/tailwind.json"]
3}

It sometimes needs a restart of VSC before it takes.