diff --git a/.vscodeignore b/.vscodeignore
index eef67fb..23a6082 100755
--- a/.vscodeignore
+++ b/.vscodeignore
@@ -8,3 +8,4 @@ contributing.md
 node_modules/**
 src/**
 tests/**
+img/**
diff --git a/img/css-highlighting-after.png b/img/css-highlighting-after.png
new file mode 100755
index 0000000..86a12fb
Binary files /dev/null and b/img/css-highlighting-after.png differ
diff --git a/img/css-highlighting-before.png b/img/css-highlighting-before.png
new file mode 100755
index 0000000..2eeffdc
Binary files /dev/null and b/img/css-highlighting-before.png differ
diff --git a/img/css.gif b/img/css.gif
new file mode 100755
index 0000000..e81904e
Binary files /dev/null and b/img/css.gif differ
diff --git a/img/html-hover.gif b/img/html-hover.gif
new file mode 100755
index 0000000..94540b8
Binary files /dev/null and b/img/html-hover.gif differ
diff --git a/img/html.gif b/img/html.gif
new file mode 100755
index 0000000..8ffc7ff
Binary files /dev/null and b/img/html.gif differ
diff --git a/package-lock.json b/package-lock.json
index 9f6cc9e..91c1aca 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "vscode-tailwindcss",
-	"version": "0.3.0",
+	"version": "0.3.1",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
diff --git a/package.json b/package.json
index 456a3dc..2b5746f 100755
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "preview": true,
   "author": "Brad Cornes <hello@bradley.dev>",
   "license": "MIT",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "homepage": "https://github.com/bradlc/vscode-tailwindcss",
   "bugs": {
     "url": "https://github.com/bradlc/vscode-tailwindcss/issues",
@@ -60,12 +60,15 @@
         "tailwindCSS.emmetCompletions": {
           "type": "boolean",
           "default": false,
-          "description": "Enable class name completions when using Emmet-style syntax, for example `div.bg-red-500.uppercase`."
+          "markdownDescription": "Enable class name completions when using Emmet-style syntax, for example `div.bg-red-500.uppercase`"
         },
         "tailwindCSS.includeLanguages": {
           "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          },
           "default": {},
-          "description": "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\"}`"
+          "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\"}`"
         }
       }
     }
diff --git a/src/lsp/providers/completionProvider.ts b/src/lsp/providers/completionProvider.ts
index 8f47ca6..6dbb1e7 100644
--- a/src/lsp/providers/completionProvider.ts
+++ b/src/lsp/providers/completionProvider.ts
@@ -126,7 +126,7 @@ function provideClassAttributeCompletions(
     end: position,
   })
 
-  const match = findLast(/[\s:]class(?:Name)?=['"`{]/gi, str)
+  const match = findLast(/(?:\b|:)class(?:Name)?=['"`{]/gi, str)
 
   if (match === null) {
     return null
diff --git a/src/lsp/util/find.ts b/src/lsp/util/find.ts
index 9a04ac4..3eb49e3 100644
--- a/src/lsp/util/find.ts
+++ b/src/lsp/util/find.ts
@@ -5,8 +5,11 @@ import { isCssContext, isCssDoc } from './css'
 import { isHtmlContext, isHtmlDoc, isSvelteDoc, isVueDoc } from './html'
 import { isWithinRange } from './isWithinRange'
 import { isJsContext, isJsDoc } from './js'
-import { getClassAttributeLexer } from './lexers'
 import { flatten } from '../../util/array'
+import {
+  getClassAttributeLexer,
+  getComputedClassAttributeLexer,
+} from './lexers'
 
 export function findAll(re: RegExp, str: string): RegExpMatchArray[] {
   let match: RegExpMatchArray
@@ -111,13 +114,16 @@ export function findClassListsInHtmlRange(
   range?: Range
 ): DocumentClassList[] {
   const text = doc.getText(range)
-  const matches = findAll(/[\s:]class(?:Name)?=['"`{]/g, text)
+  const matches = findAll(/(?:\b|:)class(?:Name)?=['"`{]/g, text)
   const result: DocumentClassList[] = []
 
   matches.forEach((match) => {
     const subtext = text.substr(match.index + match[0].length - 1, 200)
 
-    let lexer = getClassAttributeLexer()
+    let lexer =
+      match[0][0] === ':'
+        ? getComputedClassAttributeLexer()
+        : getClassAttributeLexer()
     lexer.reset(subtext)
 
     let classLists: { value: string; offset: number }[] = []