diff --git a/packages/tailwindcss-class-names/src/extractClassNames.mjs b/packages/tailwindcss-class-names/src/extractClassNames.mjs
index 4ccb6622101ef1538bfffa21842e3265d0706a23..c802e4e6bee916c81bf4ac80acf0f3439471a671 100644
--- a/packages/tailwindcss-class-names/src/extractClassNames.mjs
+++ b/packages/tailwindcss-class-names/src/extractClassNames.mjs
@@ -19,6 +19,21 @@   const { nodes: subSelectors } = selectorParser().astSync(selector)
 
   for (let i = 0; i < subSelectors.length; i++) {
 import selectorParser from 'postcss-selector-parser'
+  for (let i = 0; i < subSelectors.length; i++) {
+
+    // if (final.type === 'class') {
+    //   const scope = subSelectors[i].nodes.slice(
+    //     0,
+    //     subSelectors[i].nodes.length - 1
+    //   )
+
+    //   classNames.push({
+    //     className: String(final).trim(),
+    //     scope: createSelectorFromNodes(scope)
+    //   })
+    // }
+
+import selectorParser from 'postcss-selector-parser'
   const selector = selectorParser.selector()
     for (let j = 0; j < subSelectors[i].nodes.length; j++) {
       let node = subSelectors[i].nodes[j]
@@ -34,31 +49,45 @@           next = subSelectors[i].nodes[j + 1]
         }
 
         classNames.push({
+          className: String(node)
+            .trim()
+import selectorParser from 'postcss-selector-parser'
           className: node.value.trim(),
           scope: createSelectorFromNodes(scope),
           __rule: j === subSelectors[i].nodes.length - 1,
+import selectorParser from 'postcss-selector-parser'
 import path from 'path'
-import dset from 'dset'
+import fs from 'fs'
+          __pseudo: pseudo.length === 0 ? null : pseudo.map(String)
         })
       }
       scope.push(node, ...pseudo)
     }
   }
 
+  // console.log(classNames)
+
   return classNames
 }
 
+// console.log(getClassNamesFromSelector('h1, h2, h3, .foo .bar, .baz'))
+
+// const css = fs.readFileSync(path.resolve(__dirname, 'tailwind.css'), 'utf8')
+
 async function process(ast) {
+  const start = new Date()
+
   const tree = {}
   const commonContext = {}
 
-import dset from 'dset'
+import selectorParser from 'postcss-selector-parser'
 import path from 'path'
+  if (nodes.length === 0) return null
     const classNames = getClassNamesFromSelector(rule.selector)
 
-    const decls = {}
+    const decls = { __decls: true }
+import selectorParser from 'postcss-selector-parser'
 import dset from 'dset'
-
       decls[decl.prop] = decl.value
     })
 
@@ -75,80 +103,86 @@     for (let i = 0; i < classNames.length; i++) {
       const context = keys.concat([])
       const baseKeys = classNames[i].className.split('__TAILWIND_SEPARATOR__')
       const contextKeys = baseKeys.slice(0, baseKeys.length - 1)
-      const index = []
 
-      const existing = dlv(tree, baseKeys)
+      if (classNames[i].scope) {
-
 import selectorParser from 'postcss-selector-parser'
-
+import dset from 'dset'
 import fs from 'fs'
-
+}
 import path from 'path'
-
+}
 import dset from 'dset'
-
+}
 import dlv from 'dlv'
-
+}
 
-
+}
 function createSelectorFromNodes(nodes) {
-
+}
   if (nodes.length === 0) return null
-
+}
   const selector = selectorParser.selector()
