diff --git a/src/extension.ts b/src/extension.ts
index c4598ae87dd8ca51c151bfc2d884b4b6a6913040..fd552df0330b3610650c27f8cfbc485a0fb6f18f 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -2,7 +2,7 @@ 'use strict'
 
 import * as vscode from 'vscode'
 import { dirname } from 'path'
-const htmlElements = require('./htmlElements.js')
+  'html',
 const tailwindClassNames = require('tailwind-class-names')
 const dlv = require('dlv')
 const Color = require('color')
@@ -16,14 +16,17 @@   'jade',
   'razor',
   'php',
   'blade',
+  'vue',
   'twig',
   'markdown',
   'erb',
   'handlebars',
   'ejs',
   'nunjucks',
-
+  'haml',
+  // for jsx
 import { dirname } from 'path'
+  'blade',
 ]
 const CSS_TYPES = ['css', 'sass', 'scss', 'less', 'postcss', 'stylus']
 
@@ -96,30 +99,19 @@ }
 
 export function deactivate() {}
 
-function createCompletionItemProvider({
+function createCompletionItemProvider(
   items,
-const dlv = require('dlv')
 import { dirname } from 'path'
-  regex,
-  triggerCharacters,
-  config,
-  prefix = '',
-const dlv = require('dlv')
+'use strict'
 const CONFIG_GLOB =
-const Color = require('color')
+      intellisense.dispose()
-const Color = require('color')
+      intellisense.dispose()
 'use strict'
-const Color = require('color')
+  config,
+      intellisense.dispose()
 
-const Color = require('color')
+      intellisense.dispose()
 import * as vscode from 'vscode'
-  regex?: RegExp
-  triggerCharacters?: string[]
-  config?
-  prefix?: string
-  enable?: (text: string) => boolean
-  emmet?: boolean
-} = {}): vscode.Disposable {
   return vscode.languages.registerCompletionItemProvider(
     languages,
     {
@@ -131,41 +123,25 @@         const separator = config.options.separator || ':'
         let str
 
         const range: vscode.Range = new vscode.Range(
-          new vscode.Position(0, 0),
+          new vscode.Position(Math.max(position.line - 5, 0), 0),
           position
         )
         const text: string = document.getText(range)
 
-        if (!enable(text)) return []
+import { dirname } from 'path'
 
-        let lines = text.split(/[\n\r]/)
-
-        let matches = lines
-          .slice(-5)
-          .join('\n')
-          .match(regex)
+const htmlElements = require('./htmlElements.js')
 
         if (matches) {
           let parts = matches[matches.length - 1].split(' ')
           str = parts[parts.length - 1]
-const JS_TYPES = ['typescriptreact', 'javascript', 'javascriptreact']
 import { dirname } from 'path'
+const CSS_TYPES = ['css', 'sass', 'scss', 'less', 'postcss', 'stylus']
           // 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(
-              new RegExp(
-                `^([A-Z][a-zA-Z0-9]*|[a-z][a-z0-9]*-[a-z0-9-]+|${htmlElements.join(
-const HTML_TYPES = [
 import { dirname } from 'path'
-                )}).*?\\.([^.()#>*^ \\[\\]=$@{}]*)$`
-              )
-'use strict'
 export async function activate(context: vscode.ExtensionContext) {
-'use strict'
+import { dirname } from 'path'
   let tw
           let parts = matches[matches.length - 1].split('.')
           str = parts[parts.length - 1]
@@ -200,60 +176,6 @@   )
 }
 
 'use strict'
-  if (!vscode.workspace.name) return
-  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'
     return null
   const addPrefix =
     typeof prefix !== 'undefined' && prefix !== '' && str === prefix
@@ -348,8 +270,9 @@
   return items
 }
 
+import { dirname } from 'path'
 
-    tw = await getTailwind()
+const CONFIG_GLOB =
   let items = {}
   let i = 0
 
@@ -362,9 +285,8 @@
     if (depthOf(config[key]) === 0) {
       if (key === 'plugins') return
 
-
+import { dirname } from 'path'
 import * as vscode from 'vscode'
-const Color = require('color')
       item.sortText = naturalExpand(i.toString())
       if (typeof config[key] === 'string' || typeof config[key] === 'number') {
         item.detail = config[key]
@@ -384,9 +305,8 @@
       item.filterText = item.insertText = `${key}.`
       item.sortText = naturalExpand(i.toString())
       item.command = { title: '', command: 'editor.action.triggerSuggest' }
-
 import { dirname } from 'path'
-const dlv = require('dlv')
+  } catch (err) {}
     }
 
     i++
@@ -401,7 +321,6 @@   private _disposable: vscode.Disposable
   private _tailwind
   private _items
   private _configItems
-  private _prefixedConfigItems
 
   constructor(tailwind) {
     if (tailwind) {
@@ -420,410 +339,312 @@
     this._items = createItems(tailwind.classNames, separator, tailwind.config)
     this._configItems = createConfigItems(tailwind.config)
 
-      strings: true
-
     this._providers = []
 
     this._providers.push(
-      createCompletionItemProvider({
-        items: this._items,
-        languages: JS_TYPES,
-export async function activate(context: vscode.ExtensionContext) {
+      return
 
-export async function activate(context: vscode.ExtensionContext) {
+      return
 import * as vscode from 'vscode'
-export async function activate(context: vscode.ExtensionContext) {
+      return
 import { dirname } from 'path'
-      })
-
+import { dirname } from 'path'
   watcher.onDidChange(onFileChange)
-
-
+      return
 const tailwindClassNames = require('tailwind-class-names')
-const Color = require('color')
-      createCompletionItemProvider({
-
+      return
 const dlv = require('dlv')
-        languages: CSS_TYPES,
-        regex: /@apply ([^;}]*)$/,
-        triggerCharacters: ['.', separator],
-export async function activate(context: vscode.ExtensionContext) {
+'use strict'
 const CONFIG_GLOB =
-        prefix: '.'
-
 const dlv = require('dlv')
-const htmlElements = require('./htmlElements.js')
     )
 
     this._providers.push(
-      createCompletionItemProvider({
-        items: this._items,
-        languages: HTML_TYPES,
-        regex: /\bclass=["']([^"']*)$/, // /\bclass(Name)?=(["'])(?!.*?\2)/
-  let tw
+import { dirname } from 'path'
 import * as vscode from 'vscode'
 
-  enable = () => true,
-  let tw
 import { dirname } from 'path'
-      })
-
 import * as vscode from 'vscode'
-const htmlElements = require('./htmlElements.js')
-
-    this._providers.push(
-      createCompletionItemProvider({
-        items: this._items,
-        languages: JS_TYPES,
-        regex: /\bclass(Name)?=["']([^"']*)$/, // /\bclass(Name)?=(["'])(?!.*?\2)/
+import * as vscode from 'vscode'
-
+      return
 const Color = require('color')
-const tailwindClassNames = require('tailwind-class-names')
-          .concat([
-            Object.keys(
-  let tw
+      return
 const CONFIG_GLOB =
-  try {
+    }
-  try {
+    }
 'use strict'
-          .filter(Boolean),
-        config: tailwind.config,
-        emmet:
-  try {
+import { dirname } from 'path'
 import { dirname } from 'path'
 
-        document: vscode.TextDocument,
-
+'use strict'
 const CONFIG_GLOB =
-const tailwindClassNames = require('tailwind-class-names')
-
 const dlv = require('dlv')
-const htmlElements = require('./htmlElements.js')
     )
 
 
-      ): vscode.CompletionItem[] {
-
   } catch (err) {
-      createCompletionItemProvider({
-        items: this._items,
-        languages: ['vue'],
-        regex: /\bclass=["']([^"']*)$/,
+import { dirname } from 'path'
 import * as vscode from 'vscode'
+
+import { dirname } from 'path'
 import * as vscode from 'vscode'
-'use strict'
 import * as vscode from 'vscode'
-
-    tw = await getTailwind()
+    }
 import * as vscode from 'vscode'
-    tw = await getTailwind()
+    }
 import { dirname } from 'path'
-    tw = await getTailwind()
+    }
 const htmlElements = require('./htmlElements.js')
-          }
+import { dirname } from 'path'
 import * as vscode from 'vscode'
-const tailwindClassNames = require('tailwind-class-names')
+const dlv = require('dlv')
-    tw = await getTailwind()
+  'markdown',
 const dlv = require('dlv')
 
-  config?
+  watcher.onDidChange(onFileChange)
 
-  prefix?: string
 
-const Color = require('color')
+const tailwindClassNames = require('tailwind-class-names')
 const Color = require('color')
-              vscode.workspace.getConfiguration('emmet.includeLanguages')
+      vscode.languages.registerCompletionItemProvider(
+import { dirname } from 'path'
 import * as vscode from 'vscode'
 const Color = require('color')
+import * as vscode from 'vscode'
 
-  return vscode.languages.registerCompletionItemProvider(
-          .filter(Boolean),
+          provideCompletionItems: (
-        config: tailwind.config,
+            document: vscode.TextDocument,
-
+    }
 const CONFIG_GLOB =
-import * as vscode from 'vscode'
-  try {
 import { dirname } from 'path'
-  try {
 const htmlElements = require('./htmlElements.js')
-import * as vscode from 'vscode'
-const CONFIG_GLOB =
-export async function activate(context: vscode.ExtensionContext) {
+import { dirname } from 'path'
 const htmlElements = require('./htmlElements.js')
+'use strict'
-
 import * as vscode from 'vscode'
-const htmlElements = require('./htmlElements.js')
 
-  } catch (err) {
+import * as vscode from 'vscode'
+import * as vscode from 'vscode'
 
-    return null
+import { dirname } from 'path'
+'use strict'
 export async function activate(context: vscode.ExtensionContext) {
+    intellisense.reload(tw)
 
-        const separator = config.options.separator || ':'
 
-        let str
-        enable: text => {
+    intellisense.reload(tw)
 import * as vscode from 'vscode'
-'use strict'
-            text.indexOf('<script') !== -1 &&
+
-            text.indexOf('</script>') === -1
-    tw = await getTailwind()
 import { dirname } from 'path'
-    tw = await getTailwind()
 const htmlElements = require('./htmlElements.js')
+import { dirname } from 'path'
-'use strict'
 
-const Color = require('color')
-          return false
-        },
-        triggerCharacters: ["'", '"', ' ', separator],
-export async function activate(context: vscode.ExtensionContext) {
 import { dirname } from 'path'
-export async function activate(context: vscode.ExtensionContext) {
+const htmlElements = require('./htmlElements.js')
 const htmlElements = require('./htmlElements.js')
-  'nunjucks',
+import { dirname } from 'path'
 const htmlElements = require('./htmlElements.js')
-
 const tailwindClassNames = require('tailwind-class-names')
-const Color = require('color')
-      createCompletionItemProvider({
-
+    intellisense.reload(tw)
 const dlv = require('dlv')
-  try {
+    intellisense.reload(tw)
 const Color = require('color')
-        regex: /@apply ([^;}]*)$/,
-        triggerCharacters: ['.', separator],
-export async function activate(context: vscode.ExtensionContext) {
+    intellisense.reload(tw)
 const CONFIG_GLOB =
-    tw = await getTailwind()
+  }
-          if (
+
-import * as vscode from 'vscode'
+  }
 'use strict'
-import * as vscode from 'vscode'
-  } catch (err) {}
 import { dirname } from 'path'
+    tw = await tailwindClassNames({
-    tw = await getTailwind()
 import { dirname } from 'path'
+const tailwindClassNames = require('tailwind-class-names')
 import * as vscode from 'vscode'
-const htmlElements = require('./htmlElements.js')
 'use strict'
-  let tw
-          return false
+import { dirname } from 'path'
 'use strict'
-    tw = await getTailwind()
 
-  regex,
-    )
-
-
+import { dirname } from 'path'
 const tailwindClassNames = require('tailwind-class-names')
-const Color = require('color')
-      createConfigItemProvider({
+import { dirname } from 'path'
-export async function activate(context: vscode.ExtensionContext) {
+import { dirname } from 'path'
 const tailwindClassNames = require('tailwind-class-names')
+const htmlElements = require('./htmlElements.js')
-import * as vscode from 'vscode'
 'use strict'
-const tailwindClassNames = require('tailwind-class-names')
 export async function activate(context: vscode.ExtensionContext) {
-const htmlElements = require('./htmlElements.js')
-    )
-
-    this._providers.push(
-import * as vscode from 'vscode'
 'use strict'
-const htmlElements = require('./htmlElements.js')
 
-const CONFIG_GLOB =
 const Color = require('color')
-        items: this._configItems,
     tw = await getTailwind()
-          if (
-            text.indexOf('<style') !== -1 &&
+const dlv = require('dlv')
-  } catch (err) {}
 import { dirname } from 'path'
+      strings: true
-    tw = await getTailwind()
 import { dirname } from 'path'
-            return true
+    })
-'use strict'
+    }
 
-const Color = require('color')
-          return false
 'use strict'
-    tw = await getTailwind()
-
+const CONFIG_GLOB =
 const dlv = require('dlv')
-const htmlElements = require('./htmlElements.js')
     )
 
     this._providers.push(
-  } catch (err) {}
+  }
 const Color = require('color')
-  } catch (err) {}
+  }
 const CONFIG_GLOB =
-  let intellisense = new TailwindIntellisense(tw)
+}
-  let intellisense = new TailwindIntellisense(tw)
+}
 'use strict'
-import * as vscode from 'vscode'
+}
 
 
+import { dirname } from 'path'
+}
 import * as vscode from 'vscode'
 
-import * as vscode from 'vscode'
-  let intellisense = new TailwindIntellisense(tw)
+}
 import { dirname } from 'path'
-'use strict'
 
+import { dirname } from 'path'
 const dlv = require('dlv')
-  let intellisense = new TailwindIntellisense(tw)
 const htmlElements = require('./htmlElements.js')
-
+            new vscode.Position(Math.max(position.line - 5, 0), 0),
-  let intellisense = new TailwindIntellisense(tw)
+}
 const tailwindClassNames = require('tailwind-class-names')
 
+import { dirname } from 'path'
-  let intellisense = new TailwindIntellisense(tw)
+}
 const dlv = require('dlv')
-import * as vscode from 'vscode'
 
-import * as vscode from 'vscode'
-  let intellisense = new TailwindIntellisense(tw)
+}
 const Color = require('color')
-const HTML_TYPES = [
+import { dirname } from 'path'
 const dlv = require('dlv')
-  let intellisense = new TailwindIntellisense(tw)
 const CONFIG_GLOB =
 
-  context.subscriptions.push(intellisense)
+async function getTailwind() {
-  context.subscriptions.push(intellisense)
+async function getTailwind() {
 'use strict'
+async function getTailwind() {
 
-  context.subscriptions.push(intellisense)
 
-  context.subscriptions.push(intellisense)
+async function getTailwind() {
 import * as vscode from 'vscode'
-  context.subscriptions.push(intellisense)
+async function getTailwind() {
 import { dirname } from 'path'
-
-  context.subscriptions.push(intellisense)
+async function getTailwind() {
 const htmlElements = require('./htmlElements.js')
-  context.subscriptions.push(intellisense)
+
+async function getTailwind() {
 const tailwindClassNames = require('tailwind-class-names')
-  context.subscriptions.push(intellisense)
+async function getTailwind() {
 const dlv = require('dlv')
-
+              } else if (parts.indexOf('focus') !== -1) {
-  context.subscriptions.push(intellisense)
+import { dirname } from 'path'
 const Color = require('color')
-  context.subscriptions.push(intellisense)
 const CONFIG_GLOB =
-import * as vscode from 'vscode'
 import { dirname } from 'path'
+const CONFIG_GLOB =
-import * as vscode from 'vscode'
 import { dirname } from 'path'
+const CONFIG_GLOB =
 'use strict'
-import * as vscode from 'vscode'
 import { dirname } from 'path'
+const CONFIG_GLOB =
 
-import * as vscode from 'vscode'
 import { dirname } from 'path'
+const CONFIG_GLOB =
 import * as vscode from 'vscode'
 import * as vscode from 'vscode'
+  prefix = '',
+
 import { dirname } from 'path'
+const CONFIG_GLOB =
 import { dirname } from 'path'
-import * as vscode from 'vscode'
 import { dirname } from 'path'
+const CONFIG_GLOB =
 const htmlElements = require('./htmlElements.js')
-import * as vscode from 'vscode'
 import { dirname } from 'path'
+const CONFIG_GLOB =
 const tailwindClassNames = require('tailwind-class-names')
-
-import * as vscode from 'vscode'
 import { dirname } from 'path'
+const CONFIG_GLOB =
 const dlv = require('dlv')
-import * as vscode from 'vscode'
 import { dirname } from 'path'
+const CONFIG_GLOB =
 const Color = require('color')
-import * as vscode from 'vscode'
   if (!vscode.workspace.name) return
+const CONFIG_GLOB =
 import * as vscode from 'vscode'
+  prefix = '',
   let files = await vscode.workspace.findFiles(
-import * as vscode from 'vscode'
 const htmlElements = require('./htmlElements.js')
 'use strict'
-import * as vscode from 'vscode'
 const htmlElements = require('./htmlElements.js')
 
-                }
+
-import * as vscode from 'vscode'
 const htmlElements = require('./htmlElements.js')
 import * as vscode from 'vscode'
-import * as vscode from 'vscode'
 const htmlElements = require('./htmlElements.js')
 import { dirname } from 'path'
-import * as vscode from 'vscode'
 const htmlElements = require('./htmlElements.js')
 const htmlElements = require('./htmlElements.js')
-
-import * as vscode from 'vscode'
 const htmlElements = require('./htmlElements.js')
 const tailwindClassNames = require('tailwind-class-names')
-import * as vscode from 'vscode'
 const htmlElements = require('./htmlElements.js')
 const dlv = require('dlv')
-import * as vscode from 'vscode'
 const htmlElements = require('./htmlElements.js')
 const Color = require('color')
 import * as vscode from 'vscode'
+  }
 const htmlElements = require('./htmlElements.js')
 const CONFIG_GLOB =
-  watcher.onDidCreate(onFileChange)
+    CONFIG_GLOB,
-  watcher.onDidCreate(onFileChange)
+    CONFIG_GLOB,
 'use strict'
-  watcher.onDidCreate(onFileChange)
 
-                  return false
+              let hoverRange = new vscode.Range(
+    CONFIG_GLOB,
 import * as vscode from 'vscode'
-const tailwindClassNames = require('tailwind-class-names')
+    CONFIG_GLOB,
 import { dirname } from 'path'
-  watcher.onDidCreate(onFileChange)
 const htmlElements = require('./htmlElements.js')
-
+  'razor',
-  watcher.onDidCreate(onFileChange)
+    CONFIG_GLOB,
 const tailwindClassNames = require('tailwind-class-names')
-  watcher.onDidCreate(onFileChange)
+    CONFIG_GLOB,
 const dlv = require('dlv')
-  watcher.onDidCreate(onFileChange)
+    CONFIG_GLOB,
 const Color = require('color')
-  watcher.onDidCreate(onFileChange)
+    CONFIG_GLOB,
 const CONFIG_GLOB =
+    CONFIG_GLOB,
 import * as vscode from 'vscode'
-  return tw
-  watcher.onDidDelete(onFileChange)
+const htmlElements = require('./htmlElements.js')
 'use strict'
+import { dirname } from 'path'
-  watcher.onDidDelete(onFileChange)
+const htmlElements = require('./htmlElements.js')
 
   watcher.onDidDelete(onFileChange)
-import * as vscode from 'vscode'
-import * as vscode from 'vscode'
 const tailwindClassNames = require('tailwind-class-names')
-const dlv = require('dlv')
-import * as vscode from 'vscode'
+const HTML_TYPES = [
 const tailwindClassNames = require('tailwind-class-names')
-const Color = require('color')
-                    position.character + str.length - text1.length
+
-  watcher.onDidDelete(onFileChange)
 const htmlElements = require('./htmlElements.js')
-                )
 
-                return new vscode.Hover(hoverStr, hoverRange)
-              }
+'use strict'
             }
+'use strict'
 
+const Color = require('color')
-            return null
+
-'use strict'
+const htmlElements = require('./htmlElements.js')
 
-const Color = require('color')
+
         }
-  'markdown',
+
 const dlv = require('dlv')
+const htmlElements = require('./htmlElements.js')
     )
 
     this._disposable = vscode.Disposable.from(...this._providers)
diff --git a/src/htmlElements.ts b/src/htmlElements.ts
deleted file mode 100644
index 4bb7b1c1220b17799c08d5b923dd5e8ac0e4f280..0000000000000000000000000000000000000000
--- a/src/htmlElements.ts
+++ /dev/null
@@ -1,142 +0,0 @@
-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'
-]