prettier-tailwind-plugin isn't working as expected when I hit save in VSCode

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.

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:

1. I deleted 'the.prettierrc.json' file altogether
2. Settings -> Search: 'prettier' -> Uncheck the 'Prettier:Require Config' box.
3. I disabled pretty much any extension I wasn't using. I was trying to target formatting apps and decided on a big clean up.
4. 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.