What version of VS Code are you using?

1.106.3

What version of Tailwind CSS IntelliSense are you using?

0.14.29

What version of Tailwind CSS are you using?

4.1.17

What package manager are you using?

bun

What operating system are you using?

macOS, Windows

Tailwind CSS Stylesheet (v4) or config file (v3)

@import "tailwindcss";

VS Code settings

{
"tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass",
    "class:list",
    "AdditionalClasses",
    "AdditionalCssClasses"
  ],
  "tailwindCSS.experimental.classRegex": [
    ["@\\(([^)]*)\\)", "[\"'`]([^\"'`]+).*?[\"'`]"]
  ],
  "tailwindCSS.experimental.configFile": null
}

Reproduction URL

https://github.com/alexaka1/repro-tailwind-lsp-1506

Describe your issue

The LSP (eg. when hovering with cursor) says that data-hovered=true:text-red-500 will become

.data-hovered\=true\:text-red-500 {
    &[data-hovered="true"] {
        color: var(--color-red-500) /* oklch(63.7% 0.237 25.331) = #fb2c36 */;
    }
}

However this is not true, and is invalid tailwind. The correct syntax is data-[hovered=true]:text-red-500, which the LSP says:

.data-\[hovered\=true\]\:text-red-500 {
    &[data-hovered="true"] {
        color: var(--color-red-500) /* oklch(63.7% 0.237 25.331) = #fb2c36 */;
    }
}

See the reproduction link's App.tsx file. The counter button has red background, but the paragraph below does not.