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,27 +286,119 @@     }),
   }
 }
 
+function provideCssDirectiveCompletions(
+  state: State,
+  { position, textDocument }: CompletionParams
+): CompletionList {
+  let doc = state.editor.documents.get(textDocument.uri)
+
 import { State } from '../util/state'
+  // TODO
+  CompletionList,
 } from 'vscode-languageserver'
+  }
+
+  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[] = [
+  let classNames = classList.split(/[\s+]/)
   CompletionParams,
 import {
+          ...replacementRange.start,
+      documentation: {
+        kind: MarkupKind.Markdown,
+        value:
+  const partialClassName = classNames[classNames.length - 1]
+  const partialClassName = classNames[classNames.length - 1]
 import { State } from '../util/state'
+    },
+    {
+      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)',
+  const partialClassName = classNames[classNames.length - 1]
 import { State } from '../util/state'
+    },
+    {
+      label: '@responsive',
+  let classNames = classList.split(/[\s+]/)
   MarkupKind,
 import {
+            replacementRange.start.character +
+        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)',
+      },
   CompletionItem,
+  Range,
+    {
+      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)',
+  const partialClassName = classNames[classNames.length - 1]
 import { State } from '../util/state'
+    },
+    {
+      label: '@apply',
+      documentation: {
+        kind: MarkupKind.Markdown,
+  let classNames = classList.split(/[\s+]/)
 } from 'vscode-languageserver'
+          '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)',
+      },
+  CompletionItem,
   Range,
+  ]
 
+  return {
+    isIncomplete: false,
+  // TODO
 import { State } from '../util/state'
+      ...item,
+      kind: CompletionItemKind.Keyword,
+      data: 'directive',
+      textEdit: {
+        newText: item.label,
+        range: {
+          start: {
+  // TODO
 } from 'vscode-languageserver'
+            character: position.character - match.groups.partial.length - 1,
+  MarkupKind,
   MarkupKind,
+  let sep = ':'
 import { State } from '../util/state'
+        },
+      },
+    })),
+  }
+  MarkupKind,
 } from 'vscode-languageserver'
+import { State } from '../util/state'
   CompletionList,
 function completionsFromClassList(
+  CompletionParams,
+  state: State,
+  params: CompletionParams
+): CompletionList {
+import { State } from '../util/state'
 } from 'vscode-languageserver'
+  Range,
+
+  return (
+    provideClassNameCompletions(state, params) ||
+    provideCssHelperCompletions(state, params) ||
+    provideCssDirectiveCompletions(state, params)
   )
 }
 
@@ -315,7 +407,7 @@   state: State,
   item: CompletionItem
 ): CompletionItem {
 import {
-  CompletionItemKind,
+            newText: className,
     return item
   }