diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts
index a1ac076..1124d5c 100644
--- a/packages/tailwindcss-language-service/src/completionProvider.ts
+++ b/packages/tailwindcss-language-service/src/completionProvider.ts
@@ -632,16 +632,27 @@ function provideTailwindDirectiveCompletions(
           )})`,
         },
       },
-      {
-        label: 'screens',
-        documentation: {
-          kind: 'markdown' as typeof MarkupKind.Markdown,
-          value: `Use this directive to control where Tailwind injects the responsive variations of each utility.\n\nIf omitted, Tailwind will append these classes to the very end of your stylesheet by default.\n\n[Tailwind CSS Documentation](${docsUrl(
-            state.version,
-            'functions-and-directives/#tailwind'
-          )})`,
-        },
-      },
+      state.jit && semver.gte(state.version, '2.1.99')
+        ? {
+            label: 'variants',
+            documentation: {
+              kind: 'markdown' as typeof MarkupKind.Markdown,
+              value: `Use this directive to control where Tailwind injects the utility variants.\n\nThis directive is considered an advanced escape hatch and it is recommended to omit it whenever possible. If omitted, Tailwind will append these classes to the very end of your stylesheet by default.\n\n[Tailwind CSS Documentation](${docsUrl(
+                state.version,
+                'just-in-time-mode#variants-are-inserted-at-tailwind-variants'
+              )})`,
+            },
+          }
+        : {
+            label: 'screens',
+            documentation: {
+              kind: 'markdown' as typeof MarkupKind.Markdown,
+              value: `Use this directive to control where Tailwind injects the responsive variations of each utility.\n\nIf omitted, Tailwind will append these classes to the very end of your stylesheet by default.\n\n[Tailwind CSS Documentation](${docsUrl(
+                state.version,
+                'functions-and-directives/#tailwind'
+              )})`,
+            },
+          },
     ].map((item) => ({
       ...item,
       kind: 21,
diff --git a/packages/tailwindcss-language-service/src/diagnostics/getInvalidTailwindDirectiveDiagnostics.ts b/packages/tailwindcss-language-service/src/diagnostics/getInvalidTailwindDirectiveDiagnostics.ts
index 638a10e..9081210 100644
--- a/packages/tailwindcss-language-service/src/diagnostics/getInvalidTailwindDirectiveDiagnostics.ts
+++ b/packages/tailwindcss-language-service/src/diagnostics/getInvalidTailwindDirectiveDiagnostics.ts
@@ -34,7 +34,7 @@ export function getInvalidTailwindDirectiveDiagnostics(
     let valid = [
       'utilities',
       'components',
-      'screens',
+      state.jit && semver.gte(state.version, '2.1.99') ? 'variants' : 'screens',
       semver.gte(state.version, '1.0.0-beta.1') ? 'base' : 'preflight',
     ]
 
@@ -43,12 +43,15 @@ export function getInvalidTailwindDirectiveDiagnostics(
         return null
       }
 
-      let message = `'${match.groups.value}' is not a valid group.`
+      let message = `'${match.groups.value}' is not a valid value.`
       let suggestions: string[] = []
 
       if (match.groups.value === 'preflight') {
         suggestions.push('base')
         message += ` Did you mean 'base'?`
+      } else if (match.groups.value === 'screens') {
+        suggestions.push('variants')
+        message += ` Did you mean 'variants'?`
       } else {
         let suggestion = closest(match.groups.value, valid)
         if (suggestion) {