What version of VS Code are you using?

v1.100.0

What version of Tailwind CSS IntelliSense are you using?

0.14.16

What version of Tailwind CSS are you using?

3.4.17 currently - but I experience this issue in other projects using v4 as well

What package manager are you using?

npm

What operating system are you using?

Arch Linux

Tailwind config

import { type Config } from "tailwindcss/types/config";
import { fontFamily } from "tailwindcss/defaultTheme";
export default {
 darkMode: ["class"],
 content: ["./src/**/*.tsx"],
 theme: {
 extend: {
 fontFamily: {
 sans: ["var(--font-sans)", ...fontFamily.sans],
 },
 colors: {
 // ...
 },
 },
 },
 plugins: [require("tailwindcss-animate")],
} satisfies Config;

VS Code settings

{
"tailwindCSS.experimental.classRegex": [
 ["cva\\(((?:[^()]|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
 ["cn\\(((?:[^()]|\\([^()]*\\))*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
 ],
 "tailwindCSS.emmetCompletions": true,
}

Describe your issue

Install the extension with the settings above and open any typescript project. The completions are provided on typescript object properties:

Image

I've been having this issue for years now. The only thing that works is setting "tailwindCSS.emmetCompletions": false in settings JSON. If this can't be fixed I would suggest at least documenting this limitation.

This is the same issue as #228, which was closed but is still not fixed.