Completions not appearing on my v4 project #1261

Erghan · 2025-03-11T15:07:30Z

What version of VS Code are you using?

1.98.0

What version of Tailwind CSS IntelliSense are you using?

0.14.8

What version of Tailwind CSS are you using?

4.0.12

What package manager are you using?

npm

What operating system are you using?

macOS

Tailwind config

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

VS Code settings

{
  "explorer.sortOrder": "type",
  "editor.minimap.enabled": true,
  "editor.renderWhitespace": "all",
  "editor.wordWrap": "on",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[php]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
  },
  "php.validate.executablePath": "/Applications/MAMP/bin/php/php7.4.12/bin/php",
  "files.autoSaveDelay": 3000,
  "editor.tabSize": 2,
  "prettier.tabWidth": 2,
  "CSSNavigation.activeCSSFileExtensions": ["scss", "sass", "less"],
  "workbench.iconTheme": "helium-icon-theme",
  "workbench.tree.indent": 18,
  "[svg]": {
    "editor.defaultFormatter": "jock.svg"
  },
  "files.exclude": {
    "prepros.config": true
  },
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  "accessibility.signalOptions.volume": 0,
  "tailwind-fold.autoFold": true,
  "tailwind-fold.unfoldIfLineSelected": true,
  "files.associations": {
    "*.css": "tailwindcss"
  },

  "editor.quickSuggestions": {
    "strings": true
  },

  "tailwindCSS.includeLanguages": {
    "plaintext": "html"
  }
}

Reproduction URL

N/A

Describe your issue

I am working on a project with Next.js and Tailwind v4.
When I start typing the Tailwind class, I get this error in the dev tool. Autocompletion doesn't work.

thecrypticace · 2025-03-11T15:38:49Z

I've changed the issue title as this:

[Extension Host] [fetchCompletions] Response status was 402: quota exceeded

Looks to me like its an AI-related extension (e.g. copilot, Claude, etc…) and is unrelated to Tailwind CSS IntelliSense.

Please provide a reproduction of your Tailwind CSS project setup

RalphAtHamburg · 2025-03-11T16:08:55Z

I have a similar problem with almost the same setup. The completions and the hover-boxes do not work. However, if I delete the node_modules folder and reload the window, everything is fine.

KostaJovic01 · 2025-03-12T07:19:53Z

I am also having trouble getting the autocompletions to work after the upgrade to Tailwindcss V4
However im using both VScode and Webstorm
it seems that the problem is with the language server
https://youtrack.jetbrains.com/issue/WEB-71469/Tailwind-CSS-4-class-completion-doesnt-work-if-Sass-SCSS-file-contains-use-tailwindcss-instead-of-import-tailwindcss

anym0re94 · 2025-03-13T11:46:43Z

I'm not quite sure what caused this, but I might just found the work around (using v0.14.9)

in the vscode settings, add this
{ "tailwindCSS.experimental.configFile": "tailwind.config.ts" }
the tailwind.config.{whatever ext}, remove the theme and plugin keys.

***The colors completion still quiet though.

ViggoV · 2025-03-13T15:07:39Z

In my case completion generally works, but the classes are sorted alphabetically so it is almost worse than nothing.

rChaoz · 2025-03-15T22:45:45Z

@Erghan hi, I was encountering the same issue and managed to pinpoint it to a removed utiltiy in an @apply, check out #1265 for more details, maybe this helps fix your issue

ToniIvars · 2025-03-18T23:54:52Z

Hello! I've had the same problem as you for a while but, as @anym0re94 said here,

I'm not quite sure what caused this, but I might just found the work around (using v0.14.9)
* in the vscode settings, add this
  `{ "tailwindCSS.experimental.configFile": "tailwind.config.ts" }`

* the tailwind.config.{whatever ext}, remove the theme and plugin keys.
***The colors completion still quiet though.

the solution for me has been to write { "tailwindCSS.experimental.configFile": "path/to/the/input/css/file" } in the settings of vscode. However, as the issue is with tailwind v4, you don't have a config file but an "input" css file that tailwind uses to compile the final styles. This is the file you have to put in your editor settings.

You will find more information in the extension page (at the end of the page). Hope this helps!

vinicete · 2025-03-19T23:33:33Z

I just fixed it adding "tailwindCSS.experimental.configFile": "path/to/index.css" on settings.json

