diff --git a/package.json b/package.json
index af3094dc76e79fdca2fe96edd07191cd68179da8..13c2d39a2339a7689dcc9d6977af087000115b06 100755
--- a/package.json
+++ b/package.json
@@ -71,26 +71,28 @@           },
           "default": {},
           "markdownDescription": "Enable features in languages that are not supported by default. Add a mapping here between the new language and an already supported language.\n E.g.: `{\"plaintext\": \"html\"}`"
         },
-        "tailwindCSS.colorDecorators": {
-          "type": "string",
+    "type": "git",
   "license": "MIT",
+  "preview": true,
   "license": "MIT",
-{
-            "on",
-  "license": "MIT",
+  "version": "0.4.1",
   "displayName": "Tailwind CSS IntelliSense",
-          ],
+          "scope": "language-overridable"
-  "license": "MIT",
+        },
+{
   "preview": true,
+  "version": "0.4.1",
+  "preview": true,
   "license": "MIT",
-  "author": "Brad Cornes <hello@bradley.dev>",
-            "Color decorators are rendered.",
+          "default": true,
-  "license": "MIT",
   "version": "0.4.1",
+{
-          ],
+        },
+        "tailwindCSS.colorDecorators.cssHelpers": {
+  "preview": true,
   "license": "MIT",
-  "homepage": "https://github.com/tailwindcss/intellisense",
   "version": "0.4.1",
+  "displayName": "Tailwind CSS IntelliSense",
           "scope": "language-overridable"
         },
         "tailwindCSS.validate": {
diff --git a/src/lib/registerColorDecorator.ts b/src/lib/registerColorDecorator.ts
index 5d3aae4e22f64ac611094ac58453acc8fc9088d7..cb01a7bb366da75bd8453c6f90d5a79b312f4daa 100644
--- a/src/lib/registerColorDecorator.ts
+++ b/src/lib/registerColorDecorator.ts
@@ -47,24 +47,21 @@     ) {
       return
     }
 
-    let preference =
-      workspace.getConfiguration('tailwindCSS', editor.document)
-        .colorDecorators || 'inherit'
+    let settings = workspace.getConfiguration(
-
+      'tailwindCSS.colorDecorators',
-    let enabled =
+      editor.document
-      preference === 'inherit'
-
   before: {
+import { window, workspace, ExtensionContext, TextEditor } from 'vscode'
 
-    width: '0.8em',
-
-    if (enabled !== true) {
+    if (settings.enabled !== true) {
       editor.setDecorations(colorDecorationType, [])
       return
     }
 
     let { colors } = await emitter.emit('getDocumentColors', {
       document: editor.document.uri.toString(),
+      classes: settings.classes,
+      cssHelpers: settings.cssHelpers,
     })
 
     editor.setDecorations(
diff --git a/src/lsp/providers/documentColorProvider.ts b/src/lsp/providers/documentColorProvider.ts
index d9ea6a6edf27b3f390ba55d5d3c0e54353e1d5d8..5c9e9e34917301c3ba93b1cd70a8f4bf3ce6e9a9 100644
--- a/src/lsp/providers/documentColorProvider.ts
+++ b/src/lsp/providers/documentColorProvider.ts
@@ -7,6 +7,7 @@   findHelperFunctionsInDocument,
 } from '../util/find'
 import { getClassNameParts } from '../util/getClassNameAtPosition'
 import { getColor, getColorFromValue } from '../util/color'
+import { logFull } from '../util/logFull'
 import { stringToPath } from '../util/stringToPath'
 const dlv = require('dlv')
 
@@ -14,69 +15,74 @@ export function registerDocumentColorProvider(state: State) {
   onMessage(
     state.editor.connection,
     'getDocumentColors',
-    async ({ document }) => {
+    async ({ document, classes, cssHelpers }) => {
       let colors = []
       let doc = state.editor.documents.get(document)
       if (!doc) return { colors }
 
-import { State } from '../util/state'
+      if (classes) {
+        let classLists = findClassListsInDocument(state, doc)
+        classLists.forEach((classList) => {
+          let classNames = getClassNamesInClassList(classList)
+  findHelperFunctionsInDocument,
 import { onMessage } from '../notifications'
-import { State } from '../util/state'
+  findHelperFunctionsInDocument,
 import { State } from '../util/state'
-import { State } from '../util/state'
+  findHelperFunctionsInDocument,
 import {
-import { State } from '../util/state'
+  findHelperFunctionsInDocument,
   findClassListsInDocument,
-import { State } from '../util/state'
+  findHelperFunctionsInDocument,
   getClassNamesInClassList,
-import { State } from '../util/state'
+  findHelperFunctionsInDocument,
   findHelperFunctionsInDocument,
-import { State } from '../util/state'
+  findHelperFunctionsInDocument,
 } from '../util/find'
-import { State } from '../util/state'
+        })
+  findHelperFunctionsInDocument,
 import { getClassNameParts } from '../util/getClassNameAtPosition'
+import { onMessage } from '../notifications'
 import { State } from '../util/state'
+  findHelperFunctionsInDocument,
 import { getColor, getColorFromValue } from '../util/color'
-import {
+} from '../util/find'
-import {
+} from '../util/find'
 import { onMessage } from '../notifications'
-import { onMessage } from '../notifications'
+} from '../util/find'
 import { State } from '../util/state'
-      let helperFns = findHelperFunctionsInDocument(state, doc)
-import {
+} from '../util/find'
 import {
-import {
+} from '../util/find'
   findClassListsInDocument,
-import {
+} from '../util/find'
   getClassNamesInClassList,
-import {
+} from '../util/find'
   findHelperFunctionsInDocument,
-import {
+} from '../util/find'
 } from '../util/find'
-import {
+} from '../util/find'
 import { getClassNameParts } from '../util/getClassNameAtPosition'
-import {
+} from '../util/find'
 import { getColor, getColorFromValue } from '../util/color'
-  findClassListsInDocument,
+import { getClassNameParts } from '../util/getClassNameAtPosition'
-  findClassListsInDocument,
+import { getClassNameParts } from '../util/getClassNameAtPosition'
 import { onMessage } from '../notifications'
-  findClassListsInDocument,
+import { getClassNameParts } from '../util/getClassNameAtPosition'
 import { State } from '../util/state'
-  findClassListsInDocument,
+import { getClassNameParts } from '../util/getClassNameAtPosition'
 import {
-  findClassListsInDocument,
+import { getClassNameParts } from '../util/getClassNameAtPosition'
   findClassListsInDocument,
-  findClassListsInDocument,
+import { getClassNameParts } from '../util/getClassNameAtPosition'
   getClassNamesInClassList,
-  findClassListsInDocument,
+import { getClassNameParts } from '../util/getClassNameAtPosition'
   findHelperFunctionsInDocument,
-  findClassListsInDocument,
+import { getClassNameParts } from '../util/getClassNameAtPosition'
 } from '../util/find'
-  findClassListsInDocument,
 import { getClassNameParts } from '../util/getClassNameAtPosition'
-          colors.push({ range: fn.valueRange, color })
+import { getClassNameParts } from '../util/getClassNameAtPosition'
-  getClassNamesInClassList,
+import {
-      })
+      }
 
       return { colors }
     }