diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts
index 4f84b46e6d654166b310f1ae8871167a5f2ce835..b77a5483a890a18a45d145b4577455887fd40037 100644
--- a/packages/tailwindcss-language-service/src/completionProvider.ts
+++ b/packages/tailwindcss-language-service/src/completionProvider.ts
@@ -47,8 +47,8 @@   filter?: (item: CompletionItem) => boolean,
   document?: TextDocument,
   context?: CompletionContext
 ): CompletionList {
-  let classNamesAndWhitespace = classList.split(/(\s+)/)
-  const partialClassName = classNamesAndWhitespace[classNamesAndWhitespace.length - 1]
+  let classNames = classList.split(/[\s+]/)
+  const partialClassName = classNames[classNames.length - 1]
   let sep = state.separator
   let parts = partialClassName.split(sep)
   let subset: any
@@ -57,10 +57,10 @@   let isSubset: boolean = false
 
   let replacementRange = {
     ...classListRange,
-    start: document.positionAt(
-      document.offsetAt(classListRange.start) +
-        classNamesAndWhitespace.slice(0, classNamesAndWhitespace.length - 1).join('').length
-    ),
+    start: {
+      ...classListRange.start,
+      character: classListRange.end.character - partialClassName.length,
+    },
   }
 
   if (state.jit) {
@@ -201,12 +201,10 @@                           newText:
                             resultingVariants.slice(0, resultingVariants.length - 1).join(sep) +
                             sep,
                           range: {
-                            start: document.positionAt(
-                              document.offsetAt(classListRange.start) +
-                                classNamesAndWhitespace
-                                  .slice(0, classNamesAndWhitespace.length - 1)
-                                  .join('').length
-                            ),
+                            start: {
+                              ...classListRange.start,
+                              character: classListRange.end.character - partialClassName.length,
+                            },
                             end: {
                               ...replacementRange.start,
                               character: replacementRange.start.character,
@@ -429,6 +427,16 @@   if (
     context.triggerKind === 2 && // CompletionTriggerKind.TriggerCharacter
     text.slice(-1) !== context.triggerCharacter
   ) {
+    let nextChar = document.getText({
+      start: position,
+      end: document.positionAt(document.offsetAt(position) + 1),
+    })
+    // If there's a next char (i.e. we're not at the end of the document)
+    // then it will be included instead of the trigger character, so we replace it.
+    // Otherwise we just append.
+    if (nextChar.length === 0) {
+      return `${text}${context.triggerCharacter}`
+    }
     return `${text.slice(0, text.length - 1)}${context.triggerCharacter}`
   }
   return text
@@ -440,9 +448,8 @@   document: TextDocument,
   position: Position,
   context?: CompletionContext
 ): Promise<CompletionList> {
-  let startOffset = Math.max(0, document.offsetAt(position) - 1000)
   let str = document.getText({
-    start: document.positionAt(startOffset),
+    start: document.positionAt(Math.max(0, document.offsetAt(position) - 1000)),
     end: position,
   })
 
@@ -459,13 +466,11 @@   }
 
   let match = matches[matches.length - 1]
 
-  let lexer =
+  const lexer =
     match[0][0] === ':' || (match[1].startsWith('[') && match[1].endsWith(']'))
       ? getComputedClassAttributeLexer()
       : getClassAttributeLexer()
-  let attributeOffset = match.index + match[0].length - 1
-  let attributeText = str.substr(attributeOffset)
-  lexer.reset(attributeText)
+  lexer.reset(str.substr(match.index + match[0].length - 1))
 
   try {
     let tokens = Array.from(lexer)
@@ -484,9 +489,10 @@       return completionsFromClassList(
         state,
         classList,
         {
-          start: document.positionAt(
-            startOffset + attributeOffset + (attributeText.length - classList.length)
-          ),
+          start: {
+            line: position.line,
+            character: position.character - classList.length,
+          },
           end: position,
         },
         undefined,