dvlpr91 · 2025-03-22T13:24:36Z

I just fixed it adding "tailwindCSS.experimental.configFile": "path/to/index.css" on settings.json

This is very innovative in its use...

What the...

smnbbrv · 2025-03-26T14:45:47Z

I just fixed it adding "tailwindCSS.experimental.configFile": "path/to/index.css" on settings.json

And what should be done in a monorepo with multiple tailwind projects?

lukasver · 2025-03-27T16:41:25Z

I just fixed it adding "tailwindCSS.experimental.configFile": "path/to/index.css" on settings.json

And what should be done in a monorepo with multiple tailwind projects?

Check the extension docs:

GrifTheDev · 2025-03-29T20:38:54Z

I just fixed it adding "tailwindCSS.experimental.configFile": "path/to/index.css" on settings.json

Had this issue too. Intellisense was working completely fine on v4 projects yesterday. I booted up my project today and it didn't work until I pointed it to the app.css manually by changing the settings.json config. Maybe there was an update in between?

luisrudge · 2025-04-02T22:58:15Z

same here. it was working before and it stopped for no reason. no idea when, it's been a while since I needed it! adding "tailwindCSS.experimental.configFile": "app/tailwind.css", fixes the issue, so it's clear there's a regression on how the extension finds the config file

thecrypticace · 2025-04-03T13:24:13Z

@GrifTheDev @luisrudge Can either of you provide a reproduction project?

luisrudge · 2025-04-03T18:02:43Z

