Tailwind CSS class detection false positives in TSX files

[Nicolapps]

What version of VS Code are you using?

Cursor 1.0.0 (based on VS Code 1.96.2)

What version of Tailwind CSS IntelliSense are you using?

For example: v0.7.0

What version of Tailwind CSS are you using?

4.0.14

What package manager are you using?

npm

What operating system are you using?

macOS 15.5

Tailwind config

@import "tailwindcss";

This bug happens with default Tailwind CSS settings.

VS Code settings

{}

This bug happens with default VS Code settings.

Reproduction URL

https://github.com/Nicolapps/repro-tailwindcss-intellisense-static/blob/main/src/repro.tsx

Describe your issue

The following patterns are mistakenly detected as Tailwind CSS classnames:

• the static JavaScript keyword
• JavaScript variables names where declared
• TypeScript type and interface names (both when declared and used)

[thecrypticace]

You did not include your VSCode settings but this is likely a problem with your custom class regex. You should use the array form of patterns where it defines separate "container" and "class list" patterns. See my comment here #1174 (comment) about a similar issue where things were being picked up / detected when they shouldn't be and how to solve it.

[Nicolapps]

Hi @thecrypticace,

Thank you for your reply. My issue can be reproduced without any custom settings (I specifically set my VS Code settings to {} to verify that the issue isn’t caused by custom settings I have). In particular, I’m not using tailwindCSS.experimental.classRegex.

[thecrypticace]

@Nicolapps ooh I just noticed the /* layer: default */ comment. We don't have those. My guess is that hover isn't coming from IntelliSense at all. This is probably another extension you have installed picking up compiled CSS.

[Nicolapps]

@thecrypticace Oops, you’re right! I ran an extension bisect and it turns out that the issue is caused by the UnoCSS VS Code extension.