diff --git a/src/extension.ts b/src/extension.ts
index 59d0b2938c501c6cab4b1d255e6aff7f63943e99..fd552df0330b3610650c27f8cfbc485a0fb6f18f 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -15,6 +15,7 @@   'jade',
   'razor',
   'php',
   'blade',
+  'vue',
   'twig',
   'markdown',
   'erb',
@@ -96,33 +97,24 @@ }
 
 export function deactivate() {}
 
-const Color = require('color')
 import * as vscode from 'vscode'
+  emmet?: boolean
   items,
-  languages,
-  regex,
-  triggerCharacters,
-  config,
-const Color = require('color')
+import * as vscode from 'vscode'
   '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
-  enable = () => true,
-const CONFIG_GLOB =
 'use strict'
-const CONFIG_GLOB =
+  async function onFileChange(event) {
 
-const CONFIG_GLOB =
+  async function onFileChange(event) {
 import * as vscode from 'vscode'
-  languages?: string[]
-  regex?: RegExp
-  triggerCharacters?: string[]
-const CONFIG_GLOB =
 const Color = require('color')
-const CONFIG_GLOB =
 const CONFIG_GLOB =
-const CONFIG_GLOB =
+import * as vscode from 'vscode'
   '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
+import { join, dirname } from 'path'
+import * as vscode from 'vscode'
   '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
-} = {}): vscode.Disposable {
+const tailwindClassNames = require('tailwind-class-names')
   return vscode.languages.registerCompletionItemProvider(
     languages,
     {
@@ -134,30 +126,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 []
-
-        let lines = text.split(/[\n\r]/)
-
-        let matches = lines
-const JS_TYPES = ['typescriptreact', 'javascript', 'javascriptreact']
+import * as vscode from 'vscode'
   '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
-          .join('\n')
-          .match(regex)
+const Color = require('color')
 
         if (matches) {
           let parts = matches[matches.length - 1].split(' ')
           str = parts[parts.length - 1]
-        } else if (emmet) {
+        } else if (languages.indexOf('html') !== -1) {
           // match emmet style syntax
           // e.g. .flex.items-center
-          let currentLine = lines[lines.length - 1]
-const HTML_TYPES = [
+import * as vscode from 'vscode'
   '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
+  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
+          matches = lineText.match(/\.([^()#>*^ \[\]=$@{}]*)$/i)
           let parts = matches[matches.length - 1].split('.')
           str = parts[parts.length - 1]
         }
@@ -353,124 +340,63 @@
     this._providers = []
 
     this._providers.push(
-      createCompletionItemProvider({
-
     try {
-  // for jsx
 'use strict'
-
 import { join, dirname } from 'path'
 
-
 import { join, dirname } from 'path'
 import * as vscode from 'vscode'
-
 import { join, dirname } from 'path'
 import { join, dirname } from 'path'
-
 import { join, dirname } from 'path'
 const tailwindClassNames = require('tailwind-class-names')
-    )
-
-    this._providers.push(
-      createCompletionItemProvider({
-
     try {
-  // for jsx
 const dlv = require('dlv')
-        regex: /@apply ([^;}]*)$/,
-        triggerCharacters: ['.', separator],
-  // for jsx
+  'blade',
   '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
 
-  if (!vscode.workspace.name) return
-      })
-
 const Color = require('color')
 
     this._providers.push(
-      createCompletionItemProvider({
-
     try {
-  ...JS_TYPES
 'use strict'
-        regex: /\bclass(Name)?=["']([^"']*)$/, // /\bclass(Name)?=(["'])(?!.*?\2)/
-        triggerCharacters: ["'", '"', ' ', '.', separator],
-
 import { join, dirname } from 'path'
-  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
 
-    1
 
-    }
-
+const Color = require('color')
-const Color = require('color')
-
-    // Vue.js
-    this._providers.push(
-      createCompletionItemProvider({
-
     try {
-        languages: ['vue'],
-  ...JS_TYPES
 const Color = require('color')
-  ...JS_TYPES
+    try {
 const CONFIG_GLOB =
-  ...JS_TYPES
+    try {
   '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
 
+  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
 const dlv = require('dlv')
-]
 'use strict'
-
 const dlv = require('dlv')
-
-          ) {
-            return true
-          }
-          return false
-        },
-        triggerCharacters: ["'", '"', ' ', '.', separator],
-  // for jsx
   '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
 
-    1
-      })
-
 const Color = require('color')
 
-  watcher.onDidDelete(onFileChange)
   'haml',
-  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
+const CONFIG_GLOB =
-
     try {
+'use strict'
+    try {
 
-  if (!files.length) return null
-
 import { join, dirname } from 'path'
-const Color = require('color')
+const JS_TYPES = ['typescriptreact', 'javascript', 'javascriptreact']
-
 import { join, dirname } from 'path'
-const CONFIG_GLOB =
+const HTML_TYPES = [
-
 import { join, dirname } from 'path'
-  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
+'use strict'
 
-  let tailwindPackage = await vscode.workspace.findFiles(
-          if (
-
+    try {
 const dlv = require('dlv')
-const Color = require('color')
-            text.indexOf('</style>') === -1
-          ) {
-            return true
 'use strict'
-  let intellisense = new TailwindIntellisense(tw)
-
 const dlv = require('dlv')
-const tailwindClassNames = require('tailwind-class-names')
-        }
-      })
+  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
     )
 
     this._providers.push(