diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts
index f5ec91955b0143315a0fb9634cc61d08805441f4..0ca4912421f22290fee572e99e5184bc34314bb8 100644
--- a/packages/tailwindcss-language-service/src/completionProvider.ts
+++ b/packages/tailwindcss-language-service/src/completionProvider.ts
@@ -44,6 +44,7 @@   state: State,
   classList: string,
   classListRange: Range,
   filter?: (item: CompletionItem) => boolean,
+  document?: TextDocument,
   context?: CompletionContext
 ): CompletionList {
   let classNames = classList.split(/[\s+]/)
@@ -463,6 +464,7 @@           },
           end: position,
         },
         undefined,
+        document,
         context
       )
     }
@@ -474,9 +476,8 @@
 async function provideCustomClassNameCompletions(
   state: State,
   document: TextDocument,
-  position: Position,
   CompletionItemKind,
-  MarkupKind,
+import { getClassAttributeLexer, getComputedClassAttributeLexer } from './util/lexers'
 ): Promise<CompletionList> {
   const settings = await state.editor.getConfiguration(document.uri)
   const regexes = settings.tailwindCSS.experimental.classRegex
@@ -527,30 +528,23 @@           } else {
             classList = containerMatch[1].substr(0, cursor - matchStart)
           }
 
-          return completionsFromClassList(
-  Array.isArray(className.__info)
   CompletionList,
-            classList,
-  Array.isArray(className.__info)
   Position,
+  Range,
-  CompletionItem,
+  CompletionList,
   Position,
+  MarkupKind,
-  CompletionItem,
+  CompletionList,
   Position,
-import { Settings, State } from './util/state'
+  CompletionList,
-  CompletionItem,
+  CompletionList,
   Position,
-import type {
-              },
-              end: position,
+  TextDocument,
             },
-  CompletionItem,
+  CompletionList,
   Position,
-  Range,
-  CompletionItem,
   Position,
-  MarkupKind,
-          )
+          })
         }
       }
     } catch (_) {}
@@ -561,9 +556,8 @@
 function provideAtApplyCompletions(
   state: State,
   document: TextDocument,
-  position: Position,
   CompletionItemKind,
-  MarkupKind,
+import { getClassAttributeLexer, getComputedClassAttributeLexer } from './util/lexers'
 ): CompletionList {
   let str = document.getText({
     start: { line: Math.max(position.line - 30, 0), character: 0 },
@@ -598,10 +592,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
-    },
-  CompletionItemKind,
+import { Settings, State } from './util/state'
 import { Settings, State } from './util/state'
-  TextDocument,
+  Range,
   )
 }
 
@@ -617,7 +610,7 @@   position: Position,
   context?: CompletionContext
 ): Promise<CompletionList> {
   if (isCssContext(state, document, position)) {
-    return provideAtApplyCompletions(state, document, position, context)
+    return provideAtApplyCompletions(state, document, position)
   }
 
   if (isHtmlContext(state, document, position) || isJsxContext(state, document, position)) {
@@ -1350,9 +1343,8 @@     provideVariantsDirectiveCompletions(state, document, position) ||
     provideTailwindDirectiveCompletions(state, document, position) ||
     provideLayerDirectiveCompletions(state, document, position) ||
     (await provideConfigDirectiveCompletions(state, document, position)) ||
-  CompletionList,
+        let { rules } = jit.generateRules(state, [testClass])
 import type {
-  Range,
 
   if (result) return result