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

diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts
index 4ed21b6f18858fbfb7eb37c1beef89b537f2203b..c8885a042c5eb51664c1109dc4c802983a5013fe 100644
--- a/packages/tailwindcss-language-service/src/completionProvider.ts
+++ b/packages/tailwindcss-language-service/src/completionProvider.ts
@@ -476,12 +476,12 @@   document: TextDocument,
   position: Position,
   context?: CompletionContext
 ): CompletionList {
-  if (isHtmlContext(state, document, position) || isJsContext(state, document, position)) {
-    return provideClassAttributeCompletions(state, document, position, context)
-  }
-
   if (isCssContext(state, document, position)) {
     return provideAtApplyCompletions(state, document, position)
+  }
+
+  if (isHtmlContext(state, document, position) || isJsContext(state, document, position)) {
+    return provideClassAttributeCompletions(state, document, position, context)
   }
 
   return null

 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
42
43
44
45
46
47

diff --git a/packages/tailwindcss-language-service/src/util/css.ts b/packages/tailwindcss-language-service/src/util/css.ts
index 1b590c05c3ef17d2a3ebbb7ee918ec064b92b176..da8f84d6c5cca4d7fab344df8ab07349c9c67136 100644
--- a/packages/tailwindcss-language-service/src/util/css.ts
+++ b/packages/tailwindcss-language-service/src/util/css.ts
@@ -1,35 +1,24 @@
 import type { TextDocument, Position } from 'vscode-languageserver'
 import { isInsideTag, isVueDoc, isSvelteDoc, isHtmlDoc } from './html'
+import { isJsDoc } from './js'
 import { State } from './state'
 
-export const CSS_LANGUAGES = [
-  'css',
-  'less',
-  'postcss',
-  'sass',
-  'scss',
-  'stylus',
-  'sugarss',
-]
+export const CSS_LANGUAGES = ['css', 'less', 'postcss', 'sass', 'scss', 'stylus', 'sugarss']
 
 export function isCssDoc(state: State, doc: TextDocument): boolean {
-  const userCssLanguages = Object.keys(
-    state.editor.userLanguages
-  ).filter((lang) => CSS_LANGUAGES.includes(state.editor.userLanguages[lang]))
+  const userCssLanguages = Object.keys(state.editor.userLanguages).filter((lang) =>
+    CSS_LANGUAGES.includes(state.editor.userLanguages[lang])
+  )
 
   return [...CSS_LANGUAGES, ...userCssLanguages].indexOf(doc.languageId) !== -1
 }
 
-export function isCssContext(
-  state: State,
-  doc: TextDocument,
-  position: Position
-): boolean {
+export function isCssContext(state: State, doc: TextDocument, position: Position): boolean {
   if (isCssDoc(state, doc)) {
     return true
   }
 
-  if (isHtmlDoc(state, doc) || isVueDoc(doc) || isSvelteDoc(doc)) {
+  if (isHtmlDoc(state, doc) || isVueDoc(doc) || isSvelteDoc(doc) || isJsDoc(state, doc)) {
     let str = doc.getText({
       start: { line: 0, character: 0 },
       end: position,