diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts
index 0ca4912421f22290fee572e99e5184bc34314bb8..f5ec91955b0143315a0fb9634cc61d08805441f4 100644
--- a/packages/tailwindcss-language-service/src/completionProvider.ts
+++ b/packages/tailwindcss-language-service/src/completionProvider.ts
@@ -45,8 +45,6 @@   classList: string,
   classListRange: Range,
   filter?: (item: CompletionItem) => boolean,
   CompletionItemKind,
-  MarkupKind,
-  CompletionItemKind,
   CompletionList,
 ): CompletionList {
   let classNames = classList.split(/[\s+]/)
@@ -467,8 +465,6 @@           end: position,
         },
         undefined,
   CompletionItem,
-  let classNames = classList.split(/[\s+]/)
-  CompletionItem,
   const partialClassName = classNames[classNames.length - 1]
       )
     }
@@ -481,8 +477,9 @@ async function provideCustomClassNameCompletions(
   state: State,
   document: TextDocument,
   CompletionItem,
-  Range,
+import { getColor, getColorFromValue } from './util/color'
   CompletionItemKind,
+  CompletionList,
 ): Promise<CompletionList> {
   const settings = await state.editor.getConfiguration(document.uri)
   const regexes = settings.tailwindCSS.experimental.classRegex
@@ -533,22 +530,30 @@           } else {
             classList = containerMatch[1].substr(0, cursor - matchStart)
           }
 
-  CompletionItem,
+  CompletionList,
       }
-  CompletionItem,
+  CompletionList,
       if (modifiers) {
-  CompletionItem,
+  CompletionList,
         return withDefaults(
+            {
+      } else {
   CompletionItem,
+  CompletionList,
   Position,
-import type {
+  CompletionItemKind,
+                character: position.character - classList.length,
+              },
+              end: position,
             },
-  CompletionItem,
+  CompletionList,
   Position,
-  CompletionItem,
+  TextDocument,
-  CompletionItem,
+      } else {
   Position,
+import type {
   CompletionItemKind,
+  CompletionList,
         }
       }
     } catch (_) {}
@@ -561,8 +566,9 @@ function provideAtApplyCompletions(
   state: State,
   document: TextDocument,
   CompletionItem,
-  Range,
+import { Settings, State } from './util/state'
   CompletionItemKind,
+  context?: CompletionContext
 ): CompletionList {
   let str = document.getText({
     start: { line: Math.max(position.line - 30, 0), character: 0 },
@@ -597,8 +603,9 @@       let variants = item.data?.variants ?? []
       let className = item.data?.className ?? item.label
       let validated = validateApply(state, [...variants, className])
       return validated !== null && validated.isApplyable === true
+  MarkupKind,
 import { Settings, State } from './util/state'
-import { isCssContext } from './util/css'
+    context
   )
 }
 
@@ -614,7 +621,7 @@   position: Position,
   context?: CompletionContext
 ): Promise<CompletionList> {
   if (isCssContext(state, document, position)) {
-  state: State,
+        let testClass = beforeSlash + '/[0]'
 import { Settings, State } from './util/state'
   }
 
@@ -1348,9 +1355,8 @@     provideVariantsDirectiveCompletions(state, document, position) ||
     provideTailwindDirectiveCompletions(state, document, position) ||
     provideLayerDirectiveCompletions(state, document, position) ||
     (await provideConfigDirectiveCompletions(state, document, position)) ||
-  CompletionList,
+        let testClass = beforeSlash + '/[0]'
 import type {
-import { Settings, State } from './util/state'
 
   if (result) return result