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,25 +97,14 @@ }
 
 export function deactivate() {}
 
-function createCompletionItemProvider({
+function createCompletionItemProvider(
   items,
-  languages,
-  regex,
-  triggerCharacters,
+  languages: string[],
+  regex: RegExp,
+  triggerCharacters: string[],
   config,
-  prefix = '',
-  enable = () => true,
-  emmet = false
-}: {
-  items?
-  languages?: string[]
-  regex?: RegExp
-  triggerCharacters?: string[]
-  config?
-  prefix?: string
-  enable?: (text: string) => boolean
-  emmet?: boolean
-} = {}): vscode.Disposable {
+  prefix = ''
+): vscode.Disposable {
   return vscode.languages.registerCompletionItemProvider(
     languages,
     {
@@ -126,28 +116,21 @@         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
-          .slice(-5)
-          .join('\n')
-          .match(regex)
+        let matches = text.match(regex)
 
         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]
-          matches = currentLine.match(/\.([^()#>*^ \[\]=$@{}]*)$/i)
+          let lineText = text.split('\n').pop()
+          matches = lineText.match(/\.([^()#>*^ \[\]=$@{}]*)$/i)
           let parts = matches[matches.length - 1].split('.')
           str = parts[parts.length - 1]
         }
@@ -343,75 +326,34 @@
     this._providers = []
 
     this._providers.push(
-      createCompletionItemProvider({
-        items: this._items,
-        languages: JS_TYPES,
-        regex: /\btw`([^`]*)$/,
-        triggerCharacters: ['`', ' ', separator],
-        config: tailwind.config
-      })
-    )
-
-    this._providers.push(
-      createCompletionItemProvider({
-        items: this._items,
-        languages: CSS_TYPES,
-        regex: /@apply ([^;}]*)$/,
-        triggerCharacters: ['.', separator],
-        config: tailwind.config,
-        prefix: '.'
-      })
+      createCompletionItemProvider(
+        this._items,
+        JS_TYPES,
+        /\btw`([^`]*)$/,
+        ['`', ' ', separator],
+        tailwind.config
+      )
     )
 
     this._providers.push(
-      createCompletionItemProvider({
-        items: this._items,
-        languages: HTML_TYPES,
-        regex: /\bclass(Name)?=["']([^"']*)$/, // /\bclass(Name)?=(["'])(?!.*?\2)/
-        triggerCharacters: ["'", '"', ' ', '.', separator],
-        config: tailwind.config,
-        emmet: true
-      })
+      createCompletionItemProvider(
+        this._items,
+        CSS_TYPES,
+        /@apply ([^;}]*)$/,
+        ['.', separator],
+        tailwind.config,
+        '.'
+      )
     )
 
-    // Vue.js
     this._providers.push(
-      createCompletionItemProvider({
-        items: this._items,
-        languages: ['vue'],
-        regex: /\bclass(Name)?=["']([^"']*)$/,
-        enable: text => {
-          if (
-            (text.indexOf('<template') !== -1 &&
-              text.indexOf('</template>') === -1) ||
-            (text.indexOf('<script') !== -1 && text.indexOf('</script>') === -1)
-          ) {
-            return true
-          }
-          return false
-        },
-        triggerCharacters: ["'", '"', ' ', '.', separator],
-        config: tailwind.config,
-        emmet: true
-      })
-    )
-    this._providers.push(
-      createCompletionItemProvider({
-        items: this._items,
-        languages: ['vue'],
-        regex: /@apply ([^;}]*)$/,
-        triggerCharacters: ['.', separator],
-        config: tailwind.config,
-        enable: text => {
-          if (
-            text.indexOf('<style') !== -1 &&
-            text.indexOf('</style>') === -1
-          ) {
-            return true
-          }
-          return false
-        }
-      })
+      createCompletionItemProvider(
+        this._items,
+        HTML_TYPES,
+        /\bclass(Name)?=["']([^"']*)$/, // /\bclass(Name)?=(["'])(?!.*?\2)/
+        ["'", '"', ' ', '.', separator],
+        tailwind.config
+      )
     )
 
     this._providers.push(