1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

diff --git a/packages/tailwindcss-language-service/src/codeActions/provideInvalidApplyCodeActions.ts b/packages/tailwindcss-language-service/src/codeActions/provideInvalidApplyCodeActions.ts
index 7e08d13841b2d67a84b5e6a12b9b2b93678fecd3..78cadb0e5db9df901c297fb4888c736d31978696 100644
--- a/packages/tailwindcss-language-service/src/codeActions/provideInvalidApplyCodeActions.ts
+++ b/packages/tailwindcss-language-service/src/codeActions/provideInvalidApplyCodeActions.ts
@@ -176,16 +176,13 @@   if (Array.isArray(meta)) return null
   let context = meta.context
   let pseudo = meta.pseudo
   const globalContexts = state.classNames.context
-  let screens = dlv(state.config, 'theme.screens', dlv(state.config, 'screens', {}))
-  if (!isObject(screens)) screens = {}
-  screens = Object.keys(screens)
   const path = []
 
   for (let i = 0; i < classNameParts.length - 1; i++) {
     let part = classNameParts[i]
     let common = globalContexts[part]
     if (!common) return null
-    if (screens.includes(part)) {
+    if (state.screens.includes(part)) {
       path.push(`@screen ${part}`)
       context = context.filter((con) => !common.includes(con))
     }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts
index 10cfc37507cf59c78b8147612ca9e8be7c7f864f..103dba9ccf59d1827e58e5167beb03b236469b86 100644
--- a/packages/tailwindcss-language-service/src/completionProvider.ts
+++ b/packages/tailwindcss-language-service/src/completionProvider.ts
@@ -633,11 +633,17 @@   const parts = match.groups.partial.split(/\s*,\s*/)
 
   if (/\s+/.test(parts[parts.length - 1])) return null
 
+  let possibleVariants = Object.keys(state.variants)
   const existingVariants = parts.slice(0, parts.length - 1)
 
+  if (state.jit) {
+    possibleVariants.unshift('responsive')
+    possibleVariants = possibleVariants.filter((v) => !state.screens.includes(v))
+  }
+
   return {
     isIncomplete: false,
-    items: Object.keys(state.variants)
+    items: possibleVariants
       .filter((v) => existingVariants.indexOf(v) === -1)
       .map((variant, index) => ({
         // TODO: detail

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

diff --git a/packages/tailwindcss-language-service/src/diagnostics/getInvalidScreenDiagnostics.ts b/packages/tailwindcss-language-service/src/diagnostics/getInvalidScreenDiagnostics.ts
index c49c87151398bb55701bfce415e36486a3f64dd2..5bb1e137c27eec83bb07591037d679614514b25d 100644
--- a/packages/tailwindcss-language-service/src/diagnostics/getInvalidScreenDiagnostics.ts
+++ b/packages/tailwindcss-language-service/src/diagnostics/getInvalidScreenDiagnostics.ts
@@ -31,16 +31,14 @@   ranges.forEach((range) => {
     let text = document.getText(range)
     let matches = findAll(/(?:\s|^)@screen\s+(?<screen>[^\s{]+)/g, text)
 
-    let screens = Object.keys(dlv(state.config, 'theme.screens', dlv(state.config, 'screens', {})))
-
     matches.forEach((match) => {
-      if (screens.includes(match.groups.screen)) {
+      if (state.screens.includes(match.groups.screen)) {
         return null
       }
 
       let message = `The screen '${match.groups.screen}' does not exist in your theme config.`
       let suggestions: string[] = []
-      let suggestion = closest(match.groups.screen, screens)
+      let suggestion = closest(match.groups.screen, state.screens)
 
       if (suggestion) {
         suggestions.push(suggestion)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

diff --git a/packages/tailwindcss-language-service/src/diagnostics/getInvalidVariantDiagnostics.ts b/packages/tailwindcss-language-service/src/diagnostics/getInvalidVariantDiagnostics.ts
index b4191975a3730a7ed466964a3b27fcf002f9fc66..55cbce1903003ece7f8e54aae939e7fdd3856a8f 100644
--- a/packages/tailwindcss-language-service/src/diagnostics/getInvalidVariantDiagnostics.ts
+++ b/packages/tailwindcss-language-service/src/diagnostics/getInvalidVariantDiagnostics.ts
@@ -6,6 +6,7 @@ import { getLanguageBoundaries } from '../util/getLanguageBoundaries'
 import { findAll, indexToPosition } from '../util/find'
 import { closest } from '../util/closest'
 import { absoluteRange } from '../util/absoluteRange'
+import dlv from 'dlv'
 
 export function getInvalidVariantDiagnostics(
   state: State,
@@ -26,6 +27,12 @@     if (!boundaries) return []
     ranges.push(...boundaries.css)
   }
 
+  let possibleVariants = Object.keys(state.variants)
+  if (state.jit) {
+    possibleVariants.unshift('responsive')
+    possibleVariants = possibleVariants.filter((v) => !state.screens.includes(v))
+  }
+
   ranges.forEach((range) => {
     let text = document.getText(range)
     let matches = findAll(/(?:\s|^)@variants\s+(?<variants>[^{]+)/g, text)
@@ -36,13 +43,13 @@       let listStartIndex = match.index + match[0].length - match.groups.variants.length
 
       for (let i = 0; i < variants.length; i += 2) {
         let variant = variants[i].trim()
-        if (Object.keys(state.variants).includes(variant)) {
+        if (possibleVariants.includes(variant)) {
           continue
         }
 
         let message = `The variant '${variant}' does not exist.`
         let suggestions: string[] = []
-        let suggestion = closest(variant, Object.keys(state.variants))
+        let suggestion = closest(variant, possibleVariants)
 
         if (suggestion) {
           suggestions.push(suggestion)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

diff --git a/packages/tailwindcss-language-service/src/util/state.ts b/packages/tailwindcss-language-service/src/util/state.ts
index 826d50ee6e9e4a97439e98c8b153565416028c49..9d0b980f8c7e3b79c132eb79f88da3dd236e84a7 100644
--- a/packages/tailwindcss-language-service/src/util/state.ts
+++ b/packages/tailwindcss-language-service/src/util/state.ts
@@ -70,6 +70,7 @@   version?: string
   separator?: string
   dependencies?: string[]
   plugins?: any
+  screens?: string[]
   variants?: Record<string, string | null>
   modules?: {
     tailwindcss?: { version: string; module: any }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

diff --git a/src/server.ts b/src/server.ts
index 38cb29fc455c834c98e44fcc2abd4609581de604..1052baf850652f343025416c46cf2d91a810ff71 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -712,8 +712,10 @@     state.config = resolveConfig.module(config)
     state.separator = typeof userSeperator === 'string' ? userSeperator : ':'
     state.plugins = await getPlugins(config)
     state.classNames = (await extractClassNames(postcssResult.root)) as ClassNames
-
     state.variants = getVariants(state)
+
+    let screens = dlv(state.config, 'theme.screens', dlv(state.config, 'screens', {}))
+    state.screens = isObject(screens) ? Object.keys(screens) : []
 
     state.enabled = true