tailwindcss-intellisense does not suggest custom components classes for tailwindcss v4

[jabed-web-dev]

tailwindcss-intellisense Installation
Identifier: bradlc.vscode-tailwindcss
Version: 0.14.3
Last Updated: 2025-02-09, 21:43:44

"dependencies": {
    "@tailwindcss/vite": "^4.0.5",
    "tailwindcss": "^4.0.5"
}

@import "tailwindcss";

@layer components {
  .card {
    background-color: var(--color-white);
    border-radius: var(--rounded-lg);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-xl);
  }
}

[thecrypticace]

Hi! In v4 we are no longer hijacking CSS's native @layer directive. (We're actually making use of native CSS layers in v4).

Because of this these are not utilities — its just raw CSS.

You should instead write the above like this:

@import "tailwindcss";

@utility card {
  background-color: var(--color-white);
  border-radius: var(--rounded-lg);
  padding: var(--spacing-6);
  box-shadow: var(--shadow-xl);
}

I think we forgot to mention this in the upgrade guide — I'll get that updated today or tomorrow 👍

[jabed-web-dev]

When I use the @utility card {} syntax, it appears in the @layer utilities, not the @layer components.

[thecrypticace]

@jabed-web-dev That is indeed the case and is intentional. The "components" layer is defined in v4 but is purely for use by user CSS.. Utilities with multiple properties are sorted earlier than those with fewer properties so it should function the same.

Our update tool for going from v3 -> v4 converts both @layer components and @layer utilities to @utility. Additionally, in v4, addComponents also mimics how @utility works.

[Kcko]

@jabed-web-dev That is indeed the case and is intentional. The "components" layer is defined in v4 but is purely for use by user CSS.. Utilities with multiple properties are sorted earlier than those with fewer properties so it should function the same.

Our update tool for going from v3 -> v4 converts both @layer components and @layer utilities to @utility. Additionally, in v4, addComponents also mimics how @utility works.

the documentation indicates the classification under the component (https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes)

On the other hand, it is interesting that the components layer is completely missing among the default functions (https://tailwindcss.com/docs/functions-and-directives)

I'm really confused.

But in v3 @utilities was after @components.

Your plugin is great, I can't imagine coding without it, but the suggestion of custom "classes/components" is really missing for me. (I'm currently on V3 and will be moving to V4)