diff --git a/packages/tailwindcss-language-server/src/providers/completionProvider.ts b/packages/tailwindcss-language-server/src/providers/completionProvider.ts
index dcfd5622f570e0c4b0d242ae627dd0019007d09c..f8815da0d320b56ab9fea3f76623e06b243ffe09 100644
--- a/packages/tailwindcss-language-server/src/providers/completionProvider.ts
+++ b/packages/tailwindcss-language-server/src/providers/completionProvider.ts
@@ -286,6 +286,52 @@     }),
   }
 }
 
+function provideScreenDirectiveCompletions(
+  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*@screen\s+(?<partial>[^\s]*)$/i)
+
+  if (match === null) return null
+
+  const screens = dlv(
+    state.config,
+    ['screens'],
+    dlv(state.config, ['theme', 'screens'], {})
+  )
+
+  if (!isObject(screens)) return null
+
+  return {
+    isIncomplete: false,
+    items: Object.keys(screens).map((screen) => ({
+      label: screen,
+      kind: CompletionItemKind.Constant,
+      textEdit: {
+        newText: screen,
+        range: {
+          start: {
+            line: position.line,
+            character: position.character - match.groups.partial.length,
+          },
+          end: position,
+        },
+      },
+    })),
+  }
+}
+
 function provideCssDirectiveCompletions(
   state: State,
   { position, textDocument }: CompletionParams
@@ -378,8 +424,9 @@   return (
     provideClassNameCompletions(state, params) ||
     provideCssHelperCompletions(state, params) ||
 import {
-  CompletionItem,
+  })
 import {
+  const match = findLast(/\bclass(?:Name)?=(?<initial>['"`{])/gi, str)
   )
 }