The plugin isn't sorting the classes when I hit save but it works when npx prettier --write index.html

[codedrian]

What version of prettier-plugin-tailwindcss are you using?

0.2.4

What version of Tailwind CSS are you using?

3.2.7

What version of Node.js are you using?

v18.13.0

What package manager are you using?

NPM

What operating system are you using?

Ubuntu

Describe your issue
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, Prettier works but the prettier-plugin-tailwindcss doesn't sort the Tailwind classes as expected.

I just realized that I didn't set the "prettier.prettierPath" option in my VS Code settings to the path of the Prettier binary installed in my project's node_modules folder.

I tried this path but still the plugin is not working as expected when i hit save.
This is my repository:

[vinaykulk621]

you need to configure your VS code to format document using prettier

You can do it by right clicking on the code that you want to format using prettier. you will get a format document with option

You can set prettier as default.

for sort to work execute this command in teminal of your current working directory

echo {} > .prettierrc.json

or create a .prettierrc.json manually and add your prettier configuration init
for example your .prettierrc.json

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tabWidth": 2,
  "trailingComma": "es5",
  "semi": false
}

As for prettier.prettierPath it is needed if you have installed prettier globaly
above solution is for saving prettier as dev dependency.

[codedrian]

I'm sorry I forgot to mention, the prettier works but the plugin didn't. As you can see the container class should go first before the bg class. In this vide below I run the prettier using npx and the plugin works as expected but when i hit save just like in the fist video above the plugin didn't work.

2023-03-03_23-35-32.mp4

[vinaykulk621]

My package.json file looks like this

  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "dat.gui": "^0.7.9",
    "postcss": "^8.4.21",
    "prettier": "^2.8.4",
    "prettier-plugin-tailwindcss": "^0.2.3",
    "tailwindcss": "^3.2.4",
    "three": "^0.149.0"
  }

I ran this command to install that plugin as dev dependency

npm install -D prettier prettier-plugin-tailwindcss

Make sure to update your tailwind version.
it might be because of older version of tailwind.

i see you are missing postcss and autoprefixer.
I suggest you reinstall the tailwindcss again by deleting all the files and packages from your package.json file.

[ch33kaboo]

Hello there,

Regarding your issue with the prettier-plugin-tailwindcss not sorting the Tailwind classes when you hit save in VS Code, I encountered the same issue recently, and it seems like the problem could be related to the VS Code configuration and to using the latest versions of Prettier and prettier-plugin-tailwindcss.

I got it solved and here is what I did:

• Remove the directory where the VS Code configuration is stored. Note that this will delete any configuration you made on your VS Code or any installed extensions. You can find the directory somewhere in ~/.config.
• Add prettier and prettier-plugin-tailwindcss packages to your package.json. However, instead of using the latest versions of the packages, you I tried using older ones that worked for me. For example, the specific versions I used were "prettier": "^2.7.1" and "prettier-plugin-tailwindcss": "^0.1.13". To avoid installing the latest versions, you could run npm install [email protected] [email protected].
• Make sure you have the Prettier extension installed in VS Code and set it as the default formatter in your settings. Also, make sure the "format on save" option is enabled.

I hope these suggestions help you resolve the issue.

[gonzaleza61]

Sorry for the necro thanks for the fix man it worked!

[Slegendz]

Thanks @ch33kaboo it worked. Thanks a lot😊🙏

[blastuha]

TAILWIND FUCKING PIGS, I HAVE THE SAME PROBLEM, NO CLASS SORTING!!!! DO NORMAL INSCRUCTION PIDORASЫ ЕБУЧИЕ

[mybearworld]

It's not Tailwind's fault, Prettier updated. You need a .prettierrc.

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

[Dark-knight-a]

Guys,This worked for me.I think this will work for you 100%.

[NickNaskida]

This worked, thanks

[FabianMontoya]

Thanks!!, This worked

[Rewolbebol]

This actually worked !!

[karlosbenito]

use other version and it's work for me with npm install [email protected] [email protected] and restard VS Code

[baopowerpoint]

dont know what the heck with my tailwind sorting plugin, after trying to install older version, remove all the prettier configuration file, remove all plugin in my tailwind.config.js file, it actually works . I use prettier 2.7.1 and tailwind prettier 0.1.13

[baopowerpoint]

I found the solution. first of all you remove all your theme config, and then add 'prettier-plugin-tailwindcss' to plugins, restart vscode and add the theme config again :)

[Soliha17]

Yeah, i just restart vscode, working, cheers!

[wjthompso]

I'm using VSCode on a Mac and none of the proposed solutions above worked for me. I can get the Tailwind classes to sort when I use npx prettier --write <path-to-file> but otherwise it won't sort the classes for me.

[wjthompso]

Update: I had to ensure that prettier was the default formatter in VSCode, so I ended up having comment out (the commented out line) and add in this line in my settings.json:

    "[typescriptreact]": {
        // "editor.defaultFormatter": "vscode.typescript-language-features"
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true,
        "editor.formatOnType": false,
        "editor.formatOnPaste": false
    },

[chochodev]

I found the solution. first of all you remove all your theme config, and then add 'prettier-plugin-tailwindcss' to plugins, restart vscode and add the theme config again :)

Worked like a charm, thanks a lot

[ahmafi]

In case you are using other plugins as well, try changing the order of them, for example:

This doesn't work:

{
  "plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-organize-imports"]
}

This works:

{
  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
}

[Naes0]

Yep this worked for me too!

{
  "plugins": ["prettier-plugin-classnames", "prettier-plugin-tailwindcss"]
}

But now the first plugin for classname wrapping doesn't apply 😢

[matthiasweiss]

In case you are using other plugins as well, try changing the order of them, for example:

This doesn't work:

{
  "plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-organize-imports"]
}

This works:

{
  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
}

Wow, and I've been wondering what I broke...
Thank you!

[KushajveerSingh]

I had the same issue, with classes not being sorted. But npx prettier --write index.html seemed to be working.

The solution was to add Prettier as the default formatter in VSCode, specifically for HTML files.

"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},

I have no explanation as to why this works, but I wasted an hour trying to figure this out.

Hope this helps.

[AlexNeep]

I the same issue where npx prettier --write . was working but nothing was happening on save.

My issue was that I had a .vscode/settings.json file in my project that was overriding my VSCode settings.

Updating that (or removing it) to include "editor.defaultFormatter": "esbenp.prettier-vscode",, and then restarting worked for me.