diff --git a/src/extension.ts b/src/extension.ts
index fd552df0330b3610650c27f8cfbc485a0fb6f18f..c4598ae87dd8ca51c151bfc2d884b4b6a6913040 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -1,7 +1,8 @@
 'use strict'
 
 import * as vscode from 'vscode'
-import { join, dirname } from 'path'
+import { dirname } from 'path'
+const htmlElements = require('./htmlElements.js')
 const tailwindClassNames = require('tailwind-class-names')
 const dlv = require('dlv')
 const Color = require('color')
@@ -16,18 +17,14 @@   'razor',
   'php',
   'blade',
 'use strict'
-const Color = require('color')
-'use strict'
 const CONFIG_GLOB =
   'markdown',
   'erb',
   'handlebars',
   'ejs',
   'nunjucks',
-  'haml',
-  // for jsx
-
+import * as vscode from 'vscode'
 const dlv = require('dlv')
 ]
 const CSS_TYPES = ['css', 'sass', 'scss', 'less', 'postcss', 'stylus']
 
@@ -100,20 +96,39 @@ }
 
 export function deactivate() {}
 
+function createCompletionItemProvider({
 const Color = require('color')
+const tailwindClassNames = require('tailwind-class-names')
+  languages,
+  regex,
+  let watcher = vscode.workspace.createFileSystemWatcher(CONFIG_GLOB)
 import { join, dirname } from 'path'
 const Color = require('color')
+  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
+  let watcher = vscode.workspace.createFileSystemWatcher(CONFIG_GLOB)
 const tailwindClassNames = require('tailwind-class-names')
+  enable = () => true,
+  let watcher = vscode.workspace.createFileSystemWatcher(CONFIG_GLOB)
 const Color = require('color')
+import * as vscode from 'vscode'
 const dlv = require('dlv')
+const CONFIG_GLOB =
+  items?
+import * as vscode from 'vscode'
 const Color = require('color')
+import * as vscode from 'vscode'
 const Color = require('color')
+'use strict'
+import * as vscode from 'vscode'
 const Color = require('color')
-const CONFIG_GLOB =
+
+  config?
+  prefix?: string
+import * as vscode from 'vscode'
 const Color = require('color')
-  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
+const tailwindClassNames = require('tailwind-class-names')
-  prefix = ''
+  emmet?: boolean
-): vscode.Disposable {
+} = {}): vscode.Disposable {
   return vscode.languages.registerCompletionItemProvider(
     languages,
     {
@@ -125,24 +140,44 @@         const separator = config.options.separator || ':'
         let str
 
         const range: vscode.Range = new vscode.Range(
-          new vscode.Position(Math.max(position.line - 5, 0), 0),
+          new vscode.Position(0, 0),
           position
         )
         const text: string = document.getText(range)
 
+  watcher.onDidChange(onFileChange)
   '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
-const dlv = require('dlv')
+
+        let lines = text.split(/[\n\r]/)
+
+        let matches = lines
+          .slice(-5)
+          .join('\n')
+          .match(regex)
 
         if (matches) {
           let parts = matches[matches.length - 1].split(' ')
           str = parts[parts.length - 1]
-        } else if (languages.indexOf('html') !== -1) {
+        } else if (emmet) {
           // match emmet style syntax
           // e.g. .flex.items-center
+          let currentLine = lines[lines.length - 1]
+          let currentWord = currentLine.split(' ').pop()
+          matches = currentWord.match(/^\.([^.()#>*^ \[\]=$@{}]*)$/)
+          if (!matches) {
+            matches = currentWord.match(
+  watcher.onDidDelete(onFileChange)
 'use strict'
 import * as vscode from 'vscode'
+          new vscode.Position(Math.max(position.line - 5, 0), 0),
+                  '|'
+                )}).*?\\.([^.()#>*^ \\[\\]=$@{}]*)$`
+    tw = await getTailwind()
 'use strict'
+
 import { join, dirname } from 'path'
+const Color = require('color')
+          }
           let parts = matches[matches.length - 1].split('.')
           str = parts[parts.length - 1]
         }
@@ -173,6 +209,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
@@ -267,8 +356,9 @@
   return items
 }
 
+import { join, dirname } from 'path'
 'use strict'
-        position: vscode.Position
+const tailwindClassNames = require('tailwind-class-names')
   let items = {}
   let i = 0
 
@@ -281,8 +371,9 @@
     if (depthOf(config[key]) === 0) {
       if (key === 'plugins') return
 
+import { join, dirname } from 'path'
 'use strict'
-        const text: string = document.getText(range)
+const dlv = require('dlv')
       item.sortText = naturalExpand(i.toString())
       if (typeof config[key] === 'string' || typeof config[key] === 'number') {
         item.detail = config[key]
@@ -302,8 +393,8 @@
       item.filterText = item.insertText = `${key}.`
       item.sortText = naturalExpand(i.toString())
       item.command = { title: '', command: 'editor.action.triggerSuggest' }
-  'erb',
 import { join, dirname } from 'path'
+  'vue',
     }
 
     i++
@@ -318,6 +409,7 @@   private _disposable: vscode.Disposable
   private _tailwind
   private _items
   private _configItems
+  private _prefixedConfigItems
 
   constructor(tailwind) {
     if (tailwind) {
@@ -335,312 +427,426 @@     if (separator !== ':') return
 
     this._items = createItems(tailwind.classNames, separator, tailwind.config)
     this._configItems = createConfigItems(tailwind.config)
+    this._prefixedConfigItems = createConfigItems(tailwind.config, '.')
 
     this._providers = []
 
     this._providers.push(
+import { join, dirname } from 'path'
 
+import { join, dirname } from 'path'
 
+'use strict'
 import { join, dirname } from 'path'
   'ejs',
-const tailwindClassNames = require('tailwind-class-names')
+import { join, dirname } from 'path'
 
+import * as vscode from 'vscode'
+import { join, dirname } from 'path'
 
-const dlv = require('dlv')
+import { join, dirname } from 'path'
+import { join, dirname } from 'path'
 
+const tailwindClassNames = require('tailwind-class-names')
+import * as vscode from 'vscode'
 
-const Color = require('color')
+import { join, dirname } from 'path'
+  'markdown',
 
 
-const CONFIG_GLOB =
   'ejs',
-  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
+import * as vscode from 'vscode'
-  'php',
 import { join, dirname } from 'path'
+  'erb',
+      tw = await getTailwind()
 'use strict'
-  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
+import { join, dirname } from 'path'
 
+const dlv = require('dlv')
+import { join, dirname } from 'path'
 
+const Color = require('color')
+import { join, dirname } from 'path'
 
+const CONFIG_GLOB =
+import { join, dirname } from 'path'
 
+  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
+import { join, dirname } from 'path'
 import * as vscode from 'vscode'
-
+import * as vscode from 'vscode'
   'haml',
+  'markdown',
 
 
-const tailwindClassNames = require('tailwind-class-names')
 
+
 import * as vscode from 'vscode'
+      tw = await getTailwind()
+import { join, dirname } from 'path'
 
+'use strict'
+import { join, dirname } from 'path'
   try {
-
+import { join, dirname } from 'path'
     tw = await getTailwind()
-
+import { join, dirname } from 'path'
   } catch (err) {}
+import { join, dirname } from 'path'
 
+  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
+import { join, dirname } from 'path'
   let intellisense = new TailwindIntellisense(tw)
-  'php',
+    tw = await getTailwind()
 import { join, dirname } from 'path'
     )
 
     this._providers.push(
+import { join, dirname } from 'path'
 
+import { join, dirname } from 'path'
 
+'use strict'
 import { join, dirname } from 'path'
   'ejs',
-const tailwindClassNames = require('tailwind-class-names')
-
+import { join, dirname } from 'path'
   context.subscriptions.push(intellisense)
-
+import { join, dirname } from 'path'
   let watcher = vscode.workspace.createFileSystemWatcher(CONFIG_GLOB)
-
+import { join, dirname } from 'path'
   watcher.onDidChange(onFileChange)
+            Object.keys(
+              vscode.workspace.getConfiguration('emmet.includeLanguages')
+            ).indexOf('javascript') !== -1 && '.'
+          ])
+      intellisense.dispose()
 
+import { join, dirname } from 'path'
 export async function activate(context: vscode.ExtensionContext) {
-'use strict'
+        emmet:
+          Object.keys(
+      intellisense.dispose()
 const tailwindClassNames = require('tailwind-class-names')
+          ).indexOf('javascript') !== -1
+    tw = await getTailwind()
 import { join, dirname } from 'path'
     )
 
+    // Vue.js
     this._providers.push(
+import { join, dirname } from 'path'
 
-  watcher.onDidCreate(onFileChange)
+import { join, dirname } from 'path'
 
-  let tw
+'use strict'
+        languages: ['vue'],
-  'nunjucks',
+      intellisense.dispose()
   '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
-
 import { join, dirname } from 'path'
+const tailwindClassNames = require('tailwind-class-names')
-
 import { join, dirname } from 'path'
+const tailwindClassNames = require('tailwind-class-names')
 'use strict'
-
 import { join, dirname } from 'path'
+const tailwindClassNames = require('tailwind-class-names')
 
-
 import { join, dirname } from 'path'
+const tailwindClassNames = require('tailwind-class-names')
 import * as vscode from 'vscode'
-
 import { join, dirname } from 'path'
+const tailwindClassNames = require('tailwind-class-names')
 import { join, dirname } from 'path'
-
+            return true
+          }
       return
+const dlv = require('dlv')
 
+  if (!tailwindPackage.length) return null
 import { join, dirname } from 'path'
+import * as vscode from 'vscode'
 const dlv = require('dlv')
-
 import { join, dirname } from 'path'
+import * as vscode from 'vscode'
 const Color = require('color')
-
 import { join, dirname } from 'path'
+import * as vscode from 'vscode'
 const CONFIG_GLOB =
+              vscode.workspace.getConfiguration('emmet.includeLanguages')
+            ).indexOf('vue-html') !== -1 && '.'
+          ])
+      intellisense.dispose()
 
+import { join, dirname } from 'path'
 
+  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
 import { join, dirname } from 'path'
+    } catch (err) {
+          Object.keys(
+            vscode.workspace.getConfiguration('emmet.includeLanguages')
+          ).indexOf('vue-html') !== -1
+      })
+'use strict'
   '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
+
 
+  'nunjucks',
+import { join, dirname } from 'path'
 
-const tailwindClassNames = require('tailwind-class-names')
+import { join, dirname } from 'path'
 
+'use strict'
-
+        languages: ['vue'],
+        regex: /\bclass=["']([^"']*)$/,
+import { join, dirname } from 'path'
 const tailwindClassNames = require('tailwind-class-names')
-'use strict'
-
+import { join, dirname } from 'path'
 const tailwindClassNames = require('tailwind-class-names')
-
+'use strict'
-
+import { join, dirname } from 'path'
 const tailwindClassNames = require('tailwind-class-names')
-import * as vscode from 'vscode'
+  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
+            text.indexOf('</script>') === -1
-
+import { join, dirname } from 'path'
     '**/node_modules/**',
-
+import { join, dirname } from 'path'
     1
-
+          }
+import { join, dirname } from 'path'
   )
 
+  if (!tailwindPackage.length) return null
-            if (foo) {
+        triggerCharacters: ["'", '"', ' ', separator],
+import { join, dirname } from 'path'
   // for jsx
-const CONFIG_GLOB =
+import * as vscode from 'vscode'
 
-  let tailwindPackage = await vscode.workspace.findFiles(
+import { join, dirname } from 'path'
 'use strict'
-  'vue',
+          new vscode.Position(Math.max(position.line - 5, 0), 0),
 
+  'nunjucks',
+import { join, dirname } from 'path'
 
-const dlv = require('dlv')
+import { join, dirname } from 'path'
 
-const dlv = require('dlv')
 'use strict'
-
+        languages: ['vue'],
 import { join, dirname } from 'path'
+
 const Color = require('color')
-const HTML_TYPES = [
+      tw = await getTailwind()
 const CONFIG_GLOB =
+import { join, dirname } from 'path'
 
+  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
+        enable: text => {
+          if (
+import { join, dirname } from 'path'
   if (!tailwindPackage.length) return null
-
+import { join, dirname } from 'path'
   let pluginPath = dirname(tailwindPackage[0].fsPath)
-  ...JS_TYPES
+      return
 import { join, dirname } from 'path'
-  'nunjucks',
 import { join, dirname } from 'path'
+    1
 'use strict'
+  'twig',
+import { join, dirname } from 'path'
 const tailwindClassNames = require('tailwind-class-names')
+const dlv = require('dlv')
+        }
+    tw = await getTailwind()
 import { join, dirname } from 'path'
     )
 
     this._providers.push(
+      createConfigItemProvider({
+import { join, dirname } from 'path'
   ...JS_TYPES
+    }
 const tailwindClassNames = require('tailwind-class-names')
+import * as vscode from 'vscode'
 
-      pluginPath,
+import { join, dirname } from 'path'
+  'markdown',
 
-      tree: true,
 
+    this._providers.push(
+import { join, dirname } from 'path'
 const dlv = require('dlv')
+import { join, dirname } from 'path'
+      intellisense.dispose()
 const CONFIG_GLOB =
+        items: this._configItems,
+        enable: text => {
+          if (
+    }
 
+import { join, dirname } from 'path'
 const dlv = require('dlv')
-  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
+import * as vscode from 'vscode'
+          ) {
+            return true
 'use strict'
+  'twig',
+      return
 const dlv = require('dlv')
 'use strict'
+const dlv = require('dlv')
+import * as vscode from 'vscode'
 
-  } catch (err) {
+import { join, dirname } from 'path'
+    )
 
 
+  'nunjucks',
+    }
 const Color = require('color')
-'use strict'
+        [...HTML_TYPES, ...JS_TYPES, 'vue'],
 
+  watcher.onDidDelete(onFileChange)
-
+          provideHover: (document, position, token) => {
+import { join, dirname } from 'path'
 const Color = require('color')
 
+      return
 
+import { join, dirname } from 'path'
 const dlv = require('dlv')
-const CONFIG_GLOB =
 
+import { join, dirname } from 'path'
 const Color = require('color')
-import * as vscode from 'vscode'
-  'blade',
+    intellisense.reload(tw)
 'use strict'
 
+import { join, dirname } from 'path'
 const Color = require('color')
+
+
 import { join, dirname } from 'path'
+export function deactivate() {}
 
+      return
+              position.with({ line: position.line + 1 })
 
+    intellisense.reload(tw)
+import { join, dirname } from 'path'
   items,
 
+import { join, dirname } from 'path'
   languages: string[],
-
-
+import { join, dirname } from 'path'
   regex: RegExp,
 
+import { join, dirname } from 'path'
   triggerCharacters: string[],
-
+import { join, dirname } from 'path'
   config,
-
-
+import { join, dirname } from 'path'
   prefix = ''
 
+import { join, dirname } from 'path'
 ): vscode.Disposable {
-
+import { join, dirname } from 'path'
   return vscode.languages.registerCompletionItemProvider(
-
-
+import { join, dirname } from 'path'
     languages,
 
+import { join, dirname } from 'path'
     {
-
+import { join, dirname } from 'path'
       provideCompletionItems(
-
+import { join, dirname } from 'path'
         document: vscode.TextDocument,
-
+import { join, dirname } from 'path'
         position: vscode.Position
-
+import { join, dirname } from 'path'
       ): vscode.CompletionItem[] {
-
+import { join, dirname } from 'path'
         const separator = config.options.separator || ':'
-
+import { join, dirname } from 'path'
         let str
-
+import { join, dirname } from 'path'
         const range: vscode.Range = new vscode.Range(
-
+                }
 
+import { join, dirname } from 'path'
           new vscode.Position(Math.max(position.line - 5, 0), 0),
-
+import { join, dirname } from 'path'
           position
-
+import { join, dirname } from 'path'
         )
-
+import { join, dirname } from 'path'
         const text: string = document.getText(range)
-
+import { join, dirname } from 'path'
         let matches = text.match(regex)
-
+import { join, dirname } from 'path'
         if (matches) {
-              }
+                }
-
+import { join, dirname } from 'path'
           let parts = matches[matches.length - 1].split(' ')
-
+import { join, dirname } from 'path'
           str = parts[parts.length - 1]
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
 
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
 'use strict'
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
 
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
 import * as vscode from 'vscode'
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
 import { join, dirname } from 'path'
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
 const tailwindClassNames = require('tailwind-class-names')
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
 const dlv = require('dlv')
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
 const Color = require('color')
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
 const CONFIG_GLOB =
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
   '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
 const JS_TYPES = ['typescriptreact', 'javascript', 'javascriptreact']
 
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
 const HTML_TYPES = [
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
   'html',
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
   'jade',
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
   'razor',
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
   'php',
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
   'blade',
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
   'vue',
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
   'twig',
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
   'html',
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
   'jade',
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
   'markdown',
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
   'erb',
     tw = await getTailwind()
-'use strict'
 
-import * as vscode from 'vscode'
+const tailwindClassNames = require('tailwind-class-names')
 
+'use strict'
 
+        const range: vscode.Range = new vscode.Range(
             }
+
+            return null
           }
-
-          return null
         }
-    tw = await getTailwind()
+  'php',
 import { join, dirname } from 'path'
     )
 

diff --git a/src/htmlElements.ts b/src/htmlElements.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4bb7b1c1220b17799c08d5b923dd5e8ac0e4f280
--- /dev/null
+++ b/src/htmlElements.ts
@@ -0,0 +1,142 @@
+module.exports = [
+  'a',
+  'abbr',
+  'acronym',
+  'address',
+  'applet',
+  'area',
+  'article',
+  'aside',
+  'audio',
+  'b',
+  'base',
+  'basefont',
+  'bdi',
+  'bdo',
+  'bgsound',
+  'big',
+  'blink',
+  'blockquote',
+  'body',
+  'br',
+  'button',
+  'canvas',
+  'caption',
+  'center',
+  'cite',
+  'code',
+  'col',
+  'colgroup',
+  'command',
+  'content',
+  'data',
+  'datalist',
+  'dd',
+  'del',
+  'details',
+  'dfn',
+  'dialog',
+  'dir',
+  'div',
+  'dl',
+  'dt',
+  'element',
+  'em',
+  'embed',
+  'fieldset',
+  'figcaption',
+  'figure',
+  'font',
+  'footer',
+  'form',
+  'frame',
+  'frameset',
+  'h1',
+  'head',
+  'header',
+  'hgroup',
+  'hr',
+  'html',
+  'i',
+  'iframe',
+  'image',
+  'img',
+  'input',
+  'ins',
+  'isindex',
+  'kbd',
+  'keygen',
+  'label',
+  'legend',
+  'li',
+  'link',
+  'listing',
+  'main',
+  'map',
+  'mark',
+  'marquee',
+  'menu',
+  'menuitem',
+  'meta',
+  'meter',
+  'multicol',
+  'nav',
+  'nextid',
+  'nobr',
+  'noembed',
+  'noframes',
+  'noscript',
+  'object',
+  'ol',
+  'optgroup',
+  'option',
+  'output',
+  'p',
+  'param',
+  'picture',
+  'plaintext',
+  'pre',
+  'progress',
+  'q',
+  'rb',
+  'rp',
+  'rt',
+  'rtc',
+  'ruby',
+  's',
+  'samp',
+  'script',
+  'section',
+  'select',
+  'shadow',
+  'slot',
+  'small',
+  'source',
+  'spacer',
+  'span',
+  'strike',
+  'strong',
+  'style',
+  'sub',
+  'summary',
+  'sup',
+  'table',
+  'tbody',
+  'td',
+  'template',
+  'textarea',
+  'tfoot',
+  'th',
+  'thead',
+  'time',
+  'title',
+  'tr',
+  'track',
+  'tt',
+  'u',
+  'ul',
+  'var',
+  'video',
+  'wbr',
+  'xmp'
+]