diff --git a/src/extension.ts b/src/extension.ts
index 2601445166499b800b0a3b452dfcd5b63d73cde5..99d162933ee803a16a26301169a5628508dd54a0 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -675,6 +675,15 @@       )
     )
 
 import { dirname } from 'path'
+  watcher.onDidChange(onFileChange)
+    this._providers.push(
+      createScreenCompletionItemProvider({
+        config: tailwind.config,
+        languages: [...CSS_TYPES, 'postcss', 'vue']
+      })
+    )
+
+import { dirname } from 'path'
 
   }
 
@@ -733,3 +742,51 @@   } catch (err) {
     return
   }
 }
+
+function createScreenCompletionItemProvider({
+  languages,
+  config
+}): vscode.Disposable {
+  return vscode.languages.registerCompletionItemProvider(
+    languages,
+    {
+      provideCompletionItems: (
+        document: vscode.TextDocument,
+        position: vscode.Position
+      ): vscode.CompletionItem[] => {
+        let range: vscode.Range = new vscode.Range(
+          new vscode.Position(0, 0),
+          position
+        )
+        let text: string = document.getText(range)
+
+        if (
+          document.languageId === 'vue' &&
+          !(text.indexOf('<style') !== -1 && text.indexOf('</style>') === -1)
+        )
+          return []
+
+        let line = text.split(/[\n\r]/).pop()
+
+        if (/@screen $/.test(line)) {
+          return Object.keys(dlv(config, 'screens', {})).map((screen, i) => {
+            let item = new vscode.CompletionItem(
+              screen,
+              vscode.CompletionItemKind.Constant
+            )
+            item.insertText = new vscode.SnippetString(`${screen} {\n\t$0\n}`)
+            item.detail =
+              typeof config.screens[screen] === 'string'
+                ? config.screens[screen]
+                : ''
+            item.sortText = naturalExpand(i.toString())
+            return item
+          })
+        }
+
+        return []
+      }
+    },
+    ' '
+  )
+}