Something is breaking the intellisense from working in VSCODE

[urphasin]

What version of VS Code are you using?

1.100.3

What version of Tailwind CSS IntelliSense are you using?

0.14.21

What version of Tailwind CSS are you using?

V4.1.8

What package manager are you using?

NPM

What operating system are you using?

For example: Linux Lubuntu

Tailwind config

Tailwind V4 doesnt use CONFIG FILES

VS Code settings

{
  "liveServer.settings.donotVerifyTags": true,
  "workbench.startupEditor": "none",
  "C_Cpp.files.exclude": {
    "**/.vscode": true,
    "**/.vs": true
  },
  "C_Cpp.default.cStandard": "c23",
  "cmake.configureOnOpen": true,
  "editor.fontWeight": "normal",
  "cmake.showOptionsMovedNotification": false,
  "git.autofetch": true,
  "redhat.telemetry.enabled": true,
  "dotnet.codeLens.enableReferencesCodeLens": false,
  "tabnine.experimentalAutoImports": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "workbench.iconTheme": "material-icon-theme",
  "workbench.settings.applyToAllProfiles": [],
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnType": true,
  "[c]": {
    "editor.defaultFormatter": "ms-vscode.cpptools"
  },
  "[cpp]": {
    "editor.defaultFormatter": "ms-vscode.cpptools"
  },
  "files.autoSave": "afterDelay",
  "[css]": {
    "editor.defaultFormatter": "vscode.css-language-features"
  },
  "editor.linkedEditing": true,
  "prettier.jsxSingleQuote": true,
  "editor.stickyScroll.enabled": false,
  "multiCommand.commands": [
    {
      "command": "extension.insertSpacesWithoutMovingCursor",
      "sequence": [
        {
          "command": "type",
          "args": { "text": " " }
        },
        "cursorLeft"
      ]
    }
  ],
  "[php]": {
    "editor.defaultFormatter": "DEVSENSE.phptools-vscode"
  },
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "code-runner.runInTerminal": true,
  "terminal.explorerKind": "both",
  "editor.indentSize": "tabSize",
"C_Cpp.default.cppStandard": "c++23",
  "vsicons.dontShowNewVersionMessage": true,
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter"
  },
  "makefile.configureOnOpen": true,
  "dart.openDevTools": "flutter",
"leetcode.workspaceFolder": "C:\\Users\\Elizabeth\\.leetcode",
  "editor.minimap.enabled": false,
  "editor.detectIndentation": false,
"workbench.sideBar.location": "right",
"settingsSync.ignoredExtensions": [],
"intelephense.files.associations": [

    "*.php",
    "*.phtml"
],
"intelephense.format.enable": true,
"intelephense.format.options": {
    "tabWidth": 4,
    "printWidth": 100
},
"terminal.external.windowsExec": "C:\\Users\\o\\AppData\\Local\\Microsoft\\WindowsApps\\wt.exe",
"java.inlayHints.parameterNames.enabled": "all",
"editor.minimap.maxColumn": 80,
"diffEditor.renderSideBySideInlineBreakpoint": 80,
"prettier.printWidth": 72,
"liveServer.settings.donotShowInfoMsg": true,
"editor.fontFamily": "Montserrat,Consolas, 'Courier New', monospace",
"debug.console.fontSize": 16,
"terminal.integrated.fontSize": 16,
"haskell.manageHLS": "PATH",
"C_Cpp.suggestSnippets": false,
"git.enableSmartCommit": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"python.analysis.typeCheckingMode": "standard",
"editor.tabSize": 2,
"editor.fontSize": 15,
"github.copilot.enable": {
  "*": false,
  "css": true,
  "html": true,
  "javascript": true,
  "json": true
},
"git.confirmSync": false,
}

Reproduction URL

https://github.com/urphasin/dafun-rider

Describe your issue

Intellisense stops working completely like its not even there. The problem is from the index.css file I just know it.

[mineproness]

bro Tailwind CSS IntelliSense is not get update by tailwind Labs so this is think this is do'nt have any config file so this is going this is not tailwind project. so we can just tailwind.config.js

[urphasin]

Bro does tailwind V4.1 support tailwindconfig.js in V4.1?

…

On Mon, Jun 9, 2025, 05:29 mineproness ***@***.***> wrote: *mineproness* left a comment (tailwindlabs/tailwindcss-intellisense#1406) <#1406 (comment)> bro Tailwind CSS IntelliSense is not get update by tailwind Labs so this is think this is do'nt have any config file so this is going this is not tailwind project. so we can just tailwind.config.js — Reply to this email directly, view it on GitHub <#1406 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BO3IBXOSB646TRP6X7GOFXL3CVHXRAVCNFSM6AAAAAB63O25TSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDSNJVGIYTMNZSHE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[thecrypticace]

@urphasin Can you provide a reproduction please. Sorry I didn't notice it at the bottom

[urphasin]

@thecrypticace Yes I can. Where would you like me to produce it? I gave the production URL in my original post. Clone it and run the program the intellisense breaks after a few minutes of typing. I think your extension is having problem parsing the data under the @theme directive block. Because that's how tailwind v4 wants us to write custom colors and other stuff now.

[thecrypticace]

Yeah all good I see the reproduction — sorry I somehow missed it when looking at the issue. Will take a look soon!

[thecrypticace]

The problem is this line in index.backup.css:

@theme {
  darkMode: 'class', // ✅ required /* <-- this line should not be here */

  /* … */
}

There's two problems here:

1. @theme {} blocks can only contain custom-properties and @keyframes at-rules
2. CSS comments are written with /* … */ and not // …

Drop that line and add this to your CSS which is the v4-equivalent to darkMode: 'class' from v3:

@custom-variant dark (&:is(.dark *));

Our extension does it's best to "detect" what your project file is by analyzing the content but in this case it sees index.backup.css and index.css and gives them equal weight as to which one might be the right file, creates projects from both, and index.backup.css happens to get picked first.

I'll see if I can improve this "picking" behavior though because we should be able to filter on whether or not a project is "valid". I also need to surface these errors. The problem is things can get noisy when your project has lots of otherwise unrelated CSS files. Will give that some thought.

[urphasin]

@thecrypticace I followed your corrections but I don't get color intellisense on the custom color under theme directive. I added three screen shots showing the problems. At this point I can't figure what's causing the issue. I even deleted index.backup.css(that was where I copied my index.css as backup while I figured out what caused the issue). Look at screenshot 2, whenever I ctrl + click the @import **_tailwindcss_** I get that error thrown by vscode. Look at screenshot 3, vscode throws Unknown at rule error

[thecrypticace]

Look at screenshot 2, whenever I ctrl + click the @import tailwindcss I get that error thrown by vscode.

This is normal. VSCode's CSS language server doesn't look up NPM packages. I could probably do something in our language server to make this work for tailwindcss though.

I even deleted index.backup.css(that was where I copied my index.css as backup while I figured out what caused the issue).

👍

Look at screenshot 3, vscode throws Unknown at rule error

You should change your language mode from "CSS" to "Tailwind CSS" and those will go away.

After this you'll see the errors disappear:

… I don't get color intellisense on the custom color under theme directive.

It's working here:

Maybe close and reopen VSCode?

[urphasin]

3 works as intended now after changing Language Mode to tailwindcss. Thx bro.