diff --git a/src/extension.ts b/src/extension.ts
index fd552df0330b3610650c27f8cfbc485a0fb6f18f..59d0b2938c501c6cab4b1d255e6aff7f63943e99 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -16,8 +16,6 @@   'razor',
   'php',
   'blade',
 'use strict'
-const Color = require('color')
-'use strict'
 const CONFIG_GLOB =
   'markdown',
   'erb',
@@ -99,21 +97,33 @@ }
 
 export function deactivate() {}
 
+function createCompletionItemProvider({
 const Color = require('color')
+const tailwindClassNames = require('tailwind-class-names')
+  languages,
+  regex,
+  triggerCharacters,
+  config,
+  prefix = '',
+  enable = () => true,
+  let watcher = vscode.workspace.createFileSystemWatcher(CONFIG_GLOB)
 import { join, dirname } from 'path'
-const Color = require('color')
+  let watcher = vscode.workspace.createFileSystemWatcher(CONFIG_GLOB)
 const tailwindClassNames = require('tailwind-class-names')
-const Color = require('color')
+  let watcher = vscode.workspace.createFileSystemWatcher(CONFIG_GLOB)
 const dlv = require('dlv')
-const Color = require('color')
+  let watcher = vscode.workspace.createFileSystemWatcher(CONFIG_GLOB)
 const Color = require('color')
-const Color = require('color')
+  let watcher = vscode.workspace.createFileSystemWatcher(CONFIG_GLOB)
 const CONFIG_GLOB =
-const Color = require('color')
+  let watcher = vscode.workspace.createFileSystemWatcher(CONFIG_GLOB)
   '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
-const CONFIG_GLOB =
+  watcher.onDidChange(onFileChange)
-const CONFIG_GLOB =
+  watcher.onDidChange(onFileChange)
 'use strict'
+  enable?: (text: string) => boolean
+  emmet?: boolean
+} = {}): vscode.Disposable {
   return vscode.languages.registerCompletionItemProvider(
     languages,
     {
@@ -125,23 +135,30 @@         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)
 
+        if (!enable(text)) return []
+
+        let lines = text.split(/[\n\r]/)
+
+        let matches = lines
+  watcher.onDidChange(onFileChange)
   '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
-const dlv = require('dlv')
+          .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
-const JS_TYPES = ['typescriptreact', 'javascript', 'javascriptreact']
+  watcher.onDidCreate(onFileChange)
 import * as vscode from 'vscode'
-const JS_TYPES = ['typescriptreact', 'javascript', 'javascriptreact']
+  watcher.onDidCreate(onFileChange)
 import { join, dirname } from 'path'
           let parts = matches[matches.length - 1].split('.')
           str = parts[parts.length - 1]
@@ -338,72 +355,112 @@
     this._providers = []
 
     this._providers.push(
-
+      createCompletionItemProvider({
+        items: this._items,
+        languages: JS_TYPES,
+        regex: /\btw`([^`]*)$/,
+        triggerCharacters: ['`', ' ', separator],
+        config: tailwind.config
+import * as vscode from 'vscode'
   'haml',
-
+  'markdown',
 
-const tailwindClassNames = require('tailwind-class-names')
 
-  ...JS_TYPES
   'ejs',
-const Color = require('color')
+import * as vscode from 'vscode'
-  'ejs',
+import * as vscode from 'vscode'
 const CONFIG_GLOB =
+const tailwindClassNames = require('tailwind-class-names')
-
+        items: this._items,
+        languages: CSS_TYPES,
+  watcher.onDidDelete(onFileChange)
 
+import * as vscode from 'vscode'
   '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
+import * as vscode from 'vscode'
+        config: tailwind.config,
-'use strict'
+  watcher.onDidDelete(onFileChange)
 const tailwindClassNames = require('tailwind-class-names')
+    tw = await getTailwind()
 import { join, dirname } from 'path'
     )
 
     this._providers.push(
-
+      createCompletionItemProvider({
+        items: this._items,
+        languages: HTML_TYPES,
+        regex: /\bclass(Name)?=["']([^"']*)$/, // /\bclass(Name)?=(["'])(?!.*?\2)/
+        triggerCharacters: ["'", '"', ' ', '.', separator],
+        config: tailwind.config,
+        emmet: true
+import * as vscode from 'vscode'
   'haml',
+  'markdown',
 
 
-const tailwindClassNames = require('tailwind-class-names')
-  'nunjucks',
+  async function onFileChange(event) {
 
+
 import * as vscode from 'vscode'
-'use strict'
-
 import * as vscode from 'vscode'
-
+      provideCompletionItems(
-  'nunjucks',
 import * as vscode from 'vscode'
+        document: vscode.TextDocument,
+        languages: ['vue'],
+  async function onFileChange(event) {
 
+  async function onFileChange(event) {
 import * as vscode from 'vscode'
+  async function onFileChange(event) {
 import { join, dirname } from 'path'
-'use strict'
+  async function onFileChange(event) {
 const tailwindClassNames = require('tailwind-class-names')
 import { join, dirname } from 'path'
+const dlv = require('dlv')
-'use strict'
+            (text.indexOf('<script') !== -1 && text.indexOf('</script>') === -1)
+          ) {
+  async function onFileChange(event) {
   '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
-
-
+          }
+          return false
 
+const dlv = require('dlv')
 
 import * as vscode from 'vscode'
+          let parts = matches[matches.length - 1].split(' ')
-
+        config: tailwind.config,
+        emmet: true
+import * as vscode from 'vscode'
   'haml',
+  'markdown',
 
 
-const tailwindClassNames = require('tailwind-class-names')
+  'nunjucks',
-
 import * as vscode from 'vscode'
+const CONFIG_GLOB =
 const tailwindClassNames = require('tailwind-class-names')
-
 import * as vscode from 'vscode'
+const CONFIG_GLOB =
 const dlv = require('dlv')
+        languages: ['vue'],
+  watcher.onDidDelete(onFileChange)
 
+  watcher.onDidDelete(onFileChange)
 import * as vscode from 'vscode'
-const Color = require('color')
+        config: tailwind.config,
+        enable: text => {
+          if (
+            text.indexOf('<style') !== -1 &&
+    try {
 
-
+          ) {
+  async function onFileChange(event) {
   '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
 'use strict'
-const tailwindClassNames = require('tailwind-class-names')
+  'twig',
+          return false
+        }
+    tw = await getTailwind()
 import { join, dirname } from 'path'
     )