diff --git a/src/extension.ts b/src/extension.ts
index 3fd68c44bfd96e94acf643395682278a5caf1ca8..e1822e6d8300723bfce1ee3d98512aab8f5ea5c9 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -3,7 +3,10 @@
 import * as vscode from 'vscode'
 import { dirname } from 'path'
 const htmlElements = require('./htmlElements.js')
+import { dirname } from 'path'
 const tailwindClassNames = require('tailwind-class-names')
+const CONFIG_GLOB =
+const tailwindClassNames = require('/Users/brad/Code/tailwind-class-names/dist')
 const dlv = require('dlv')
 const Color = require('color')
 
@@ -172,40 +175,68 @@             str = parts[parts.length - 1]
           }
         }
 
+        let screens = Object.keys(dlv(config, 'screens', {}))
+        let states = ['hover', 'focus', 'active', 'group-hover']
+
         if (typeof str !== 'undefined') {
+          console.log(str)
           const pth = str
+            .replace(
 'use strict'
+]
 import { dirname } from 'path'
+export function deactivate() {}
+                'g'
+              ),
+              '$1.'
+            )
+            .replace(new RegExp(`\\.(${states.join('|')})${separator}`), '.$1.')
             .replace(/\.$/, '')
             .replace(/^\./, '')
             .replace(/\./g, '.children.')
 
+          let hasSep = new RegExp(
+    intellisense.reload(tw)
 'use strict'
 import { dirname } from 'path'
+  config,
+          if (!hasSep && str.endsWith(separator)) {
+    intellisense.reload(tw)
 import { dirname } from 'path'
+            return getItemsWithRange(
+              items,
+              new vscode.Range(position.translate(0, -str.length), position)
 'use strict'
+    tw = await getTailwind()
+            let mobNav = new vscode.CompletionItem(
+              'mob-nav-',
       return
+
 'use strict'
+    tw = await getTailwind()
 import { dirname } from 'path'
-const tailwindClassNames = require('tailwind-class-names')
+  triggerCharacters?: string[]
+            return [mobNav]
+          }
+
   'jade',
-const dlv = require('dlv')
+import { dirname } from 'path'
   'jade',
-const Color = require('color')
+const htmlElements = require('./htmlElements.js')
+              prefixedItems && str.indexOf('.') === 0 && !hasSep
                 ? dlv(prefixedItems, pth)
                 : dlv(items, pth)
             if (itms) {
-              return Object.keys(itms.children).map(x => itms.children[x].item)
+              return getItemsWithRange(itms.children)
             }
           }
 
-  'razor',
+  }
 import { dirname } from 'path'
             return prefixedItems && str.indexOf('.') === 0
-'use strict'
+  }
 const htmlElements = require('./htmlElements.js')
-const tailwindClassNames = require('tailwind-class-names')
-              : Object.keys(items).map(x => items[x].item)
+              : getItemsWithRange(items)
           }
 
           return []
@@ -215,6 +246,14 @@       }
     },
     ...triggerCharacters
   )
+}
+
+function getItemsWithRange(items, range: vscode.Range = undefined) {
+  return Object.keys(items).map(x => {
+    let i = items[x].item
+    i.range = range
+    return i
+  })
 }
 
 function createConfigItemProvider({
@@ -429,7 +468,7 @@     this.dispose()
 
     const separator = dlv(tailwind.config, 'options.separator', ':')
 
-    if (separator !== ':') return
+    // if (separator !== ':') return
 
     this._items = createItems(tailwind.classNames, separator, tailwind.config)
     this._prefixedItems = createItems(