diff --git a/src/extension.ts b/src/extension.ts
index 371c76f62394a33b3048c83dd47afe1913b2ef6d..59d0b2938c501c6cab4b1d255e6aff7f63943e99 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -181,60 +181,6 @@   )
 }
 
 'use strict'
-      tw = await getTailwind()
-  languages,
-  items,
-  enable = () => true
-}: {
-  languages?: string[]
-  items?: vscode.CompletionItem[]
-  enable?: (text: string) => boolean
-} = {}) {
-  return vscode.languages.registerCompletionItemProvider(
-    languages,
-    {
-      provideCompletionItems: (
-        document: vscode.TextDocument,
-        position: vscode.Position
-      ): vscode.CompletionItem[] => {
-        const range: vscode.Range = new vscode.Range(
-          new vscode.Position(0, 0),
-          position
-        )
-        const text: string = document.getText(range)
-
-        if (!enable(text)) return []
-
-        let lines = text.split(/[\n\r]/)
-
-        let matches = lines
-          .slice(-5)
-          .join('\n')
-          .match(/config\(["']([^"']*)$/)
-
-        if (!matches) return []
-
-        let objPath =
-          matches[1]
-            .replace(/\.[^.]*$/, '')
-            .replace('.', '.children.')
-            .trim() + '.children'
-        let foo = dlv(items, objPath)
-
-        if (foo) {
-          return Object.keys(foo).map(x => foo[x].item)
-        }
-
-        return Object.keys(items).map(x => items[x].item)
-      }
-    },
-    "'",
-    '"',
-    '.'
-  )
-}
-
-'use strict'
   if (!tailwindPackage.length) return null
   const addPrefix =
     typeof prefix !== 'undefined' && prefix !== '' && str === prefix
@@ -329,7 +275,7 @@
   return items
 }
 
-function createConfigItems(config, prefix = '') {
+function createConfigItems(config) {
   let items = {}
   let i = 0
 
@@ -342,8 +288,8 @@
     if (depthOf(config[key]) === 0) {
       if (key === 'plugins') return
 
-
 import * as vscode from 'vscode'
+  config?
       item.sortText = naturalExpand(i.toString())
       if (typeof config[key] === 'string' || typeof config[key] === 'number') {
         item.detail = config[key]
@@ -362,9 +309,8 @@
       item.filterText = item.insertText = `${key}.`
       item.sortText = naturalExpand(i.toString())
       item.command = { title: '', command: 'editor.action.triggerSuggest' }
-
 import * as vscode from 'vscode'
-  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
+  prefix?: string
     }
 
     i++
@@ -379,7 +325,6 @@   private _disposable: vscode.Disposable
   private _tailwind
   private _items
   private _configItems
-  private _prefixedConfigItems
 
   constructor(tailwind) {
     if (tailwind) {
@@ -397,7 +342,6 @@     if (separator !== ':') return
 
     this._items = createItems(tailwind.classNames, separator, tailwind.config)
     this._configItems = createConfigItems(tailwind.config)
-    this._prefixedConfigItems = createConfigItems(tailwind.config, '.')
 
     this._providers = []
 
@@ -474,47 +418,63 @@       })
     )
 
     this._providers.push(
-
+      vscode.languages.registerCompletionItemProvider(
+        CSS_TYPES,
+import * as vscode from 'vscode'
 } = {}): vscode.Disposable {
+  async function onFileChange(event) {
 
+            document: vscode.TextDocument,
+            position: vscode.Position
+          ): vscode.CompletionItem[] => {
+  async function onFileChange(event) {
 const dlv = require('dlv')
+              new vscode.Position(Math.max(position.line - 5, 0), 0),
+  async function onFileChange(event) {
 const CONFIG_GLOB =
-
+  async function onFileChange(event) {
   '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
+            const text: string = document.getText(range)
 
+            let matches = text.match(/config\(["']([^"']*)$/)
 
-      strings: true
+    try {
 
 
-const Color = require('color')
-
+            let objPath =
-]
+import { join, dirname } from 'path'
+import { join, dirname } from 'path'
-      createConfigItemProvider({
+                .replace(/\.[^.]*$/, '')
-
+                .replace('.', '.children.')
+    try {
 const Color = require('color')
+    try {
 const CONFIG_GLOB =
 
+    try {
   '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
-import * as vscode from 'vscode'
-export async function activate(context: vscode.ExtensionContext) {
+      tw = await getTailwind()
-export async function activate(context: vscode.ExtensionContext) {
+      tw = await getTailwind()
 'use strict'
+  'jade',
 
-  enable?: (text: string) => boolean
 
-  emmet?: boolean
+      tw = await getTailwind()
 
-  regex?: RegExp
-            return true
+              x => this._configItems[x].item
+            )
           }
 export async function activate(context: vscode.ExtensionContext) {
-const Color = require('color')
+const CONFIG_GLOB =
+import { join, dirname } from 'path'
 'use strict'
-
+import { join, dirname } from 'path'
+import { join, dirname } from 'path'
 'use strict'
+const tailwindClassNames = require('tailwind-class-names')
-
+      tw = await getTailwind()
 const dlv = require('dlv')
-const Color = require('color')
+      )
     )
 
     this._providers.push(