Open YuliyaMinsk opened 8 months ago
I'm having the same problem.
Seems related to https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/244.
This seems to me like your tailwind config isn't being picked up in some scenarios. Can you provide a reproduction?
I was facing this issue today, for some reason eslint-plugin-prettier
was throwing an error like yours is. I also noticed that when I save a file, prettier-plugin-tailwindcss
formats the classes, but running lint-staged with a prettier --write
changed the order of the classes, which I don't know why. So I just removed prettier-plugin-tailwindcss
and eslint-plugin-prettier
, then I put eslint-plugin-tailwindcss
instead.
I could reproduce this now a couple of times.
The problem seems to be on vscode side. It happens when the tailwind classes are changed and saved without re-triggering vscode's format on save (think about finding and replacing the name of an animation in a refactor, or something like that). When this happens and you run the formatter via the cli, vscode can report that the formatting is wrong, when in reality it is correct. When you save the file, it formats it how it thinks it's correct, but now if you run the formatter again via the cli, it'll correct it. Once you understand that vscode is wrong here, reloading it (running reload window command, or killing and opening the app again) fixes the issue on vscode side.
Hi @dani-mp 👋🏻
I had the same issue and you're right. The best option on my side was to kill vscode
completely and open it again as reloading with the window command didn't had any effect.
Thanks 🙏🏻
If you are using eslint-config-prettier
you probably don't want to use it with eslint-plugin-prettier
, this surely will have some side effects (or layer of indirection where things may break according to the docs)
Thank you @SugarDarius
Same with WebStorm. Just close it completely and open, it will show you then that you have to reorder classes in the right way
What version of
prettier-plugin-tailwindcss
are you using?v0.5.11
What version of Tailwind CSS are you using?
v3.3.0
What version of Node.js are you using?
v20.11.0
What package manager are you using?
npm
What operating system are you using?
macOS
Describe your issue
Hello everyone,
I've added to tailwind config new values - small, medium, large.
Now, when I add them to my files, the plugin sets the order as follows:
rounded-large h-[462px] w-[905px] bg-skin-fill-card px-14 py-20
however, when I run husky to test my code before committing, I get this error. How to fix it?
9:21 error Replace "rounded-large·h-[462px]·w-[905px]" with "h-[462px]·w-[905px]·rounded-large" prettier/prettier
I use the following devDependencies:
Config for prettier:
Thanks a lot for any help!