Tailwind CSS IntelliSense not work with tailwindcss4.0

[527430408]

What version of VS Code are you using?

For example: v1.97.2

What version of Tailwind CSS IntelliSense are you using?

For example: v0.14.8

What version of Tailwind CSS are you using?

For example: v4.0.9

What package manager are you using?

For example: npm

What operating system are you using?

For example: macOS

Tailwind config

vite.config.js

export default defineConfig({
  plugins: [
    tailwindcss(),
 ]
})

VS Code settings

"tailwindCSS.emmetCompletions": true,
    "tailwindcss.documentColors": true,
    "tailwindcss.colorDecorators": "on",
    "tailwindcss.hoverColorHint": "rgb",
    "tailwindcss.diagnostics": {
        "enabled": true,
        "emptyChecking": true
    }

Reproduction URL

A public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.

Describe your issue
My project used tailwind3.0,Tailwind CSS IntelliSense is working.
I upgraded the Tailwind CSS version to 4.0.It's working.
Bug Tailwind CSS IntelliSense is does not working.

[527430408]

[Kcko]

Same for me, absolutely without any suggestion. (Im on testing project with Tailwind CLI without any JS).

Short video: https://is.gd/NdKORW

[Kcko]

Temporary solution. #1153 (comment)

You don't need to create tailwind.config.js (it's useless - TW4 doesn't work with it anymore).

Just reload the window -> ctrl + shift + P > Reload window

Short video: -> https://is.gd/fxEzNm

[Kcko]

But reload does not solve everything -> https://is.gd/dAHXZo
A bit of a disappointment, not much to work with :(

[lihanspace]

I am using postcss and @tailwindcss/postcss.

src/assets/styles/tailwind.css

@import "element-plus/dist/index.css";
@import "tailwindcss/theme.css";
@import "./reset.css";
@import "./variables.css";
@import "./globals.scss";
@import "./element-plus-custom.scss";

body.body {
  @import "tailwindcss/utilities.css";
}

src/assets/styles/element-plus-custom.scss

Tailwind CSS IntelliSense not work

.el-form--inline {
  .el-form-item {
    // .el-form-item__content {
    //   width: var(--el-form-inline-content-width);
    // }
    .el-input, .el-cascader, .el-select, .el-autocomplete {
      width: var(--el-form-inline-content-width);
    }
  }
}
.el-button.is-link + .el-button.is-link {
  margin-left: 4px;
}

Tailwind CSS IntelliSense work

.el-form--inline {
  .el-form-item {
    /* .el-form-item__content {
      width: var(--el-form-inline-content-width);
    } */
    .el-input, .el-cascader, .el-select, .el-autocomplete {
      width: var(--el-form-inline-content-width);
    }
  }
}
.el-button.is-link + .el-button.is-link {
  margin-left: 4px;
}

[thecrypticace]

@lihanspace See this comment about preprocessors: #1154 (comment)

[thecrypticace]

@Kcko Best I can tell from your video you're expecting to see a suggestion for --spacing(…). We don't currently have that but we should. I've made a note to add that as well a suggestion for --alpha(…).

[thecrypticace]

@527430408 Can you please provide a reproduction?

[Kcko]

@Kcko Best I can tell from your video you're expecting to see a suggestion for --spacing(…). We don't currently have that but we should. I've made a note to add that as well a suggestion for --alpha(…).

Great to hear it! thx for ur work. But what is the problem with intellisense without reloading the whole editor?

I understand that TW 4 is relatively new and this plugin it's not finished yet, I guess I could just read some statements about it because it intellisense not at all / wrong / with reload / incomplete :-)

And again, thank you for taking the time and energy to pursue this.

[thecrypticace]

Great to hear it! thx for ur work. But what is the problem with intellisense without reloading the whole editor?

This should not be necessary. Would you mind opening a separate issue with step-by-step instructions on how to reproduce this? Please include information about your environment (VSCode version, operating system, node version, etc…)

[Kcko]

Great to hear it! thx for ur work. But what is the problem with intellisense without reloading the whole editor?

This should not be necessary. Would you mind opening a separate issue with step-by-step instructions on how to reproduce this? Please include information about your environment (VSCode version, operating system, node version, etc…)

Ok, i will create separate issue with video and complete environment info, tonight.

EDIT:
Intellisense works on HTML!

I just tried it and it works fine, was there an update?
Video: https://is.gd/Z9PLdn

When I tried it 1-2 days ago (first time with TW 4, clean project, build via tailwindcss, I had to reload the whole editor via developer window, then it just started hinting.

But otherwise, of course, it still has a problem with hinting in css (variables).

See: https://is.gd/xq8vwB

I assume that this is being worked on, it's not functional yet, or am I doing something wrong?

[bturski]

My project has also been upgraded to tailwind v4 and no intellisense with latest versions of the extension.
I was using v0.14.13, reverted to v0.14.12 also didn't work, then v0.14.11 where Intellisense seems to work fine.

I'm using VSCode Insiders, constantly updating to latest.

Version: 1.100.0-insider (user setup)
Commit: c7ea9f8f6c08db68cd63dabe8edfc8555904ee42
Date: 2025-04-04T05:04:35.646Z
Electron: 34.4.1
ElectronBuildId: 11317338
Chromium: 132.0.6834.210
Node.js: 20.18.3
V8: 13.2.152.41-electron.0
OS: Windows_NT x64 10.0.26100

[anishd19]

+1