diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts
index a1ac0768ca95e15b27b3ea0b7fe77a3230b45023..1124d5cf0bbc01caed2090d303d220dda869e741 100644
--- a/packages/tailwindcss-language-service/src/completionProvider.ts
+++ b/packages/tailwindcss-language-service/src/completionProvider.ts
@@ -632,30 +632,49 @@             'functions-and-directives/#tailwind'
           )})`,
         },
       },
+      state.jit && semver.gte(state.version, '2.1.99')
   CompletionItemKind,
 import { State } from './util/state'
+  }
 import type {
   CompletionItemKind,
+  CompletionItem,
+              kind: 'markdown' as typeof MarkupKind.Markdown,
+  MarkupKind,
 import type {
+  CompletionItem,
+                state.version,
+  MarkupKind,
 import type {
+  CompletionItemKind,
   CompletionItemKind,
+  TextDocument,
+  CompletionItem,
 import { getColor, getColorFromValue } from './util/color'
-  CompletionItemKind,
 import { State } from './util/state'
+  TextDocument,
   Range,
   CompletionItemKind,
+  Position,
+  MarkupKind,
 import type {
-  CompletionItem,
+  Range,
   CompletionItemKind,
-import { findLast } from './util/find'
+  CompletionItem,
   CompletionItemKind,
-import { stringifyConfigValue, stringifyCss } from './util/stringify'
   CompletionItemKind,
-import { stringifyScreen, Screen } from './util/screens'
+  MarkupKind,
 import type {
+  MarkupKind,
+  CompletionItemKind,
+  MarkupKind,
+  CompletionItemKind,
+  CompletionList,
+              )})`,
   CompletionItem,
+import { getColor, getColorFromValue } from './util/color'
 import type {
-  TextDocument,
+import { getColor, getColorFromValue } from './util/color'
     ].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 638a10eff3df0bbe38975ff2d344f76744865093..9081210914110c3ab3380d87b73ca734ccd836ed 100644
--- a/packages/tailwindcss-language-service/src/diagnostics/getInvalidTailwindDirectiveDiagnostics.ts
+++ b/packages/tailwindcss-language-service/src/diagnostics/getInvalidTailwindDirectiveDiagnostics.ts
@@ -34,7 +34,7 @@
     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 @@       if (valid.includes(match.groups.value)) {
         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) {