Question 134319 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – 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.“

package.json

.prettierrc.json

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.

settings

Tags:

2

Answers


  1. 0

    Go to Settings > Text Editor > Formatting and select "Format on Save".

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search