Tailwind CSS IntelliSense max CPU load on macOS

[ChristianAgren]

What version of VS Code are you using?
v1.96.0

What version of Tailwind CSS IntelliSense are you using?
v.0.12.16, v0.12.15, v0.12.14

What operating system are you using?
macOS Ventura 13.6

VS Code settings

{
  "terminal.integrated.profiles.osx": {
    "bash": {
      "path": "bash",
      "args": ["-l"],
      "icon": "terminal-bash"
    },
    "zsh": {
      "path": "zsh",
      "args": ["-l"]
    },
    "rosetta": {
      "path": "arch",
      "args": ["-x86_64", "zsh", "-l"],
      "overrideName": true
    }
  },
  "terminal.integrated.defaultProfile.osx": "rosetta",
  "redhat.telemetry.enabled": false,
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "git.autofetch": true,
  "prettier.documentSelectors": ["**/*.astro"],
  "[astro]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "diffEditor.ignoreTrimWhitespace": false,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "git.confirmSync": false,
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "cSpell.language": "en,sv,sv-SE",
  "workbench.settings.openDefaultKeybindings": true,
  "[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown",
    "json"
  ],
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown"
    // "json",
    // "jsonc",
    // "json5"
  ],
  "eslint.useESLintClass": true,
  "githubPullRequests.createOnPublishBranch": "never",
  "githubPullRequests.pullBranch": "never",
  "mssql.objectExplorer.groupBySchema": false,
  "azureFunctions.showProjectWarning": false,
  "git.openRepositoryInParentFolders": "always",
  "[rust]": {
    "editor.defaultFormatter": "jinxdash.prettier-rust"
  },
  "git.suggestSmartCommit": false,
  "cSpell.userWords": [
    "actix",
    "artboard",
    "autoconfig",
    "autofetch",
  ],
  "eslint.codeActionsOnSave.rules": null,
  "git.terminalAuthentication": false,
  "nxConsole.showNodeVersionOnStartup": false,
  "bicep.enableSurveys": false,
  "gopls": {
    "ui.semanticTokens": true
  },
  "sonarlint.output.showVerboseLogs": true,
  "sonarlint.rules": {
    "typescript:S6747": {
      "level": "off"
    },
    "typescript:S6759": {
      "level": "off"
    },
    "typescript:S6479": {
      "level": "off"
    },
    "javascript:S4138": {
      "level": "off"
    }
  },
  "go.toolsManagement.autoUpdate": true,
  "dotnet.server.suppressLspErrorToasts": true,
  "sonarlint.focusOnNewCode": false,
  "react-native-tools.showUserTips": false,
  "update.mode": "none",
  "workbench.colorTheme": "Night Owl",
  "files.associations": {
    "*.css": "tailwindcss"
  },
}

Describe your issue
Starting the Tailwind CSS IntelliSense extension in VSCode (in a specific project) takes my CPU usage from ~2% to over 90%. This happens with the aforementioned extension versions. If I install an earlier version, my CPU usage is fine.

The project that I experienced the issues in does not use tailwind in itself. If I check Activity monitor, I can see that VSCode has started a bunch of processes called rg (related to file searching?)

Looking closer at these processes by running ps aux | grep <process id> in the terminal, they seem to refer to a bunch of other extensions (nrwl.angular-console, vscode-eslint, code-spell-checker, vscode-yaml) but I don't think they are the culprits as it's only when I start the tailwind extension that my CPU goes through the roof. One of the extensions that the processes are referring to is the json-language-features extension that comes prebundled with vscode, which I don't want to disable.

The temporary fix for me right now is disabling the tailwind extension or using v0.12.13

[luap2703]

@ChristianAgren after playing some time around, I could solve the issue by adding

"tailwindCSS.experimental.configFile": "./apps/web/tailwind.config.ts" <- Your tailwind.config.ts path

to the settings.json.
It seems that tailwind is kind of stuck in locating server. We are using a large monorepo, perhaps it is scanning everything (incl. node_modules) which takes some time (just guessing). This solved it for us, now ramps up to 90% but instantly goes back to 5%. :)

Hope this helps!

[luizpcam]

up ... same here

[skiabox]

I have the same exact problem with Tailwind 4 - beta.8
Tailwind v4 can load a legacy tailwind.config.js using the @config directive but it does not work with the intellisense plugin.

[acrusella]

Same problem here, you can easily see tailwind related processes through vscode > Help > Open Process Explorer, once the extension is uninstalled processes stop appearing and CPU usage goes back to normal.

Edit: Happening mostly on large projects & monorepos.

[relentlessreforged]

This should be hight priority, it was also triggering a bunch of "problems" in my workspace and causing vscode to absolutely crawl...

[jwoo0122]

Looks like this happens after 0.12.14 #1083

[abegehr]

@ChristianAgren after playing some time around, I could solve the issue by adding

"tailwindCSS.experimental.configFile": "./apps/web/tailwind.config.ts" <- Your tailwind.config.ts path

to the settings.json. It seems that tailwind is kind of stuck in locating server. We are using a large monorepo, perhaps it is scanning everything (incl. node_modules) which takes some time (just guessing). This solved it for us, now ramps up to 90% but instantly goes back to 5%. :)

Hope this helps!

Thank you @ChristianAgren, this solved it for me!
If you have a monorepo with tailwind in multiple places, you can also use something like this in settings.json:

  "tailwindCSS.experimental.configFile": {
    "./apps/web/tailwind.config.mjs": "./apps/web/src/**/*",
    "./apps/app/src/css/app.css": "./apps/app/src/**/*"
  }

[thecrypticace]

I'm gonna close this one in favor of #986 which is also about the ripgrep processes being spawned by VS Code (just trying to clean up issues where possible). I'm still searching for a solution here though because to date I have not reproduced this.