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  }