TailwindCSS IntelliSense shows suggestions for any string after using the experimental classRegex

[onyedikachi23]

What version of VS Code are you using?

Version: 1.95.2
OS: Linux x64 6.8.0-48-generic

What version of Tailwind CSS IntelliSense are you using?

v0.12.12

What version of Tailwind CSS are you using?

[email protected]
│ └── [email protected] deduped
└── [email protected]

What package manager are you using?

npm

What operating system are you using?

Ubuntu 24.04 LTS

Tailwind config

{
	"tailwindCSS.includeLanguages": {
		"plaintext": "html",
		"html": "html",
		"javascript": "javascript",
		"javascriptreact": "javascriptreact",
		"typescript": "typescript",
		"typescriptreact": "typescriptreact",
		"css": "css"
	},
	"tailwindCSS.classAttributes": [
		"class",
		"className",
		"ngClass",
		".*Styles.*"
	],
	"tailwindCSS.experimental.classRegex": [
		["Styles\\s*\\=\\s*([^;]*);", "'([^']*)'"],
		["Styles\\s*\\=\\s*([^;]*);", "\"([^\"]*)\""],
		["Styles\\s*\\=\\s*([^;]*);", "\\`([^\\`]*)\\`"]
	],
}

VS Code settings

{
	"workbench.tree.renderIndentGuides": "always",
	"workbench.tree.indent": 4,
	"editor.fontSize": 16,
	"security.workspace.trust.untrustedFiles": "open",
	"editor.wordWrap": "on",
	"explorer.confirmDragAndDrop": true,
	"editor.formatOnPaste": true,
	"editor.formatOnType": true,
	"editor.minimap.enabled": true,
	"prettier.endOfLine": "auto",
	"prettier.bracketSameLine": true,
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"[typescript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[typescriptreact]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"prettier.useTabs": true,
	"highlight-matching-tag.styles": {
		"opening": {
			"left": {
				"custom": {
					"borderWidth": "0 0 0 3px",
					"borderStyle": "solid",
					"borderColor": "yellow",
					"borderRadius": "5px",
					"overviewRulerColor": "white"
				}
			},
			"right": {
				"custom": {
					"borderWidth": "0 3px 0 0",
					"borderStyle": "solid",
					"borderColor": "yellow",
					"borderRadius": "5px",
					"overviewRulerColor": "white"
				}
			}
		}
	},
	"prettier.enableDebugLogs": true,
	"prettier.htmlWhitespaceSensitivity": "strict",
	"prettier.insertPragma": true,
	"prettier.tabWidth": 4,
	"prettier.vueIndentScriptAndStyle": true,
	"html.format.enable": true,
	"html.format.indentHandlebars": true,
	"html.format.indentInnerHtml": true,

	"explorer.confirmDelete": false,
	"editor.quickSuggestionsDelay": 0,
	"tailwindCSS.emmetCompletions": true,
	"[markdown]": {
		"editor.quickSuggestions": {
			"other": true,
			"comments": true,
			"strings": true
		},
		"editor.wordBasedSuggestions": "matchingDocuments",
		"editor.snippetSuggestions": "top",
		"editor.acceptSuggestionOnEnter": "on",
		"editor.acceptSuggestionOnCommitCharacter": true,
		"editor.parameterHints.enabled": true,
		"editor.quickSuggestionsDelay": 10,
		"editor.suggestSelection": "first"
	},
	"editor.suggestSelection": "first",
	"editor.parameterHints.enabled": true,
	"editor.acceptSuggestionOnCommitCharacter": true,
	"editor.snippetSuggestions": "top",
	"editor.quickSuggestions": {
		"other": true,
		"comments": true,
		"strings": true
	},
	"editor.acceptSuggestionOnEnter": "on",
	"tailwindCSS.includeLanguages": {
		"plaintext": "html",
		"html": "html",
		"javascript": "javascript",
		"javascriptreact": "javascriptreact",
		"typescript": "typescript",
		"typescriptreact": "typescriptreact",
		"css": "css"
	},
	"tailwindCSS.classAttributes": [
		"class",
		"className",
		"ngClass",
		".*Styles.*"
	],
	"tailwindCSS.experimental.classRegex": [
		["Styles\\s*\\=\\s*([^;]*);", "'([^']*)'"],
		["Styles\\s*\\=\\s*([^;]*);", "\"([^\"]*)\""],
		["Styles\\s*\\=\\s*([^;]*);", "\\`([^\\`]*)\\`"]
	],
	"emmet.showAbbreviationSuggestions": true,
	"emmet.includeLanguages": {
		"javascript": "javascriptreact"
	},
	"emmet.triggerExpansionOnTab": true,
	"emmet.useInlineCompletions": true,
	"emmet.showExpandedAbbreviation": "always",
	"dictCompletion.leastNumOfChars": 0,
	"dictCompletion.useExternalUserDictFile": true,
	"dictCompletion.programmingLanguage": true,
	"files.autoSave": "onFocusChange",
	"git.confirmSync": false,
	"git.enableSmartCommit": true,
	"tabnine.experimentalAutoImports": true,
	"eslint.format.enable": true,
	"eslint.codeActionsOnSave.mode": "all",
	"redhat.telemetry.enabled": true,
	"editor.autoClosingBrackets": "always",
	"liveServer.settings.donotVerifyTags": true,
	"editor.formatOnSave": true,
	"editor.codeActionsOnSave": {
		"source.fixAll": "explicit",
		"source.organizeImports": "explicit"
	},
	"workbench.preferredHighContrastColorTheme": "Default Dark Modern",
	"liveServer.settings.CustomBrowser": "firefox",
	"terminal.integrated.env.linux": {},
	"console-ninja.featureSet": "Community",
	"workbench.externalBrowser": "firefox",
	"workbench.tree.stickyScrollMaxItemCount": 10,
	"explorer.compactFolders": false,
	"javascript.updateImportsOnFileMove.enabled": "always",
	"javascript.experimental.updateImportsOnPaste": true,
	"typescript.experimental.updateImportsOnPaste": true,
	"typescript.updateImportsOnFileMove.enabled": "always",
	"markdown.updateLinksOnFileMove.enabled": "always",

	// to enable folding of long nested contents in code
	"editor.folding": true,
	"editor.foldingStrategy": "indentation",
	"editor.foldingImportsByDefault": true,
	"editor.foldLevel": 1,
	"prettier.prettierPath": "/home/onyedikachi23/.npm-global/lib/node_modules/prettier",
	"reactSnippets.settings.prettierEnabled": true,
	"markdown-preview-github-styles.colorTheme": "dark",
	"window.zoomLevel": -0.9,
	"gitlens.gitCommands.skipConfirmations": [
		"fetch:command",
		"stash-push:command",
		"switch:command"
	]
}

