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
@@ -12,6 +12,8 @@   OutputChannel,
   WorkspaceFolder,
   Uri,
   ConfigurationScope,
+  commands,
+  SymbolInformation,
 } from 'vscode'
 import {
   LanguageClient,
@@ -154,11 +156,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,11 +767,10 @@ ): Promise<CompletionList> {
   let settings = await getDocumentSettings(state, document)
   if (settings.emmetCompletions !== true) return null
 
-  const syntax = isHtmlContext(state, document, position)
-    ? 'html'
-    : isJsContext(state, document, position)
-    ? 'jsx'
-    : null
+  const isHtml = isHtmlContext(state, document, position)
+  const isJs = !isHtml && isJsContext(state, document, position)
+
+  const syntax = isHtml ? 'html' : isJs ? 'jsx' : null
 
   if (syntax === null) {
     return null
@@ -799,6 +798,27 @@       extractAbbreviationResults.abbreviationRange
     )
   ) {
     return null
+  }
+
+  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
+    }
   }
 
   const emmetItems = emmetHelper.doComplete(document, position, syntax, {})