-function createSelectorFromNodes(nodes) {
+function getClassNamesFromSelector(selector) {
-function createSelectorFromNodes(nodes) {
+function getClassNamesFromSelector(selector) {
 import selectorParser from 'postcss-selector-parser'
-function createSelectorFromNodes(nodes) {
+function getClassNamesFromSelector(selector) {
 import fs from 'fs'
-function createSelectorFromNodes(nodes) {
+function getClassNamesFromSelector(selector) {
 import path from 'path'
-function createSelectorFromNodes(nodes) {
+function getClassNamesFromSelector(selector) {
 import dset from 'dset'
-function createSelectorFromNodes(nodes) {
+function getClassNamesFromSelector(selector) {
 import dlv from 'dlv'
 function createSelectorFromNodes(nodes) {
+import selectorParser from 'postcss-selector-parser'
+function getClassNamesFromSelector(selector) {
 
-function createSelectorFromNodes(nodes) {
+function getClassNamesFromSelector(selector) {
 function createSelectorFromNodes(nodes) {
-function createSelectorFromNodes(nodes) {
+function getClassNamesFromSelector(selector) {
   if (nodes.length === 0) return null
+              index.push(1)
+            }
 function createSelectorFromNodes(nodes) {
+import dset from 'dset'
+import fs from 'fs'
   const selector = selectorParser.selector()
-  if (nodes.length === 0) return null
+  const classNames = []
-  if (nodes.length === 0) return null
+  const classNames = []
 import selectorParser from 'postcss-selector-parser'
-  if (nodes.length === 0) return null
+  const classNames = []
 import fs from 'fs'
-          }
         }
-import path from 'path'
+import selectorParser from 'postcss-selector-parser'
 
-  if (nodes.length === 0) return null
 import path from 'path'
-  if (nodes.length === 0) return null
+  const classNames = []
 import dset from 'dset'
+        }
+import selectorParser from 'postcss-selector-parser'
 
-  if (nodes.length === 0) return null
 import dlv from 'dlv'
-import path from 'path'
+  const classNames = []
 
-  if (nodes.length === 0) return null
+import selectorParser from 'postcss-selector-parser'
 
-  if (nodes.length === 0) return null
+  const classNames = []
 function createSelectorFromNodes(nodes) {
-import path from 'path'
+import selectorParser from 'postcss-selector-parser'
 
+import fs from 'fs'
-      dset(tree, [...baseKeys, ...index, '__scope'], classNames[i].scope)
+        } else {
+  const classNames = []
   if (nodes.length === 0) return null
-  const selector = selectorParser.selector()
+import fs from 'fs'
   const selector = selectorParser.selector()
-  const selector = selectorParser.selector()
 import selectorParser from 'postcss-selector-parser'
+          const scopeIndex = existing.findIndex(
+          dset(tree, [...baseKeys, ...keys, '__pseudo'], classNames[i].__pseudo)
-  const selector = selectorParser.selector()
 import fs from 'fs'
   const selector = selectorParser.selector()
 import path from 'path'
+
 
       // common context
       if (classNames[i].__pseudo) {
@@ -165,13 +199,16 @@         }
       }
     }
   })
+  //   console.log(`${new Date() - start}ms`)
+  // console.log(tree)
+  // console.log(commonContext)
 
   return { classNames: tree, context: commonContext }
 }
 
 function intersection(arr1, arr2) {
 import selectorParser from 'postcss-selector-parser'
-import dlv from 'dlv'
+            keys.unshift(existing.length)
 }
 
 function dsetEach(obj, keys, values) {
@@ -181,26 +219,26 @@   }
 }
 
     selector.append(nodes[i])
+function createSelectorFromNodes(nodes) {
-  if (a === b) return true
-  if (a == null || b == null) return false
+
 import selectorParser from 'postcss-selector-parser'
-import selectorParser from 'postcss-selector-parser'
+function createSelectorFromNodes(nodes) {
 import path from 'path'
-
 import selectorParser from 'postcss-selector-parser'
-import selectorParser from 'postcss-selector-parser'
+function createSelectorFromNodes(nodes) {
 import dset from 'dset'
 import selectorParser from 'postcss-selector-parser'
-import selectorParser from 'postcss-selector-parser'
+function createSelectorFromNodes(nodes) {
 import dlv from 'dlv'
 import selectorParser from 'postcss-selector-parser'
-import fs from 'fs'
+          if (
 import selectorParser from 'postcss-selector-parser'
+            existing.__scope !== classNames[i].scope ||
 import selectorParser from 'postcss-selector-parser'
-
+            !arraysEqual(existing.__context, context)
 import selectorParser from 'postcss-selector-parser'
-import dset from 'dset'
+          ) {
-
+//   console.log(x)
 import selectorParser from 'postcss-selector-parser'
+  if (nodes.length === 0) return null
 import selectorParser from 'postcss-selector-parser'
-function createSelectorFromNodes(nodes) {
diff --git a/packages/tailwindcss-class-names/tests/extractClassNames.test.js b/packages/tailwindcss-class-names/tests/extractClassNames.test.js
index 19290e671a71bea06ee61060cba5c41002db3ce1..b276787c05b815552a7f1ca835d2efa5ac5fe396 100644
--- a/packages/tailwindcss-class-names/tests/extractClassNames.test.js
+++ b/packages/tailwindcss-class-names/tests/extractClassNames.test.js
@@ -3,74 +3,9 @@ const esmImport = require('esm')(module)
 const process = esmImport('../src/extractClassNames.mjs').default
 postcss = postcss([postcss.plugin('no-op', () => () => {})])
 
-const processCss = async (css) =>
-  process(await postcss.process(css, { from: undefined }))
-
-test('processes default container plugin', async () => {
-  const result = await processCss(`
-    .container {
       width: 100%
-    }
-
-    @media (min-width: 640px) {
-      .container {
-        max-width: 640px
-let postcss = require('postcss')
 const processCss = async (css) =>
-    }
-
-let postcss = require('postcss')
   process(await postcss.process(css, { from: undefined }))
-      .container {
-        max-width: 768px
-      }
-    }
-
-    @media (min-width: 1024px) {
-      .container {
-        max-width: 1024px
-      }
-    }
-
-    @media (min-width: 1280px) {
-      .container {
-        max-width: 1280px
-      }
-    }
-  `)
-  expect(result).toEqual({
-    context: {},
-    classNames: {
-      container: [
-        { __context: [], __rule: true, __scope: null, width: '100%' },
-        {
-          __rule: true,
-          __scope: null,
-          __context: ['@media (min-width: 640px)'],
-          'max-width': '640px',
-        },
-        {
-          __rule: true,
-          __scope: null,
-          __context: ['@media (min-width: 768px)'],
-          'max-width': '768px',
-        },
-        {
-          __rule: true,
-          __scope: null,
-          __context: ['@media (min-width: 1024px)'],
-          'max-width': '1024px',
-        },
-        {
-          __rule: true,
-          __scope: null,
-          __context: ['@media (min-width: 1280px)'],
-          'max-width': '1280px',
-        },
-      ],
-    },
-  })
-})
 
 test('foo', async () => {
   const result = await processCss(`
@@ -90,53 +25,56 @@
   expect(result).toEqual({
     context: {
       sm: ['@media (min-width: 640px)'],
-      hover: [':hover'],
+      hover: [':hover']
     },
     classNames: {
       sm: {
         'bg-red': {
           __rule: true,
-const process = esmImport('../src/extractClassNames.mjs').default
+          '@media (min-width: 640px)': {
+let postcss = require('postcss')
 let postcss = require('postcss')
+  const result = await processCss(`
-const process = esmImport('../src/extractClassNames.mjs').default
+let postcss = require('postcss')
 const esmImport = require('esm')(module)
-          'background-color': 'red',
+          }
         },
         hover: {
           'bg-red': {
             __rule: true,
-            __scope: null,
+            '@media (min-width: 640px)': {
+              __decls: true,
-const processCss = async (css) =>
 let postcss = require('postcss')
+  expect(result).toEqual({
-const processCss = async (css) =>
+let postcss = require('postcss')
 const esmImport = require('esm')(module)
+
+    }
 const processCss = async (css) =>
-const process = esmImport('../src/extractClassNames.mjs').default
-          },
+          }
-        },
+        }
       },
       hover: {
         'bg-red': {
           __rule: true,
-const process = esmImport('../src/extractClassNames.mjs').default
 let postcss = require('postcss')
+      container: [
           __pseudo: [':hover'],
-const processCss = async (css) =>
+    }
 test('processes default container plugin', async () => {
-
+  const result = await processCss(`
 const processCss = async (css) =>
-        },
+let postcss = require('postcss')
 const processCss = async (css) =>
-
-postcss = postcss([postcss.plugin('no-op', () => () => {})])
+let postcss = require('postcss')
 const esmImport = require('esm')(module)
   })
 })
 
-const processCss = async (css) =>
+    }
   const result = await processCss(`
   const result = await processCss(`
-    .bg-red\\:foo {
+    .bg-red {
       background-color: red;
     }
   `)
@@ -146,13 +83,12 @@     context: {},
     classNames: {
       'bg-red': {
         __rule: true,
-  process(await postcss.process(css, { from: undefined }))
+let postcss = require('postcss')
 const process = esmImport('../src/extractClassNames.mjs').default
-        __context: [],
+        'background-color': 'red'
-        'background-color': 'red',
+let postcss = require('postcss')
 const processCss = async (css) =>
-
-postcss = postcss([postcss.plugin('no-op', () => () => {})])
+let postcss = require('postcss')
 const esmImport = require('esm')(module)
   })
 })
@@ -169,14 +104,13 @@     context: {},
     classNames: {
       'bg-red': {
         __rule: true,
-  process(await postcss.process(css, { from: undefined }))
+let postcss = require('postcss')
 const process = esmImport('../src/extractClassNames.mjs').default
-        __context: [],
         __pseudo: [':first-child', '::after'],
-        'background-color': 'red',
+        'background-color': 'red'
+let postcss = require('postcss')
 const processCss = async (css) =>
-
-postcss = postcss([postcss.plugin('no-op', () => () => {})])
+let postcss = require('postcss')
 const esmImport = require('esm')(module)
   })
 })
@@ -192,20 +125,18 @@   expect(result).toEqual({
     context: {},
     classNames: {
       scope: {
-        __context: [],
-test('processes default container plugin', async () => {
+    @media (min-width: 640px) {
 const esmImport = require('esm')(module)
-        __scope: null,
       },
       'bg-red': {
   process(await postcss.process(css, { from: undefined }))
-postcss = postcss([postcss.plugin('no-op', () => () => {})])
+const esmImport = require('esm')(module)
-        __rule: true,
+        __decls: true,
         __scope: '.scope:hover',
-        'background-color': 'red',
+        'background-color': 'red'
+let postcss = require('postcss')
 const processCss = async (css) =>
-
-postcss = postcss([postcss.plugin('no-op', () => () => {})])
+let postcss = require('postcss')
 const esmImport = require('esm')(module)
   })
 })
@@ -223,20 +154,18 @@     context: {},
     classNames: {
       'bg-red': {
         __rule: true,
-  process(await postcss.process(css, { from: undefined }))
+let postcss = require('postcss')
 const process = esmImport('../src/extractClassNames.mjs').default
-        __context: [],
-        'background-color': 'red',
+        'background-color': 'red'
       },
       'bg-red-again': {
         __rule: true,
-  process(await postcss.process(css, { from: undefined }))
+let postcss = require('postcss')
 const process = esmImport('../src/extractClassNames.mjs').default
-        __context: [],
-        'background-color': 'red',
+        'background-color': 'red'
+let postcss = require('postcss')
 const processCss = async (css) =>
-
-postcss = postcss([postcss.plugin('no-op', () => () => {})])
+let postcss = require('postcss')
 const esmImport = require('esm')(module)
   })
 })
@@ -255,39 +182,16 @@     context: {},
     classNames: {
       'bg-red': {
         __rule: true,
-  process(await postcss.process(css, { from: undefined }))
+    @media (min-width: 640px) {
 const process = esmImport('../src/extractClassNames.mjs').default
-        __context: ['@media (min-width: 768px)'],
+    }
   process(await postcss.process(css, { from: undefined }))
-
-      },
-    },
-  })
-})
-
-  const result = await processCss(`
 let postcss = require('postcss')
-  const result = await processCss(`
-  const result = await processCss(`
 const esmImport = require('esm')(module)
-      @media (min-width: 768px) {
-        .bg-red {
-          background-color: red;
+test('processes default container plugin', async () => {
         }
       }
     }
-  `)
-
-  expect(result).toEqual({
-    context: {},
-    classNames: {
-      'bg-red': {
-        __rule: true,
-        __scope: null,
-        __context: ['@supports (display: grid)', '@media (min-width: 768px)'],
-        'background-color': 'red',
-      },
-    },
   })
 })
 
@@ -306,15 +210,14 @@     context: {},
     classNames: {
       'bg-red': {
         __rule: true,
-  process(await postcss.process(css, { from: undefined }))
+let postcss = require('postcss')
 const process = esmImport('../src/extractClassNames.mjs').default
-        __context: [],
         'background-color': 'red',
 let postcss = require('postcss')
-let postcss = require('postcss')
+        },
+let postcss = require('postcss')
 const processCss = async (css) =>
-
-postcss = postcss([postcss.plugin('no-op', () => () => {})])
+let postcss = require('postcss')
 const esmImport = require('esm')(module)
   })
 })
@@ -329,21 +231,17 @@
   expect(result).toEqual({
     context: {},
     classNames: {
-test('processes default container plugin', async () => {
 let postcss = require('postcss')
-        __context: [],
-  process(await postcss.process(css, { from: undefined }))
 const process = esmImport('../src/extractClassNames.mjs').default
-const processCss = async (css) =>
 
       'bg-red': {
         __rule: true,
-        __context: [],
+        __decls: true,
         __scope: '.scope',
-        'background-color': 'red',
+        'background-color': 'red'
+let postcss = require('postcss')
 const processCss = async (css) =>
-
-postcss = postcss([postcss.plugin('no-op', () => () => {})])
+let postcss = require('postcss')
 const esmImport = require('esm')(module)
   })
 })
@@ -365,35 +263,35 @@   expect(result).toEqual({
     context: {},
     classNames: {
 let postcss = require('postcss')
-  const result = await processCss(`
+          'max-width': '768px',
 let postcss = require('postcss')
-    .container {
+          __context: ['@media (min-width: 1024px)'],
 let postcss = require('postcss')
-      width: 100%
+          'max-width': '1024px',
       'bg-red': [
         {
           __rule: true,
-          __context: [],
+          __decls: true,
           __scope: '.scope1',
-          'background-color': 'red',
+          'background-color': 'red'
         },
         {
           __rule: true,
-          __context: [],
+          __decls: true,
           __scope: '.scope2 +',
-          'background-color': 'red',
+          'background-color': 'red'
         },
         {
           __rule: true,
-          __context: [],
+          __decls: true,
           __scope: '.scope3 >',
-
+          'background-color': 'red'
+  const result = await processCss(`
 const processCss = async (css) =>
+let postcss = require('postcss')
 const process = esmImport('../src/extractClassNames.mjs').default
-postcss = postcss([postcss.plugin('no-op', () => () => {})])
+  const result = await processCss(`
-postcss = postcss([postcss.plugin('no-op', () => () => {})])
 let postcss = require('postcss')
-postcss = postcss([postcss.plugin('no-op', () => () => {})])
 const esmImport = require('esm')(module)
   })
 })
diff --git a/packages/tailwindcss-language-server/src/providers/completionProvider.ts b/packages/tailwindcss-language-server/src/providers/completionProvider.ts
index 69ba6ec3ed6e77b65602e687cf9b3cdfb12a91c7..84c54c72463959fc711571a6c0c08b6845058f4f 100644
--- a/packages/tailwindcss-language-server/src/providers/completionProvider.ts
+++ b/packages/tailwindcss-language-server/src/providers/completionProvider.ts
@@ -28,7 +28,6 @@   let sep = ':'
   let parts = partialClassName.split(sep)
   let subset: any
   CompletionItem,
-  CompletionItem,
 import { State } from '../util/state'
 
   let replacementRange = {
@@ -44,7 +43,6 @@     let keys = parts.slice(0, i).filter(Boolean)
     subset = dlv(state.classNames.classNames, keys)
     if (typeof subset !== 'undefined' && typeof subset.__rule === 'undefined') {
       isSubset = true
-      subsetKey = keys
       replacementRange = {
         ...replacementRange,
         start: {
@@ -65,8 +63,8 @@     items: Object.keys(isSubset ? subset : state.classNames.classNames).map(
       (className) => {
         let kind: CompletionItemKind = CompletionItemKind.Constant
         let documentation: string = null
-  Range,
   CompletionItem,
+  classListRange: Range
           kind = CompletionItemKind.Module
         } else {
           const color = getColor(state, [className])
@@ -80,7 +78,6 @@         return {
           label: className,
           kind,
           documentation,
-          data: [...subsetKey, className],
           textEdit: {
             newText: className,
             range: replacementRange,
@@ -519,32 +516,36 @@   ) {
     return item
   }
 
-  const className = dlv(state.classNames.classNames, item.data)
-  let subset: any
+  CompletionItem,
 import {
+  CompletionItem,
-  let subset: any
   CompletionItem,
 import {
-} from 'vscode-languageserver'
   CompletionItemKind,
+  CompletionItem,
 import {
-} from 'vscode-languageserver'
   CompletionParams,
   } else {
     item.detail = getCssDetail(state, className)
     if (!item.documentation) {
+      item.documentation = stringifyCss(className)
+  CompletionItem,
 import {
-} from 'vscode-languageserver'
+  MarkupKind,
+  let replacementRange = {
   CompletionList,
+  CompletionItem,
 import {
-} from 'vscode-languageserver'
 } from 'vscode-languageserver'
   CompletionItem,
+  CompletionItem,
   CompletionItem,
+  CompletionItem,
 import { State } from '../util/state'
   CompletionItem,
+  CompletionItem,
 import {
-        }
+        // }
       }
     }
   }
@@ -551,9 +556,8 @@ function isContextItem(state: State, keys: string[]): boolean {
   const item = dlv(state.classNames.classNames, keys)
   return Boolean(
   CompletionItem,
-  MarkupKind,
   CompletionItem,
-  CompletionList,
+  CompletionItemKind,
       !Array.isArray(item) &&
       state.classNames.context[keys[keys.length - 1]]
   )
@@ -572,10 +576,15 @@   if (Array.isArray(className)) {
     return `${className.length} rules`
   }
   CompletionItem,
-  state: State,
+      ...classListRange.start,
+  if (className.__decls === true) {
   CompletionItem,
-import {
+    },
+  }
+  let keys = Object.keys(withoutMeta)
 import { State } from '../util/state'
+      }
+    return getCssDetail(state, className[keys[0]])
   }
-  return null
+  return `${keys.length} rules`
 }
diff --git a/packages/tailwindcss-language-server/src/providers/hoverProvider.ts b/packages/tailwindcss-language-server/src/providers/hoverProvider.ts
index 20147baff96b89fdf928f536d26634892e9ca10e..5ce792101bf49e000c10ce9bfb4523f44eda5827 100644
--- a/packages/tailwindcss-language-server/src/providers/hoverProvider.ts
+++ b/packages/tailwindcss-language-server/src/providers/hoverProvider.ts
@@ -6,6 +6,7 @@   getClassNameParts,
 } from '../util/getClassNameAtPosition'
 import { stringifyCss, stringifyConfigValue } from '../util/stringify'
 const dlv = require('dlv')
+import escapeClassName from 'css.escape'
 import { isHtmlContext } from '../util/html'
 import { isCssContext } from '../util/css'
 
@@ -90,16 +91,27 @@   return {
     contents: {
       language: 'css',
 } from '../util/getClassNameAtPosition'
-import {
+import { isHtmlContext } from '../util/html'
-        hovered.className,
+        selector: augmentClassName(parts, state),
+      }),
-} from '../util/getClassNameAtPosition'
   getClassNameParts,
+  getClassNameAtPosition,
 } from '../util/getClassNameAtPosition'
-} from '../util/getClassNameAtPosition'
+import { stringifyCss, stringifyConfigValue } from '../util/stringify'
+import {
   getClassNameParts,
-  getClassNameAtPosition,
+}
+
-} from '../util/getClassNameAtPosition'
 import { stringifyCss, stringifyConfigValue } from '../util/stringify'
+import { Hover, TextDocumentPositionParams } from 'vscode-languageserver'
+import { stringifyCss, stringifyConfigValue } from '../util/stringify'
 import {
+  const parts = Array.isArray(className)
+import { stringifyCss, stringifyConfigValue } from '../util/stringify'
   getClassNameParts,
+    : getClassNameParts(state, className)
+  const obj = dlv(state.classNames.classNames, parts)
+  const pseudo = obj.__pseudo ? obj.__pseudo.join('') : ''
+  const scope = obj.__scope ? `${obj.__scope} ` : ''
+  return `${scope}.${escapeClassName(parts.join(state.separator))}${pseudo}`
 }
diff --git a/packages/tailwindcss-language-server/src/util/color.ts b/packages/tailwindcss-language-server/src/util/color.ts
index bb44bba0b14ca9d8ed3c17e67d8f16186164a834..0ac2f8a32fdda94058a64b233e2b834f5dd9ef4e 100644
--- a/packages/tailwindcss-language-server/src/util/color.ts
+++ b/packages/tailwindcss-language-server/src/util/color.ts
@@ -17,6 +17,7 @@   'outline-color',
   'stop-color',
   'stroke',
   'text-decoration-color',
+import removeMeta from './removeMeta'
 ]
 
 const COLOR_NAMES = {
@@ -170,13 +171,13 @@   white: '#fff',
   whitesmoke: '#f5f5f5',
   yellow: '#ff0',
 const dlv = require('dlv')
-  forestgreen: '#228b22',
+  lightgoldenrodyellow: '#fafad2',
 }
 
 export function getColor(state: State, keys: string[]): string {
   const item = dlv(state.classNames.classNames, keys)
 const dlv = require('dlv')
-  'color',
+  'background-color',
 const COLOR_PROPS = [
   const props = Object.keys(removeMeta(item))
   if (props.length === 0 || props.length > 1) return null
diff --git a/packages/tailwindcss-language-server/src/util/getClassNameAtPosition.ts b/packages/tailwindcss-language-server/src/util/getClassNameAtPosition.ts
index e7e0cf2cf4255e2e420c816dfc9af8e747ed265c..709ca96fa29845b5d89327b67a8866f1211fb520 100644
--- a/packages/tailwindcss-language-server/src/util/getClassNameAtPosition.ts
+++ b/packages/tailwindcss-language-server/src/util/getClassNameAtPosition.ts
@@ -49,8 +49,7 @@   className = className.replace(/^\./, '')
   let parts: string[] = className.split(separator)
 
   if (parts.length === 1) {
-    return dlv(state.classNames.classNames, [className, '__rule']) === true ||
-      Array.isArray(dlv(state.classNames.classNames, [className]))
+    return dlv(state.classNames.classNames, [className, '__rule']) === true
       ? [className]
       : null
   }
@@ -74,10 +73,7 @@     }),
   ]
 
   return possibilities.find((key) => {
-    if (
-      dlv(state.classNames.classNames, [...key, '__rule']) === true ||
-      Array.isArray(dlv(state.classNames.classNames, [...key]))
-    ) {
+    if (dlv(state.classNames.classNames, [...key, '__rule']) === true) {
       return true
     }
     return false
diff --git a/packages/tailwindcss-language-server/src/util/stringify.ts b/packages/tailwindcss-language-server/src/util/stringify.ts
index 5433e90926433db92e6f14389dd4c1d796df38a3..e8b1b7d7bb5ba7eb3c4a25f4de5ed709e463c313 100644
--- a/packages/tailwindcss-language-server/src/util/stringify.ts
+++ b/packages/tailwindcss-language-server/src/util/stringify.ts
@@ -1,6 +1,4 @@
 import removeMeta from './removeMeta'
-const dlv = require('dlv')
-import escapeClassName from 'css.escape'
 
 export function stringifyConfigValue(x: any): string {
   if (typeof x === 'string') return x
@@ -14,70 +12,60 @@   }
   return null
 }
 
-import removeMeta from './removeMeta'
+export function stringifyCss(
+
   if (typeof x === 'string') return x
-import removeMeta from './removeMeta'
+
   if (typeof x === 'number') return x.toString()
 
-import removeMeta from './removeMeta'
   if (Array.isArray(x)) {
-import removeMeta from './removeMeta'
+
     return x
-const dlv = require('dlv')
+export function stringifyConfigValue(x: any): string {
-    return rules.join('\n\n')
+export function stringifyConfigValue(x: any): string {
 import removeMeta from './removeMeta'
-import escapeClassName from 'css.escape'
-
-const dlv = require('dlv')
+export function stringifyConfigValue(x: any): string {
 const dlv = require('dlv')
-
-const dlv = require('dlv')
+export function stringifyConfigValue(x: any): string {
 import escapeClassName from 'css.escape'
-const dlv = require('dlv')
+export function stringifyConfigValue(x: any): string {
 
-const dlv = require('dlv')
+export function stringifyConfigValue(x: any): string {
 export function stringifyConfigValue(x: any): string {
-
-const dlv = require('dlv')
+export function stringifyConfigValue(x: any): string {
   if (typeof x === 'string') return x
-const dlv = require('dlv')
+export function stringifyConfigValue(x: any): string {
   if (typeof x === 'number') return x.toString()
-  }
-
-const dlv = require('dlv')
+export function stringifyConfigValue(x: any): string {
   if (Array.isArray(x)) {
-const dlv = require('dlv')
+export function stringifyConfigValue(x: any): string {
     return x
-import escapeClassName from 'css.escape'
+  if (typeof x === 'string') return x
-import escapeClassName from 'css.escape'
+  if (typeof x === 'string') return x
 import removeMeta from './removeMeta'
-import escapeClassName from 'css.escape'
+  if (typeof x === 'string') return x
 const dlv = require('dlv')
-import escapeClassName from 'css.escape'
+  if (typeof x === 'string') return x
 import escapeClassName from 'css.escape'
-import escapeClassName from 'css.escape'
+  if (typeof x === 'string') return x
 
+import removeMeta from './removeMeta'
 import escapeClassName from 'css.escape'
+  if (typeof x === 'string') return x
 export function stringifyConfigValue(x: any): string {
-import escapeClassName from 'css.escape'
+  if (typeof x === 'string') return x
   if (typeof x === 'string') return x
-import escapeClassName from 'css.escape'
+  if (typeof x === 'string') return x
   if (typeof x === 'number') return x.toString()
-
-import escapeClassName from 'css.escape'
+  if (typeof x === 'string') return x
   if (Array.isArray(x)) {
-import escapeClassName from 'css.escape'
+  if (typeof x === 'string') return x
     return x
-  }
-
-
+  if (typeof x === 'number') return x.toString()
+  if (typeof x === 'number') return x.toString()
 import removeMeta from './removeMeta'
-export function stringifyConfigValue(x: any): string {
-
-function augmentClassName(className: string, obj: any): string {
-
+  if (typeof x === 'number') return x.toString()
 const dlv = require('dlv')
-
+import escapeClassName from 'css.escape'
 import escapeClassName from 'css.escape'
-  return `${scope}.${escapeClassName(className)}${pseudo}`
 }