Intellisense for custom styles (@layer) not working

[kisenaa]

What version of VS Code are you using?

v1.101.2

What version of Tailwind CSS IntelliSense are you using?

v0.14.23

What version of Tailwind CSS are you using?

v4.1.11

What package manager are you using?

bun

What operating system are you using?

Windows 11

Tailwind CSS Stylesheet (v4) or config file (v3)
V4

index.css :

@import "tailwindcss";

/* Add your custom component styles inside the @layer components block */
@layer components {
  .testing {
    background-color: wheat;
  }
}

@utility content-autos {
  content-visibility: auto;
}

.primary-container {
  animation: primary-container 1s ease-in-out;
}

VS Code settings

  "tailwindCSS.experimental.configFile": "./src/index.css",
  "tailwindcss-intellisense.trace.server": "messages",
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  }

Describe your issue
Tailwind logs :

Locating server…
Booting server...
[Trace - 12:20:06 PM] Sending request 'initialize - (0)'.
[Trace - 12:20:06 PM] Received notification 'window/logMessage'.
Setting up server…
[Trace - 12:20:07 PM] Received notification 'window/logMessage'.
Listening for messages…
[Trace - 12:20:07 PM] Received response 'initialize - (0)' in 533ms.
[Trace - 12:20:07 PM] Sending notification 'initialized'.
[Trace - 12:20:07 PM] Sending notification 'textDocument/didOpen'.
[Trace - 12:20:07 PM] Received request 'workspace/configuration - (0)'.
[Trace - 12:20:07 PM] Sending response 'workspace/configuration - (0)'. Processing request took 1ms
[Trace - 12:20:07 PM] Received request 'workspace/configuration - (1)'.
[Trace - 12:20:07 PM] Sending response 'workspace/configuration - (1)'. Processing request took 0ms
[Trace - 12:20:07 PM] Received request 'workspace/configuration - (2)'.
[Trace - 12:20:07 PM] Sending response 'workspace/configuration - (2)'. Processing request took 0ms
[Trace - 12:20:07 PM] Received request 'workspace/configuration - (3)'.
[Trace - 12:20:07 PM] Sending response 'workspace/configuration - (3)'. Processing request took 0ms
[Trace - 12:20:07 PM] Received notification 'window/logMessage'.
Loading Tailwind CSS projects from the workspace settings.
[Trace - 12:20:07 PM] Received notification 'window/logMessage'.
[Global] Creating projects: [{"folder":"d:\\Dev\\Personal Portofolio\\portofolio","config":"D:/Dev/Personal Portofolio/portofolio/src/index.css","selectors":[{"priority":0,"pattern":"D:/Dev/Personal Portofolio/portofolio/**"}],"user":true,"tailwind":{"version":"4.1.11","features":["css-at-theme","layer:base","content-list","source-inline","source-not"],"isDefaultVersion":false}}]
[Trace - 12:20:07 PM] Received request 'client/registerCapability - (4)'.
[Trace - 12:20:07 PM] Sending response 'client/registerCapability - (4)'. Processing request took 1ms
[Trace - 12:20:07 PM] Received notification 'window/logMessage'.
[Global] Preparing projects...
[Trace - 12:20:07 PM] Received notification 'window/logMessage'.
[Global] Initializing projects...
[Trace - 12:20:07 PM] Received notification 'window/logMessage'.
[src\index.css] Initializing...
[Trace - 12:20:07 PM] Received notification 'window/logMessage'.
[Global] Adding watch patterns: D:/Dev/Personal Portofolio/portofolio/src/index.css, D:/Dev/Personal Portofolio/portofolio/src, D:/Dev/Personal Portofolio/portofolio, D:/Dev/Personal Portofolio, D:/Dev, D:/
[Trace - 12:20:07 PM] Received request 'client/registerCapability - (5)'.
[Trace - 12:20:07 PM] Sending response 'client/registerCapability - (5)'. Processing request took 0ms
[Trace - 12:20:07 PM] Received notification 'window/logMessage'.
[src\index.css] supported features: ["css-at-theme","layer:base","content-list","source-inline","source-not"]
[Trace - 12:20:07 PM] Received notification 'window/logMessage'.
[src\index.css] Loaded tailwindcss v4.1.11: d:\Dev\Personal Portofolio\portofolio\node_modules\tailwindcss
[Trace - 12:20:07 PM] Received notification 'window/logMessage'.
[src\index.css] Building...
[Trace - 12:20:07 PM] Received notification 'window/logMessage'.
[Global] Adding watch patterns: d:\Dev\Personal Portofolio\portofolio\node_modules\tailwindcss\index.css
[Trace - 12:20:07 PM] Received request 'client/registerCapability - (6)'.
[Trace - 12:20:07 PM] Sending response 'client/registerCapability - (6)'. Processing request took 0ms
[Trace - 12:20:07 PM] Received request 'workspace/configuration - (7)'.
[Trace - 12:20:07 PM] Sending response 'workspace/configuration - (7)'. Processing request took 1ms
[Trace - 12:20:07 PM] Received request 'workspace/configuration - (8)'.
[Trace - 12:20:07 PM] Sending response 'workspace/configuration - (8)'. Processing request took 0ms
[Trace - 12:20:07 PM] Received request 'client/registerCapability - (9)'.
[Trace - 12:20:07 PM] Sending response 'client/registerCapability - (9)'. Processing request took 1ms
[Trace - 12:20:07 PM] Received notification '@/tailwindCSS/projectInitialized'.
[Trace - 12:20:07 PM] Sending request '@/tailwindCSS/getProject - (1)'.
[Trace - 12:20:07 PM] Received noti

I have a few questions regarding IntelliSense behavior in VSCode

1. @layer components styles not detected in .tsx files

Why don't autocomplete and hover IntelliSense work in .tsx files for custom styles defined inside @layer components { ... }?

2. No autocomplete for CSS variables in @utility blocks

When writing custom utilities using the @utility directive in .css files, there's no autocomplete or IntelliSense for CSS variable names.
However, in .tsx files, The tailwind css variable names do get autocompleted and can be hovered correctly.

Is this a limitation or expected behavior?

3. No IntelliSense for regular CSS classes in .tsx

Regular CSS classes (e.g., .primary-container) defined in .css files don't show up in autocomplete inside .tsx files.

Are these behaviors expected, or possibly bugs?

Than you

[thecrypticace]

1. @layer components styles not detected in .tsx files

Duplicate of #1247

tl;dr is that in v4 @layer components isn't "special" like it was in v3. In v4 you use @utility to define utilities which is what IntelliSense suggests.

2. No autocomplete for CSS variables in @utility blocks

Ah, like inside var(…). Yeah this could be improved. The CSS language server that provides those completions doesn't "know" what variables are available. I'll look into this.

Is this a limitation or expected behavior?

3. No IntelliSense for regular CSS classes in .tsx

This is expected. IntelliSense has only ever suggested actual utilities. We've discussed adding this feature though but it's very low priority.