tailwind css intellisence suggestions

[Aditi2354]

i don't know why i am not getting tailwind css suggestions pls help me

[rozsazoltan]

These are custom TailwindCSS directives that CSS IDEs don't understand by default. For VSCode, use the official TailwindCSS IntelliSense extension.

• TailwindCSS IntelliSense - VSCode Marketplace

After that, tell VSCode that you want to treat your .css files as TailwindCSS. You can do this in the settings under files.associations like this:

{
  "files.associations": {
    "*.css": "tailwindcss",
    "*.scss": "tailwindcss",
  },
}

• Recommended VSCode settings for TailwindCSS IntelliSense - GitHub

• Tailwind CSS v4 - Unknown at rule @plugin, @custom-variant, @theme in global.css
• How to add a @tailwind CSS rule to CSS checker

By default, installation provides class hints inside class="..." and className="..." attributes. With files.associations configured, the extension automatically detects deprecated and valid TailwindCSS directives. You can also declare custom locations where TailwindCSS class hints are needed. The following options can help with this (assuming you need them for functions like tailwind-merge or clsx, based on the limited context):

As others mentioned, for displaying hints when passing parameters in functions, up until v0.14.9, could only reference them using regex by classRegex. However, from v0.14.10 onward, this was extended with a simpler classFunctions setting.

From TailwindCSS IntelliSense v0.14.10

{
  "tailwindCSS.classFunctions": ["cntl"]
}

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

• Displaying color boxes next to the TailwindCSS class names indicating the color, anywhere such as in class or className attributes
• How can I enable TailwindCSS IntelliSense outside of "className"?