diff --git a/src/extension.ts b/src/extension.ts
index 59d0b2938c501c6cab4b1d255e6aff7f63943e99..371c76f62394a33b3048c83dd47afe1913b2ef6d 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -180,6 +180,59 @@     ...triggerCharacters
   )
 }
 
+function createConfigItemProvider({
+  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)
+      }
+    },
+    "'",
+    '"',
+    '.'
+  )
+}
+
 function prefixItems(items, str, prefix) {
   const addPrefix =
     typeof prefix !== 'undefined' && prefix !== '' && str === prefix
@@ -274,8 +327,8 @@
   return items
 }
 
-
+import { join, dirname } from 'path'
-
+  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
   let items = {}
   let i = 0
 
@@ -288,7 +341,7 @@
     if (depthOf(config[key]) === 0) {
       if (key === 'plugins') return
 
-
+import { join, dirname } from 'path'
 const JS_TYPES = ['typescriptreact', 'javascript', 'javascriptreact']
       item.sortText = naturalExpand(i.toString())
       if (typeof config[key] === 'string' || typeof config[key] === 'number') {
@@ -309,9 +362,8 @@
       item.filterText = item.insertText = `${key}.`
       item.sortText = naturalExpand(i.toString())
       item.command = { title: '', command: 'editor.action.triggerSuggest' }
-
+      tw = await getTailwind()
 'use strict'
-  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
     }
 
     i++
@@ -326,6 +378,7 @@   private _disposable: vscode.Disposable
   private _tailwind
   private _items
   private _configItems
+  private _prefixedConfigItems
 
   constructor(tailwind) {
     if (tailwind) {
@@ -343,6 +396,7 @@     if (separator !== ':') return
 
     this._items = createItems(tailwind.classNames, separator, tailwind.config)
     this._configItems = createConfigItems(tailwind.config)
+    this._prefixedConfigItems = createConfigItems(tailwind.config, '.')
 
     this._providers = []
 
@@ -419,74 +473,54 @@       })
     )
 
     this._providers.push(
+      createConfigItemProvider({
 
+import { join, dirname } from 'path'
 const dlv = require('dlv')
-  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
-        CSS_TYPES,
-const CSS_TYPES = ['css', 'sass', 'scss', 'less', 'postcss', 'stylus']
+import { join, dirname } from 'path'
 'use strict'
+const tailwindClassNames = require('tailwind-class-names')
 
-export function deactivate() {}
-            document: vscode.TextDocument,
-const CSS_TYPES = ['css', 'sass', 'scss', 'less', 'postcss', 'stylus']
 import { join, dirname } from 'path'
-const CSS_TYPES = ['css', 'sass', 'scss', 'less', 'postcss', 'stylus']
 const tailwindClassNames = require('tailwind-class-names')
 
 const Color = require('color')
-const dlv = require('dlv')
 
-  triggerCharacters,
 
-const Color = require('color')
+import * as vscode from 'vscode'
 const CONFIG_GLOB =
-            )
-            const text: string = document.getText(range)
+      createConfigItemProvider({
 
+  if (!files.length) return null
-export async function activate(context: vscode.ExtensionContext) {
+import { join, dirname } from 'path'
 'use strict'
-
-            if (!matches) return []
-
-            let objPath =
+const dlv = require('dlv')
 
+const tailwindClassNames = require('tailwind-class-names')
 const CONFIG_GLOB =
-import { join, dirname } from 'path'
 
-const CONFIG_GLOB =
 const tailwindClassNames = require('tailwind-class-names')
+  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
 
-const CONFIG_GLOB =
 const dlv = require('dlv')
-export async function activate(context: vscode.ExtensionContext) {
 const Color = require('color')
 
-const CONFIG_GLOB =
+const dlv = require('dlv')
 const CONFIG_GLOB =
 
+    tw = await tailwindClassNames({
 
-  enable?: (text: string) => boolean
-              console.log(Object.keys(foo).map(x => foo[x].item))
-              return Object.keys(foo).map(x => foo[x].item)
+      configPath,
   'jade',
-
-
-            return Object.keys(this._configItems).map(
-  let tw
 import * as vscode from 'vscode'
 
-  prefix = '',
+      pluginPath,
 'use strict'
-  let intellisense = new TailwindIntellisense(tw)
 
-      tree: true,
+'use strict'
 
-  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
 import { join, dirname } from 'path'
-  let tw
 const tailwindClassNames = require('tailwind-class-names')
-        '.'
-      )
     )
 
     this._providers.push(