I installed the prettier-plugin-tailwindcss and it successfully sorts the Tailwind classes when I run Prettier using npx prettier --write index.html. However, when I hit save in VScode, the prettier-plugin-tailwindcss doesn't sort the Tailwind classes as expected.
I'm following this tutorial and this documentation. As you can see I set the dev dependency correctly and have a .prettierrc.json in the project.``
I was expecting that when I hit save it will automatically work as expected which is to sort tailwind classes but the plugin only works if run the prettier using npx prettier --write index.html
Things I tried:
I set the format on save to true and set the paths but it didn't resolve the problem.
Best Answer
Go to Settings > Text Editor > Formatting and select "Format on Save".
EDIT:Also, I found out that if there's invalid html, prettier will spit errors and no formatting will happen. You can check for those errors in the terminal 'CTRL + SHIFT + U'. Probably more of a 'Prettier' thing rather than TailwindCSS thing.
I've had this issue for the past few days and I've managed to solve it after hours of wasted time and I still don't know what precisely fixed it, but here's what I did, hopefully it will help someone else out.
Just note, everything was working normally for me, then it stopped for no apparent reason, in the end I solved it by getting frustrated and I just brute forcing my way out, here's the finals steps I took:
- I deleted 'the.prettierrc.json' file altogether
- Settings -> Search: 'prettier' -> Uncheck the 'Prettier:Require Config' box.
- I disabled pretty much any extension I wasn't using. I was trying to target formatting apps and decided on a big clean up.
- I opened a file to test with -> CTRL + SHIFT + P-> 'Format Document With'
This resulted in a prompt I hadn't had previously which asked me to choose my default formatter
-> Choose 'Prettier'.
One of those things did it, now I'm back in business.