unfortunately, no. I tried to repro on a new React Router 7 project with tailwind and shadcn (what I'm using in my project) and it works as expected. it must be something else messing up the config file resolution

GrifTheDev · 2025-04-04T10:28:22Z

@GrifTheDev @luisrudge Can either of you provide a reproduction project?

I can try when I come back to my computer. I was working on a SvelteKit project made with npx sv create and then chose the tailwind option in the setup prompt.

tworonin · 2025-04-08T16:33:21Z

Started vscode today and found myself facing this same issue (I also had the 100% CPU issue mentioned in #1303; I'm using an M2 as well). Adding the tailwindCSS.experimental.configFile line to settings.json and pointing it to my main CSS file resolved both issues; color hinting, suggestions, etc. began working and CPU usage for Code Helper (Plugin) returned to normal.

I reproduced this issue in a bare project with all other extensions disabled. I created a repo for you to test, but I suspect this is due to some conflict at the local level.

Hope this info helps!

https://github.com/tworonin/tailwind-extension

Before adding tailwindCSS.experimental.configFile
OUTPUT

Booting server...
[Trace - 12:26:22 PM] Sending request 'initialize - (0)'.
[Trace - 12:26:22 PM] Received notification 'window/logMessage'.
Setting up server…
[Trace - 12:26:22 PM] Received notification 'window/logMessage'.
Listening for messages…
[Trace - 12:26:22 PM] Received response 'initialize - (0)' in 270ms.
[Trace - 12:26:22 PM] Sending notification 'initialized'.
[Trace - 12:26:22 PM] Sending notification 'textDocument/didOpen'.
[Trace - 12:26:22 PM] Received request 'workspace/configuration - (0)'.
[Trace - 12:26:22 PM] Sending response 'workspace/configuration - (0)'. Processing request took 0ms
[Trace - 12:26:22 PM] Received request 'workspace/configuration - (1)'.
[Trace - 12:26:22 PM] Sending response 'workspace/configuration - (1)'. Processing request took 0ms
[Trace - 12:26:22 PM] Received request 'workspace/configuration - (2)'.
[Trace - 12:26:22 PM] Sending response 'workspace/configuration - (2)'. Processing request took 0ms
[Trace - 12:26:22 PM] Received request 'workspace/configuration - (3)'.
[Trace - 12:26:22 PM] Sending response 'workspace/configuration - (3)'. Processing request took 1ms
[Trace - 12:26:22 PM] Received notification 'window/logMessage'.
Searching for Tailwind CSS projects in the workspace's folders.
[Trace - 12:26:23 PM] Sending notification '$/setTrace'.

After adding tailwindCSS.experimental.configFile and restarting vscode
OUTPUT

Locating server…
Booting server...
[Trace - 12:28:32 PM] Sending request 'initialize - (0)'.
[Trace - 12:28:32 PM] Received notification 'window/logMessage'.
Setting up server…
[Trace - 12:28:32 PM] Received notification 'window/logMessage'.
Listening for messages…
[Trace - 12:28:32 PM] Received response 'initialize - (0)' in 234ms.
[Trace - 12:28:32 PM] Sending notification 'initialized'.
[Trace - 12:28:32 PM] Received request 'workspace/configuration - (0)'.
[Trace - 12:28:32 PM] Sending response 'workspace/configuration - (0)'. Processing request took 1ms
[Trace - 12:28:32 PM] Received request 'workspace/configuration - (1)'.
[Trace - 12:28:32 PM] Sending response 'workspace/configuration - (1)'. Processing request took 0ms
[Trace - 12:28:32 PM] Received request 'workspace/configuration - (2)'.
[Trace - 12:28:32 PM] Sending response 'workspace/configuration - (2)'. Processing request took 1ms
[Trace - 12:28:32 PM] Received request 'workspace/configuration - (3)'.
[Trace - 12:28:32 PM] Sending response 'workspace/configuration - (3)'. Processing request took 0ms
[Trace - 12:28:32 PM] Received notification 'window/logMessage'.
Loading Tailwind CSS projects from the workspace settings.
[Trace - 12:28:32 PM] Received notification 'window/logMessage'.
[Global] Creating projects: [{"folder":"/Users/apvd/projects/web/test","config":"/Users/apvd/projects/web/test/css/app.css","selectors":[{"priority":0,"pattern":"/Users/apvd/projects/web/test/**"}],"user":true,"tailwind":{"version":"4.1.3","features":["css-at-theme","layer:base","content-list","source-inline","source-not"],"isDefaultVersion":false}}]
[Trace - 12:28:32 PM] Received request 'client/registerCapability - (4)'.
[Trace - 12:28:32 PM] Sending response 'client/registerCapability - (4)'. Processing request took 1ms
[Trace - 12:28:32 PM] Received notification 'window/logMessage'.
[Global] Preparing projects...
[Trace - 12:28:32 PM] Received notification 'window/logMessage'.
[Global] Initializing projects...
[Trace - 12:28:32 PM] Received notification 'window/logMessage'.
[Global] Initialized 0 projects

thecrypticace · 2025-04-08T17:02:50Z

@tworonin

Searching for Tailwind CSS projects in the workspace's folders.

This tells me it's getting stuck in a file search but given that the project itself is so tiny something very weird is going wrong here but I'm not quite sure what. The tailwindCSS.experimental.configFile fixing it does make sense as that bypasses the file search entirely.

That project opens and get's processed instantly for me. Could you provide:

your VSCode settings
Where the project is located on the filesystem (like the path to the folder)
Do you happen to know if your pnpm store is located on another drive other than your main one? (afaik this shouldn't be a thing but I'm just trying to think of something)

tworonin · 2025-04-08T21:50:18Z

@thecrypticace

your VSCode settings

User settings settings.json

{
  "terminal.external.osxExec": "iTerm.app",
  "terminal.integrated.profiles.osx": {
    "bash": {
      "path": "bash",
      "args": ["-l"],
      "icon": "terminal-bash"
    },
    "zsh": {
      "path": "zsh",
      "args": ["-l"]
    },
    "fish": {
      "path": "fish",
      "args": ["-l"]
    },
    "tmux": {
      "path": "tmux",
      "icon": "terminal-tmux"
    },
    "pwsh": {
      "path": "pwsh",
      "icon": "terminal-powershell"
    }
  },
  "security.workspace.trust.untrustedFiles": "open",
  "files.exclude": {
    "/vendor": true
  },
  "search.exclude": {
    "**/@{TMP,tmp}": true,
    "**/*.{jpg,jpeg,png,gif,mp4,avi}": true,
    "**/build": true,
    "**/composer.lock": true,
    "**/dist": true,
    "**/package-lock.json": true,
    "**/vendor": true,
    "/public": true,
    "bootstrap/ssr/": true,
    "storage/": true
  },
  "css.validate": false,
  "stylelint.validate": [
    "css",
    "html",
    "javascriptreact",
    "less",
    "markdown",
    "postcss",
    "sass",
    "scss",
    "source.css.styled",
    "source.markdown.math",
    "styled-css",
    "sugarss",
    "svelte",
    "typescript",
    "typescriptreact",
    "vue",
    "vue-html",
    "vue-postcss",
    "xml",
    "xsl"
  ],
  "advancedNewFile.exclude": {
    "@assets": true,
    "@dropbox": true,
    "@tmp": true,
    "dist": true,
    "node_modules": true,
    "node_modules_electron": true,
    "public": true,
    "storage": true,
    "vendor": true
  },
  "[astro]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.tabSize": 2
  },
  "[js]": {
    "editor.tabSize": 2
  },
  "[md]": {
    "editor.tabSize": 2
  },
  "[php]": {
    "editor.tabSize": 2
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.autoIndent": "full",
  "editor.cursorBlinking": "solid",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.cursorStyle": "line",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.fontSize": 16,
  "editor.fontWeight": 400,
  "editor.fontFamily": "FiraCode Nerd Font",
  "editor.fontLigatures": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": false,
  "editor.letterSpacing": 0.3,
  "editor.lineHeight": 25,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.suggestSelection": "recentlyUsedByPrefix",
  "editor.tabCompletion": "on",
  "editor.wordWrap": "on",
  "search.showLineNumbers": true,
  "workbench.colorCustomizations": {
    "editorIndentGuide.activeBackground1": "#928f00",
    "editorIndentGuide.activeBackground2": "#928f00",
    "editorIndentGuide.activeBackground3": "#575500",
    "editorIndentGuide.activeBackground4": "#a51283",
    "editorIndentGuide.activeBackground5": "#a51283",
    "editorIndentGuide.activeBackground6": "#a51283"
  },
  "zenMode.centerLayout": false,
  "diffEditor.ignoreTrimWhitespace": false,
  "editor.renderWhitespace": "none",
  "editor.minimap.enabled": false,
  "editor.formatOnSave": true,
  "prettier.documentSelectors": [
    "**/*.{js,jsx,ts,tsx,vue,html,css,scss,less,json,md,mdx,graphql,yaml,yml,php}"
  ],
  "search.useGlobalIgnoreFiles": true,
  "tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass",
    "class:list",
    "input-class"
  ],
  "editor.indentSize": "tabSize",
  "javascript.updateImportsOnFileMove.enabled": "prompt",
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
  },
  "tailwindCSS.emmetCompletions": true,
  "tailwindcss-intellisense.trace.server": "messages",
  "terminal.integrated.fontSize": 15,
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "stylelint.packageManager": "pnpm",
  "javascript.preferences.organizeImports": {
    "caseFirst": "lower"
  },
  "npm.packageManager": "pnpm",
  "typescript.format.enable": false,
  "javascript.validate.enable": false,
  "typescript.validate.enable": false,
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "terminal.integrated.fontLigatures.enabled": true,
  "tailwindCSS.experimental.configFile": "./resources/css/app.css"
}

