VS Code format on save fights with prettier format (while linting)

[konradbjk]

What version of prettier-plugin-tailwindcss are you using?
v0.5.11

What version of Tailwind CSS are you using?
3.4.1

What version of Node.js are you using?
20.11.0

What package manager are you using?
yarn 4.1.0

What operating system are you using?
macOs

Describe your issue

I have a weird issue with VS Code. I have configured in the .vscode/settings.json

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "prettier.configPath": "./.prettierrc.json"
}

And correctly added plugin. It generally works. While I save, the classes gets reordered. What is more, VS Code underlines with red, if the classes are not properly sorted

However, when I run a build on my code, while lining it raises issues from prettier, that the tailwindcss classes are incorrectly sorted.
Sample

8:18  Error: Replace `pl-2·text-primary·hover:underline·active:text-custom-3` with `active:text-custom-3·pl-2·text-primary·hover:underline`  prettier/prettier

When prettier "fixes" the classes, I end up with VS Cody showing me errors, that the classes are not correctly sorted.

My package.json

{
...
    "lint": "npx prettier --config ./.prettierrc.json --write . --cache && next lint",
}

Has anyone seen similar issues? Ideally have a fix?

[YuliyaMinsk]

Hi! It looks like I have the same problem. I use the following script to fix it before committing:
"lint-fix": "npx eslint --fix 'src/**/*.{js,jsx,ts,tsx}'"

However, if I edit the file with a problem, prettier-plugin-tailwindcss changes the order again

[konradbjk]

Thanks for chipping in @YuliyaMinsk

This problem gets messy once a project grows, and you have like 20k+ lines of code. It causes a never ending loop of commits.

In my case, in some projects like the above, we have disabled the plugin

[thecrypticace]

@konradbjk can you provide a reproduction? active:text-custom-3 is being moved to the front which means that in one environment our plugin knows about your config but in another it does not.

Also, I see you're using Yarn 4 — and it's likely that you're using PnP. It's quite possible this is the source of the problem (given that it often requires specialized support from any tooling used) and disabling PnP could fix it.

Add this to your .yarnrc.yml file and see if the issue goes away:

nodeLinker: node-modules

[konradbjk]

Could you please tell me how I can create a sandbox for reproduction?

I have PnP off. Though, if just having PnP is an issue, then you have either way a bug here

[thecrypticace]

@konradbjk just a git repo I can clone on GitHub is fine.

[thecrypticace]

Closing this issue as it's been sitting open for a while without a reply. If you can provide a reproduction i'll take a look. Thanks!

[nerdyman]

@thecrypticace I ran into this issue a few weeks ago too and had to disable the plugin. Can you reopen it for now? I'll try and get a repro.

[nerdyman]

@thecrypticace I've got a repro here https://github.com/nerdyman/prettier-plugin-tailwindcss-vscode-conflict

It seems to occur when the Tailwind config is changed without reloading VS Code.

Kapture.2024-04-11.at.12.46.44.mp4

In the example above Prettier is watching and writing files from the command line and fighting with the Prettier plugin in VS Code over the order when the file is saved.

VS Code formats things consistently after it has been reloaded.

I'm not sure if this is a full repro as I don't recall changing the Tailwind config when I encountered this issue a few weeks ago but hopefully it will help somewhat. It might relate to #262 at least.

[DevelopJKong]

Has this issue been resolved? I still have the same problem.

[mikhail-karan]

Have the same issue happening where my CLI/Command pallete format has a different order set than my formatOnSave, even though it is using the exact same config (as verified through the prettier output console).

Using it in a sveltekit turborepo and going to end up having to remove the plugin.

EDIT: After some more troubleshooting it was my own fault. I had a plugin called headwind installed which conflicted with the prettier sorting.

[arnaudsm]

Same problem here, had to disable the plugin.

[email protected] + [email protected]
(I don't have the headwind plugin)

[bkilrain]

Glad I found this thread - I'm experiencing this same problem and was able to resolve it by disabling "Tailwind CSS Intellisense" Extension upgrading to their pre-release version (v0.13.46).