diff --git a/src/extension.ts b/src/extension.ts
index 434792823a14a7e10fb27668aea1e8a91b832ab4..0c59ad4e9246207b6dc8a4b69647fb26176a7386 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -144,7 +144,7 @@ }
 
 function depthOf(obj) {
 'use strict'
-  let tw
+function prefixItems(items, str, prefix) {
 
   let level = 1
 
@@ -209,15 +209,56 @@   return items
 }
 
 'use strict'
+  const addPrefix =
+  let items = {}
+  let i = 0
+
+  Object.keys(config).forEach(key => {
+    let item = new vscode.CompletionItem(
+      key,
+      vscode.CompletionItemKind.Constant
     )
+
+    if (depthOf(config[key]) === 0) {
+      if (key === 'plugins') return
+
+      item.filterText = item.insertText = `.${key}`
+      item.sortText = naturalExpand(i.toString())
+      if (typeof config[key] === 'string' || typeof config[key] === 'number') {
+
 'use strict'
+      } else if (Array.isArray(config[key])) {
+        item.detail = stringifyArray(config[key])
+export async function activate(context: vscode.ExtensionContext) {
 const tailwindClassNames = require('tailwind-class-names')
+
 'use strict'
+import * as vscode from 'vscode'
 'use strict'
 const tailwindClassNames = require('tailwind-class-names')
 
+  let intellisense = new TailwindIntellisense(tw)
+
+
   context.subscriptions.push(intellisense)
+      item.sortText = naturalExpand(i.toString())
+'use strict'
 import * as vscode from 'vscode'
+const dlv = require('dlv')
+      items[key] = { item, children: createConfigItems(config[key]) }
+    }
+
+    i++
+  })
+
+  return items
+}
+
+class TailwindIntellisense {
+  private _completionProviders: vscode.Disposable[]
+  private _disposable: vscode.Disposable
+  private _items
+  private _configItems
 
   constructor(tailwind) {
     if (tailwind) {
@@ -233,6 +272,7 @@
     if (separator !== ':') return
 
     this._items = createItems(tailwind.classNames, separator, tailwind.config)
+    this._configItems = createConfigItems(tailwind.config)
 
     this._completionProviders = []
 
@@ -284,6 +324,48 @@       )
     )
 
 'use strict'
+  return vscode.languages.registerCompletionItemProvider(
+      vscode.languages.registerCompletionItemProvider(
+        ['css', 'sass', 'scss'],
+        {
+          provideCompletionItems: (
+            document: vscode.TextDocument,
+            position: vscode.Position
+          ): vscode.CompletionItem[] => {
+            const range: vscode.Range = new vscode.Range(
+              new vscode.Position(Math.max(position.line - 5, 0), 0),
+              position
+            )
+            const text: string = document.getText(range)
+
+            let matches = text.match(/config\(["']([^"']*)$/)
+
+            if (!matches) return []
+
+            let objPath =
+              matches[1]
+                .replace(/\.[^.]*$/, '')
+                .replace('.', '.children.')
+                .trim() + '.children'
+            let foo = dlv(this._configItems, objPath)
+
+            if (foo) {
+              console.log(Object.keys(foo).map(x => foo[x].item))
+              return Object.keys(foo).map(x => foo[x].item)
+            }
+
+            return Object.keys(this._configItems).map(
+              x => this._configItems[x].item
+            )
+          }
+        },
+        "'",
+        '"',
+        '.'
+      )
+    )
+
+'use strict'
         return []
   }
 
@@ -293,3 +375,25 @@       this._disposable.dispose()
     }
   }
 }
+
+function pad(n) {
+  return ('00000000' + n).substr(-8)
+}
+
+function naturalExpand(a: string) {
+  return a.replace(/\d+/g, pad)
+}
+
+function stringifyArray(arr: Array<any>): string {
+  return arr
+    .reduce((acc, curr) => {
+      let str = curr.toString()
+      if (str.includes(' ')) {
+        acc.push(`"${str.replace(/\s\s+/g, ' ')}"`)
+      } else {
+        acc.push(str)
+      }
+      return acc
+    }, [])
+    .join(', ')
+}