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.

https://github.com/tailwindlabs/prettier-plugin-tailwindcss/assets/4908432/8bca4076-5e33-4ca4-bb9b-96133cb84ae1

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 https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/262 at least.

[sumitdashrathgupta]

To resolve this issue, you can try the following:

1. Adjust Prettier Rules: Configure Prettier to ignore sorting Tailwind CSS classes. You can achieve this by customizing the Prettier configuration to exclude certain files or sections from sorting. However, this might not be ideal if you want consistent sorting throughout your codebase.

2. Override Prettier's Sorting Behavior: Look into configuring Prettier to use a plugin or override its sorting behavior specifically for Tailwind CSS classes. Unfortunately, this might require some custom configuration and might not be straightforward.

3. Use Prettier Plugin for Tailwind CSS: Ensure that you are using the latest version of the prettier-plugin-tailwindcss and that it's correctly integrated into your Prettier setup. This plugin is designed to handle Tailwind CSS classes correctly within Prettier.

4. Update VS Code Extensions: Make sure that all your VS Code extensions, especially those related to Prettier and Tailwind CSS, are up to date. Sometimes, issues can arise due to outdated extensions.

5. Check Prettier Ignore File: Ensure that you don't have any configuration in your .prettier ignore file that might be causing Prettier to ignore certain files or directories where your Tailwind CSS classes reside.

6. Check Tailwind CSS Configuration: Review your Tailwind CSS configuration file (typically tailwind.config.js) to ensure that there are no conflicting settings or customizations that might affect how Prettier handles the classes.

7. Manual Sorting: As a last resort, if none of the above solutions work, you might have to manually sort the Tailwind CSS classes according to the expected order to avoid conflicts between Prettier and Tailwind CSS.

By investigating these areas, you should be able to resolve the conflict between Prettier and Tailwind CSS sorting behavior in your project.