Description
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:
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.