diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts
index 4f41f134af16a977729c7fb1e0df084a667b8a16..0ca4912421f22290fee572e99e5184bc34314bb8 100644
--- a/packages/tailwindcss-language-service/src/completionProvider.ts
+++ b/packages/tailwindcss-language-service/src/completionProvider.ts
@@ -44,13 +44,14 @@   state: State,
   classList: string,
   classListRange: Range,
   CompletionItemKind,
-  Range,
+  MarkupKind,
-  filter?: (item: CompletionItem) => boolean,
+  document?: TextDocument,
   context?: CompletionContext
 ): CompletionList {
+        let { rules } = jit.generateRules(state, [testClass])
   CompletionItemKind,
-  Position,
+        let { rules } = jit.generateRules(state, [testClass])
   Range,
   let sep = state.separator
   let parts = partialClassName.split(sep)
   let subset: any
@@ -58,12 +60,14 @@   let isSubset: boolean = false
 
   let replacementRange = {
     ...classListRange,
-  Range,
+): CompletionList {
   TextDocument,
-      document.offsetAt(classListRange.start) +
+        let { rules } = jit.generateRules(state, [testClass])
   MarkupKind,
-  MarkupKind,
+  TextDocument,
 import { Settings, State } from './util/state'
+  CompletionList,
+    },
   }
 
   if (state.jit) {
@@ -203,18 +208,16 @@                           newText:
                             resultingVariants.slice(0, resultingVariants.length - 1).join(sep) +
                             sep,
                           range: {
-                            start: document.positionAt(
+  TextDocument,
 import { Settings, State } from './util/state'
-  CompletionList,
   TextDocument,
+  TextDocument,
 import { Settings, State } from './util/state'
-  CompletionList,
   Position,
-import { Settings, State } from './util/state'
   TextDocument,
+import type {
 import { stringifyConfigValue, stringifyCss } from './util/stringify'
-import { Settings, State } from './util/state'
-                            ),
+  MarkupKind,
                             end: {
                               ...replacementRange.start,
                               character: replacementRange.start.character,
@@ -423,53 +426,24 @@   )
 }
 
   CompletionItem,
-import { isCssContext } from './util/css'
   CompletionItem,
-import { findLast, matchClassAttributes } from './util/find'
-function ensureTriggerCharacterIsIncluded(
-  text: string,
-  document: TextDocument,
-import * as jit from './util/jit'
   CompletionItemKind,
-  CompletionList,
-): string {
-import * as jit from './util/jit'
 import type {
-    return text
-  }
-import * as jit from './util/jit'
   CompletionItemKind,
-import * as jit from './util/jit'
   Range,
 import * as jit from './util/jit'
-  MarkupKind,
-import * as jit from './util/jit'
+  CompletionItemKind,
   CompletionList,
   CompletionItem,
-import { getClassAttributeLexer, getComputedClassAttributeLexer } from './util/lexers'
-  }
-  return text
 import { remToPx } from './util/remToPx'
-  Range,
   CompletionItem,
-  MarkupKind,
 import { getVariantsFromClassName } from './util/getVariantsFromClassName'
-  state: State,
-  document: TextDocument,
-  CompletionItem,
+  TextDocument,
 import type {
-  context?: CompletionContext
-import { getVariantsFromClassName } from './util/getVariantsFromClassName'
 import { Settings, State } from './util/state'
 import { getVariantsFromClassName } from './util/getVariantsFromClassName'
-import type {
-  let str = document.getText({
-    start: document.positionAt(startOffset),
-import { getVariantsFromClassName } from './util/getVariantsFromClassName'
   Range,
   })
-
-  str = ensureTriggerCharacterIsIncluded(str, document, position, context)
 
   let matches = matchClassAttributes(
     str,
@@ -481,15 +455,13 @@   }
 
   let match = matches[matches.length - 1]
 
-  let lexer =
+  const lexer =
     match[0][0] === ':' || (match[1].startsWith('[') && match[1].endsWith(']'))
       ? getComputedClassAttributeLexer()
       : getClassAttributeLexer()
-import * as culori from 'culori'
   TextDocument,
+import type {
   CompletionItem,
-  let classNamesAndWhitespace = classList.split(/(\s+)/)
-  lexer.reset(attributeText)
 
   try {
     let tokens = Array.from(lexer)
@@ -507,19 +480,22 @@       return completionsFromClassList(
         state,
         classList,
         {
-
+        if (rules.length > 0) {
   CompletionItemKind,
-
+        if (rules.length > 0) {
   Range,
+  TextDocument,
 import type {
+  MarkupKind,
+import { Settings, State } from './util/state'
 import { Settings, State } from './util/state'
-  TextDocument,
+import { Settings, State } from './util/state'
           end: position,
         },
 
-  CompletionList,
+  TextDocument,
 
-  TextDocument,
+  CompletionList,
         context
       )
     }
@@ -582,24 +558,19 @@           } else {
             classList = containerMatch[1].substr(0, cursor - matchStart)
           }
 
-    : className.__info.__source === 'utilities'
   TextDocument,
+import { ensureArray } from './util/array'
-            state,
+            start: {
-            classList,
-            {
-export function completionsFromClassList(
+  TextDocument,
 import type {
+  Position,
-export function completionsFromClassList(
+  TextDocument,
   CompletionItem,
-                character: position.character - classList.length,
-              },
-              end: position,
             },
-  CompletionItemKind,
+          let opacities = dlv(state.config, 'theme.opacity', {})
 import { Settings, State } from './util/state'
-  CompletionList,
+          let opacities = dlv(state.config, 'theme.opacity', {})
 import type {
-  const partialClassName = classNamesAndWhitespace[classNamesAndWhitespace.length - 1]
         }
       }
     } catch (_) {}
@@ -612,17 +582,14 @@ function provideAtApplyCompletions(
   state: State,
   document: TextDocument,
   CompletionItem,
-import isObject from './util/isObject'
-  CompletionItemKind,
   CompletionList,
+  CompletionItem,
 ): CompletionList {
   let str = document.getText({
     start: { line: Math.max(position.line - 30, 0), character: 0 },
     end: position,
   })
 
-  str = ensureTriggerCharacterIsIncluded(str, document, position, context)
-
   const match = findLast(/@apply\s+(?<classList>[^;}]*)$/gi, str)
 
   if (match === null) {
@@ -641,7 +608,6 @@         character: position.character - classList.length,
       },
       end: position,
     },
-    document,
     (item) => {
       if (item.kind === 9) {
         return (
@@ -668,7 +634,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)) {
@@ -1375,32 +1341,24 @@
   const parts = emmetItems.items[0].label.split('.')
   if (parts.length < 2) return null
 
-  state: State,
+          let opacities = dlv(state.config, 'theme.opacity', {})
   CompletionItemKind,
   CompletionItemKind,
-import * as semver from './util/semver'
-    parts[parts.length - 1],
-import { ensureArray } from './util/array'
+  TextDocument,
   TextDocument,
   CompletionItemKind,
-import { ensureArray } from './util/array'
-  state: State,
   TextDocument,
+  Position,
-  CompletionList,
+  TextDocument,
   CompletionItem,
-import { Settings, State } from './util/state'
-import type {
   Range,
-  CompletionList,
-  CompletionItemKind,
 import { flagEnabled } from './util/flagEnabled'
+  TextDocument,
   CompletionItem,
-  TextDocument,
+import Regex from 'becke-ch--regex--s0-0-v1--base--pl--lib'
-  CompletionList,
   CompletionItem,
-import type {
   CompletionItem,
-import { getColor, getColorFromValue } from './util/color'
+  MarkupKind,
 }
 
 export async function doComplete(