Reproduction URL

Can't provide at the moment, but I'm working on a Vite + React + TypeScript project with TailwindCSS for styling. See below for more info 👇

Describe your issue

I was trying to make the IntelliSense show suggestions for variable names outside the className prop. So, I got a solution from this answer on StackOverflow: How can I enable tailwind intelliSense outside of "className"?.

However, typing any string specifiers (double and single quotes and template literals) - "", '', ` ` , starts poping tailwind class names. This is a headache because it blocks suggestions I actually need to see at the moment, and it could slow down suggestions popup on larger codebase.

[akomm]

Might be the issue is outside of classRegex. If you type foo.bar.| it will propose utility classes. It seems to be triggered by dot (.). Probably assumes that its in class context (.foo) and proposes utility classes after that.

issue-demo.webm

[onyedikachi23]

Yeah and it also happens for whenever you try to enter a string value by "string", or template literal ``.

[thecrypticace]

Might be the issue is outside of classRegex. If you type foo.bar.| it will propose utility classes.

😱 wow. Issue seems to disappear once you have a function in the file but this is still bizarre. Gonna look into this tomorrow.

---

@onyedikachi23 I cannot reproduce this. Can you provide an example of a file you see this in? I took the settings you gave and put them in a project and I am not seeing any issues here:

Screen.Recording.2025-02-11.at.20.12.45.mov

[akomm]

@thecrypticace

Thank you.

I'm sure I had this more than in just plain files (without a function). But I don't recall where. When I hit such a case I can give an example.

[thecrypticace]

Ah right, it's for emmet support 🤦‍♂

Probably shouldn't suggest them tho if emmet is disabled in JS/TS/JSX/TSX files. Will look at doing that.

[akomm]

Does the plugin not work on AST-Basis? Then the context should be clear where its appropriate or not to provide the suggest.

Emmet does not seem to work in the context. I can not expand what is proposed by the suggestion. It does not seem to depend on functions in my case:

tw-plugin-bug.webm

[thecrypticace]

Does the plugin not work on AST-Basis?

No, it does not. The language server protocol is entirely driven by text documents. It doesn't have the concept of an AST at all. So its up to each language server to parse text however it sees fit.

Working on a purely AST basis would mean that we'd have to implement and/or bundle separate parsers for every language we support. We technically do a very limited form of lexing to look for interesting tokens turn that into "language boundaries" that identify what language is active at a given point in the document but that's about it.

I do have plans to improve this somewhat but the general idea won't change.

Emmet does not seem to work in the context.

This was the point of my second sentence. You can actually enable emmet in that context in your VSCode settings (its not by default) but if it's not enabled (assuming we can detect this) we should disable these suggestions.