prettier-plugin-tailwindcss: vscode hanging with some vue files

For what it’s worth, we’re having the same issue with Next.js + TypeScript + TailwindCSS files. After spending over 4 hours trying to isolate the root cause, it was this plugin. Removing it solved the issue!

We’ve adopted a workaround for anyone interested:

1. Set pluginSearchDirs: false in .prettierrc. This fixes vscode.
2. Run prettier --plugin node_modules/prettier-plugin-tailwindcss from the CLI when you want to sort things.

We use just as our command runner and added a just sort to run the above. You could also use a pre-commit hook, etc.

Again, thanks for the great plugin! We love it (clearly) and I totally get that vscode/prettier are tough to debug. No worries and thanks for all your hard work.

I’m having the same issue and I’m rather curious what the common denominator is between people who have this.

I think this is related to a combination of installed NPM packages, because I’ve tried different VS Code versions, different Prettier extension versions, used different computers (one was a brand new Win11 installation), etc. But there is just one project that is giving me issues while others work flawlessly.

Are any of you using DaisyUI for example?

Meanwhile I’m trying to create a minimal repro.

👋 We’re working towards a solution for this.

I’ve merged some (sometimes significant) performance and memory improvements in #153 that could potentially fix this problem. The fix is available to test via our insiders build:

npm install prettier-plugin-tailwindcss@insiders

Could some of you give it a test and report back? It would be super helpful! You’ll need to close/reopen VS Code after installing it so the prettier extension doesn’t have the old version in memory.

Having the same problem on my team. Been trying to figure out the cause for days. Restarting Code makes everything run fine for awhile, then it starts either formatting Vue files very slowly (2-100 seconds apiece, and these are not massive components), or Prettier never finishes saving and we have to cancel the format to get it saved.

Happy to provide any debug info we can, but it doesn’t seem to be related to the size of the component, but may be related to the number of files edited in the current session.

Me too having the same issue on vscode. Had to removed this plugin to make saving vue file works again.

@or2e Since you’re using WSL2 — are your projects files under /mnt/{drive-letter-here} (e.g. /mnt/c)? WSL2 has serious performance issues accessing files shared with Windows via /mnt/* and any access of the filesystem slows things down significantly. I took your project, updated it to the latest version of the prettier plugin (v0.3.0) and ran the CLI against one of the files. It takes roughly 5.4s to process ./src/pages/clans/\[id\]/index.vue under WebUI. About 4.7s of which is everything required to load your local copy of Tailwind, load and compile the config, and set up everything for processing. And the majority of this time is Node processing any require() calls.

If I move the repo so it’s under /home/wsl the time drops significantly to 600ms total — with about 270ms of that being all the Tailwind, config loading, and setup. require() itself is slowed down a ton.

This might be something you can look at if you’re still having performance problems.

@krisz094 Any chance you’re using WSL as well?

that makes sense. but can’t we detect and only do it when running in vscode ? so we don’t get the overhead in cli, but get the benefits in vscode ? also it should be only one file I guess, so the overhead should be small. I mean if it means we don’t reload the config for the rest of the life time of the extension, that would be a lot less work

I’m on a nuxt 3 project, it it not big yet, but still has ~ 50+ components already

here’s without prettier-plugin-tailwindcss:

Rule                              | Time (ms) | Relative
:---------------------------------|----------:|--------:
prettier/prettier                 |  1735.189 |    50.0%
import/namespace                  |  1262.053 |    36.4%
@typescript-eslint/no-unused-vars |    70.073 |     2.0%
vue/attributes-order              |    63.656 |     1.8%
n/no-deprecated-api               |    25.548 |     0.7%
no-redeclare                      |    14.051 |     0.4%
import/order                      |    13.544 |     0.4%
unicorn/escape-case               |    12.815 |     0.4%
vue/component-tags-order          |     9.894 |     0.3%
spaced-comment                    |     9.673 |     0.3%

@jd1378

can’t we watch config file and update instead of expiring it after x seconds ?

We chose this route because, as far as I know, Prettier does not offer an API to do this. This means that it would need to be done via Node APIs — possibly using chokidar or some other file watcher. This also means that if we did that then we’d likely need to detect that we’re running in VSCode because there’s overhead to doing that and you wouldn’t want to do it when running prettier from the command line.

Glad to see the speedup! Almost 3 seconds still seems like quite a lot — but a Vue or Svelte file with a lot of expressions calls parse for every expression which adds up. What time do you get by removing the tailwindcss prettier plugin?

@ddahan There was a small hiccup that I just pushed a fix for a few minutes ago. Can you re-install the insiders build and give it one more test please?

The insiders version you’ll need to test is 0.0.0-insiders.78bd35b (you can check your lock file to see if its the right one)