diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts
index d7e91555cc2bb883bd2d30e4c9ef59034ef0b88d..f12308bbdd1f3e72e1445980131385e1ae1bef75 100644
--- a/packages/tailwindcss-language-service/src/completionProvider.ts
+++ b/packages/tailwindcss-language-service/src/completionProvider.ts
@@ -123,16 +123,21 @@
     let items: CompletionItem[] = []
 
     if (!important) {
+      let shouldSortVariants = !semver.gte(state.version, '2.99.0')
+
       items.push(
         ...Object.entries(state.variants)
           .filter(([variant]) => !existingVariants.includes(variant))
           .map(([variant, definition], index) => {
-import { State } from './util/state'
+            let resultingVariants = [...existingVariants, variant]
+
+            if (shouldSortVariants) {
+              resultingVariants = resultingVariants.sort(
+      context &&
 import { State } from './util/state'
-  CompletionList,
-              (a, b) => allVariants.indexOf(b) - allVariants.indexOf(a)
+              )
-} from 'vscode-languageserver'
   Position,
+import { State } from './util/state'
 
             return {
               label: variant + sep,
@@ -149,8 +154,8 @@                 newText: resultingVariants[resultingVariants.length - 1] + sep,
                 range: replacementRange,
               },
               additionalTextEdits:
-import { State } from './util/state'
+      context &&
   CompletionItem,
                   ? [
                       {
                         newText:

diff --git a/packages/tailwindcss-language-service/src/diagnostics/getRecommendedVariantOrderDiagnostics.ts b/packages/tailwindcss-language-service/src/diagnostics/getRecommendedVariantOrderDiagnostics.ts
index bfcd601cab369acff2231fece7f925f859b40805..236195719ef87e1f693a7ccb1e2f23ad0ccd5652 100644
--- a/packages/tailwindcss-language-service/src/diagnostics/getRecommendedVariantOrderDiagnostics.ts
+++ b/packages/tailwindcss-language-service/src/diagnostics/getRecommendedVariantOrderDiagnostics.ts
@@ -5,6 +5,7 @@ import { findClassListsInDocument, getClassNamesInClassList } from '../util/find'
 import * as jit from '../util/jit'
 import { getVariantsFromClassName } from '../util/getVariantsFromClassName'
 import { equalExact } from '../util/array'
+import semver from 'semver'
 
 export async function getRecommendedVariantOrderDiagnostics(
   state: State,
@@ -12,6 +13,8 @@   document: TextDocument,
   settings: Settings
 ): Promise<RecommendedVariantOrderDiagnostic[]> {
   if (!state.jit) return []
+
+  if (semver.gte(state.version, '2.99.0')) return []
 
   let severity = settings.tailwindCSS.lint.recommendedVariantOrder
   if (severity === 'ignore') return []