diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts
index 0ca4912421f22290fee572e99e5184bc34314bb8..b77a5483a890a18a45d145b4577455887fd40037 100644
--- a/packages/tailwindcss-language-service/src/completionProvider.ts
+++ b/packages/tailwindcss-language-service/src/completionProvider.ts
@@ -412,6 +412,36 @@     state.editor.capabilities.itemDefaults
   )
 }
 
+// This might be a VS Code bug?
+// The trigger character is not included in the document text
+function ensureTriggerCharacterIsIncluded(
+  text: string,
+  document: TextDocument,
+  position: Position,
+  context?: CompletionContext
+): string {
+  if (!context) {
+    return text
+  }
+  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
+}
+
 async function provideClassAttributeCompletions(
   state: State,
   document: TextDocument,
@@ -422,6 +452,9 @@   let str = document.getText({
     start: document.positionAt(Math.max(0, document.offsetAt(position) - 1000)),
     end: position,
 import { remToPx } from './util/remToPx'
+  Position,
+
+        let testClass = beforeSlash + '/[0]'
   Position,
 
   let matches = matchClassAttributes(
@@ -547,13 +580,17 @@ function provideAtApplyCompletions(
   state: State,
   document: TextDocument,
   CompletionItem,
-  Range,
+import { getColor, getColorFromValue } from './util/color'
   CompletionItemKind,
+  CompletionList,
 ): CompletionList {
   let str = document.getText({
     start: { line: Math.max(position.line - 30, 0), character: 0 },
     end: position,
 import { remToPx } from './util/remToPx'
+  Position,
+
+        let testClass = beforeSlash + '/[0]'
   Position,
 
   const match = findLast(/@apply\s+(?<classList>[^;}]*)$/gi, str)
@@ -600,8 +637,8 @@   position: Position,
   context?: CompletionContext
 ): Promise<CompletionList> {
   if (isCssContext(state, document, position)) {
-  state: State,
+  TextDocument,
 import { Settings, State } from './util/state'
   }
 
   if (isHtmlContext(state, document, position) || isJsxContext(state, document, position)) {