1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112

diff --git a/packages/tailwindcss-language-server/src/providers/completionProvider.ts b/packages/tailwindcss-language-server/src/providers/completionProvider.ts
index ac28c18fa5609a397dbe1b23800a31bd8393a65a..dcfd5622f570e0c4b0d242ae627dd0019007d09c 100644
--- a/packages/tailwindcss-language-server/src/providers/completionProvider.ts
+++ b/packages/tailwindcss-language-server/src/providers/completionProvider.ts
@@ -286,6 +286,88 @@     }),
   }
 }
 
+function provideCssDirectiveCompletions(
+  state: State,
+  { position, textDocument }: CompletionParams
+): CompletionList {
+  let doc = state.editor.documents.get(textDocument.uri)
+
+  if (!isCssContext(doc, position)) {
+    return null
+  }
+
+  let text = doc.getText({
+    start: { line: position.line, character: 0 },
+    end: position,
+  })
+
+  const match = text.match(/^\s*@(?<partial>[a-z]*)$/i)
+
+  if (match === null) return null
+
+  const items: CompletionItem[] = [
+    {
+      label: '@tailwind',
+      documentation: {
+        kind: MarkupKind.Markdown,
+        value:
+          'Use the `@tailwind` directive to insert Tailwind’s `base`, `components`, `utilities` and `screens` styles into your CSS.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives#tailwind)',
+      },
+    },
+    {
+      label: '@variants',
+      documentation: {
+        kind: MarkupKind.Markdown,
+        value:
+          'You can generate `responsive`, `hover`, `focus`, `active`, and `group-hover` versions of your own utilities by wrapping their definitions in the `@variants` directive.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives#variants)',
+      },
+    },
+    {
+      label: '@responsive',
+      documentation: {
+        kind: MarkupKind.Markdown,
+        value:
+          'You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives#responsive)',
+      },
+    },
+    {
+      label: '@screen',
+      documentation: {
+        kind: MarkupKind.Markdown,
+        value:
+          '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\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives#screen)',
+      },
+    },
+    {
+      label: '@apply',
+      documentation: {
+        kind: MarkupKind.Markdown,
+        value:
+          'Use `@apply` to inline any existing utility classes into your own custom CSS.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives#apply)',
+      },
+    },
+  ]
+
+  return {
+    isIncomplete: false,
+    items: items.map((item) => ({
+      ...item,
+      kind: CompletionItemKind.Keyword,
+      data: 'directive',
+      textEdit: {
+        newText: item.label,
+        range: {
+          start: {
+            line: position.line,
+            character: position.character - match.groups.partial.length - 1,
+          },
+          end: position,
+        },
+      },
+    })),
+  }
+}
+
 export function provideCompletions(
   state: State,
   params: CompletionParams
@@ -294,7 +376,8 @@   if (state === null) return { items: [], isIncomplete: false }
 
   return (
     provideClassNameCompletions(state, params) ||
-    provideCssHelperCompletions(state, params)
+    provideCssHelperCompletions(state, params) ||
+    provideCssDirectiveCompletions(state, params)
   )
 }
 
@@ -302,7 +385,7 @@ export function resolveCompletionItem(
   state: State,
   item: CompletionItem
 ): CompletionItem {
-  if (item.data === 'helper') {
+  if (item.data === 'helper' || item.data === 'directive') {
     return item
   }