Do you want the defaultSettings.json as well?

Where the project is located on the filesystem (like the path to the folder)

/Users/apvd/projects/web

Do you happen to know if your pnpm store is located on another drive other than your main one? (afaik this shouldn't be a thing but I'm just trying to think of something)

Everything is on the main drive. The pnpm store is located at: /Users/apvd/Library/pnpm/store/v3. I do have a second drive connected, but it is only used for storing static assets, no code or project-related resources are there.

I'm just trying to think of something

I hear you, bug hunting can be very frustrating. Hope this info helps. Thanks for your hard work and a great extension.

thecrypticace · 2025-04-08T21:53:43Z

Oooooh I think that's this: SuperchupuDev/tinyglobby#99

Looks like there's an issue in tinyglobby (technically fdir) when an ignore pattern starts with / and we fill in files.exclude as the ignore patterns during a file search.

I don't believe fdir has a patch out for this yet but I might have an idea for a workaround (prefixing the patterns with **/). Gonna give that a test tomorrow.

davidrunger · 2025-04-08T22:14:57Z

Oooooh I think that's this: SuperchupuDev/tinyglobby#99

Looks like there's an issue in tinyglobby (technically fdir) when an ignore pattern starts with / and we fill in files.exclude as the ignore patterns during a file search.

That would explain it. I also have a path (numerous paths, actually) starting with / in my files.exclude VS Code setting, and I am also seeing 100% CPU usage when using the VS Code Tailwind CSS IntelliSense extension version 0.14.14 (but not 0.14.13), both when using my own project and also the bare bones test project that @tworonin provided.

