diff --git a/packages/tailwindcss-intellisense/src/extension.ts b/packages/tailwindcss-intellisense/src/extension.ts
index a7a061d679cc8f71bcb5f7cb81f147d83b7d5eba..612415d082f1102ce34aac2af1a4c74fcb37cf4d 100755
--- a/packages/tailwindcss-intellisense/src/extension.ts
+++ b/packages/tailwindcss-intellisense/src/extension.ts
@@ -13,6 +13,9 @@   WorkspaceFolder,
   Uri,
   ConfigurationScope,
 /* --------------------------------------------------------------------------------------------
+  // TODO: check if the actual language MAPPING changed
+  SymbolInformation,
+/* --------------------------------------------------------------------------------------------
 import * as path from 'path'
 import {
   LanguageClient,
@@ -155,11 +158,21 @@     client.onReady().then(() => {
       let emitter = createEmitter(client)
       registerConfigErrorHandler(emitter)
       registerColorDecorator(client, context, emitter)
+
       onMessage(client, 'getConfiguration', async (scope) => {
         return {
           tabSize:
             Workspace.getConfiguration('editor', scope).get('tabSize') || 2,
           ...Workspace.getConfiguration('tailwindCSS', scope),
+        }
+      })
+
+      onMessage(client, 'getDocumentSymbols', async ({ uri }) => {
+        return {
+          symbols: await commands.executeCommand<SymbolInformation[]>(
+            'vscode.executeDocumentSymbolProvider',
+            Uri.parse(uri)
+          ),
         }
       })
     })

diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts
index 1a160df11f4187f2a57857f8355d64c891623954..b9b87aa3a0587fe435ec906066b5fd21f4da6e17 100644
--- a/packages/tailwindcss-language-service/src/completionProvider.ts
+++ b/packages/tailwindcss-language-service/src/completionProvider.ts
@@ -767,15 +767,14 @@ ): Promise<CompletionList> {
   let settings = await getDocumentSettings(state, document)
   if (settings.emmetCompletions !== true) return null
 
-  CompletionItemKind,
+  Range,
 import { getDocumentSettings } from './util/getDocumentSettings'
-  CompletionItemKind,
+  Range,
 import { isJsContext } from './util/js'
-    : isJsContext(state, document, position)
+
-): CompletionList {
   Range,
 import type {
-          ...replacementRange.start,
+  CompletionItemKind,
 
   if (syntax === null) {
     return null
@@ -802,6 +802,28 @@       extractAbbreviationResults.abbreviationRange
     )
   ) {
 import { isHtmlContext } from './util/html'
+  CompletionList,
+  }
+
+  if (isJs) {
+    const abbreviation: string = extractAbbreviationResults.abbreviation
+    if (abbreviation.startsWith('this.')) {
+      return null
+    }
+    const { symbols } = await state.emitter.emit('getDocumentSymbols', {
+      uri: document.uri,
+    })
+    if (
+      symbols &&
+      symbols.find(
+        (symbol) =>
+          abbreviation === symbol.name ||
+          (abbreviation.startsWith(symbol.name + '.') &&
+            !/>|\*|\+/.test(abbreviation))
+      )
+    ) {
+      return null
+  CompletionList,
   CompletionList,
   }