Tailwind CSS V4.1 having issue with VS code auto-complete suggestion for my Vite React project [duplicate]

I see you're using the official TailwindCSS IntelliSense extension. By default, the extension only provides hints inside class="..." and className="..." attributes. However, this can be extended with additional attributes, functions, or even custom regex syntax.

• Tailwind CSS autocomplete in VSCode for twrnc package - StackOverflow

Note: The example below is specifically tailored for the twrnc package, but of course, you can customize it for any of your own functions or attributes.

From TailwindCSS IntelliSense v0.14.10

For the TailwindCSS IntelliSense to work within the tw function added by twrnc, you need to add the function name to tailwindCSS.classFunctions, like this:

{
  "tailwindCSS.classFunctions": ["tw", "tw.style"]
}

• PR #1258: Add tailwindCSS.classFunctions setting
• Avaliable from v0.14.10 (2025-03-20)

Note: This only replaces classRegex; however, using classAttributes alongside it is still recommended.

This enables autocomplete in the tw("...") and tw.style("...") functions without using regex.

Until TailwindCSS IntelliSense v0.14.9

However, if you want it to work in the style attribute within an HTML structure, you need to add the following alongside the default class and className:

{
  "tailwindCSS.classAttributes": [
    // ...
    "style"
  ],
}

Additionally, you can use the classRegex expression you mentioned to declare the hint to be requested when calling the function, based on twrnc's recommendation:

{
  "tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)",
    ["tw.style\\(([^)]*)\\)", "'([^']*)'"]
  ]
}

• twrnc's settings for TailwindCSS IntelliSense v0.14.9

The first enables autocomplete inside the style="..." attribute, and the second one is an older expression for enabling it within tw("...") and tw.style("...") functions as well.