Edit: I confirmed that deleting my files.exclude VS Code setting does fix the 100% CPU usage on version 0.14.14 (and Tailwind autocompletions work).

luisrudge · 2025-04-08T22:16:48Z

FWIW I don't have anything under files.exclude

tworonin · 2025-04-08T22:22:42Z

Oooooh I think that's this: SuperchupuDev/tinyglobby#99

Looks like there's an issue in tinyglobby (technically fdir) when an ignore pattern starts with / and we fill in files.exclude as the ignore patterns during a file search.

This seems to be the culprit for me.

I removed the tailwindCSS.experimental.configFile setting and then edited these sections:

"files.exclude": {
  "/vendor": true
},
"search.exclude": {
  "**/@{TMP,tmp}": true,
  "**/*.{jpg,jpeg,png,gif,mp4,avi}": true,
  "**/build": true,
  "**/composer.lock": true,
  "**/dist": true,
  "**/package-lock.json": true,
  "**/vendor": true,
  "/public": true,
  "bootstrap/ssr/": true,
  "storage/": true
},
"advancedNewFile.exclude": {
  "@assets": true,
  "@dropbox": true,
  "@tmp": true,
  "dist": true,
  "node_modules": true,
  "node_modules_electron": true,
  "/public": true,
  "storage": true,
  "/vendor": true
},

I removed all values that start with / and the extension worked as intended, CPU usage normal. I then re-added the / one-by-one to see if the problem re-surfaced. It looks like files.exclude is the only issue, because the problem only happens when I restored the / in that value. Values that start with / in the other two sections do not reproduce the issue.

Thanks for your reply @thecrypticace and for tracking down the answer.

thecrypticace · 2025-04-08T22:27:19Z

Okay, cool this is good to know. I was quite nervous in switching from fast-glob to tinyglobby b/c it's so core to the language server (but it quite importantly fixed a CPU issue with recursive symlinks).

Can't win lol

I'll see if I can get some kind of fix out for the leading / issue tomorrow. Sorry for all the trouble.

@luisrudge Yeah this is new to 0.14.14 — since your issue originated before then and still isn't fixed there's likely something else wrong but I'm not sure what since the symlink thing should be fixed now 🤔

thecrypticace changed the title ~~[Extension Host] [fetchCompletions] Response status was 402: quota exceeded~~ Completions not appearing on my v4 project Mar 11, 2025

thecrypticace added the question Further information is requested label Mar 11, 2025

tworonin mentioned this issue Apr 8, 2025

Extension uses 100% of CPU when files.excludes contains a path starting with / #1303

Closed

Completions not appearing on my v4 project #1261

Completions not appearing on my v4 project #1261

Comments

Erghan commented Mar 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

thecrypticace commented Mar 11, 2025

Uh oh!

RalphAtHamburg commented Mar 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

KostaJovic01 commented Mar 12, 2025

Uh oh!

anym0re94 commented Mar 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ViggoV commented Mar 13, 2025

Uh oh!

rChaoz commented Mar 15, 2025

Uh oh!

ToniIvars commented Mar 18, 2025

Uh oh!

vinicete commented Mar 19, 2025

Uh oh!

dvlpr91 commented Mar 22, 2025

Uh oh!

smnbbrv commented Mar 26, 2025

Uh oh!

lukasver commented Mar 27, 2025

Uh oh!

GrifTheDev commented Mar 29, 2025

Uh oh!

luisrudge commented Apr 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thecrypticace commented Apr 3, 2025

Uh oh!

luisrudge commented Apr 3, 2025

Uh oh!

GrifTheDev commented Apr 4, 2025

Uh oh!

tworonin commented Apr 8, 2025

Uh oh!

thecrypticace commented Apr 8, 2025

Uh oh!

tworonin commented Apr 8, 2025

Uh oh!

thecrypticace commented Apr 8, 2025

Uh oh!

davidrunger commented Apr 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

luisrudge commented Apr 8, 2025

Uh oh!

tworonin commented Apr 8, 2025

Uh oh!

thecrypticace commented Apr 8, 2025

Uh oh!

Erghan commented Mar 11, 2025 •

edited

Loading

RalphAtHamburg commented Mar 11, 2025 •

edited

Loading

anym0re94 commented Mar 13, 2025 •

edited

Loading

luisrudge commented Apr 2, 2025 •

edited

Loading

davidrunger commented Apr 8, 2025 •

edited

Loading