Adding this line "plugins": ["prettier-plugin-tailwindcss"], to my .prettierrc.json file made the tailwind class sorting work for me. I'm using prettier 3.1.0 and prettier-plugin-tailwindcss 0.5.7
Answer from DeepThunder on Stack Overflowvisual studio code - prettier-tailwind-plugin isn't working as expected when I hit save in VSCode - Stack Overflow
I spent over two hours trying to get Prettier to work with prettier-plugin-tailwindcss. Anyone here using it?
Lost trying to get prettier-plugin-tailwindcss working
[Prettier Plugin]
Videos
» npm install prettier-plugin-tailwind-css
Adding this line "plugins": ["prettier-plugin-tailwindcss"], to my .prettierrc.json file made the tailwind class sorting work for me. I'm using prettier 3.1.0 and prettier-plugin-tailwindcss 0.5.7
I tried everything but after following the plugin's documentation etc, the only thing that worked for me was putting the "prettier-plugin-tailwindcss" at the end (IMPORTANT) in the array, the order matters. (I had another plugin), the end result looks like this:
I'm also using "twin.macro"
.prettierrc
{
"plugins": [
"prettier-plugin-organize-imports",
"prettier-plugin-tailwindcss"
],
"tailwindConfig": "./tailwind.config.ts",
"tailwindAttributes": ["tw"],
"tailwindFunctions": ["tw"]
}
Edit: For anyone wondering: The Tailwind Prettier Plugin is not comptible with Prettier v3.0 (https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/176). You have to downgrade to v2.8.8
As soon as I add the plugins line to .prettierrc Prettier won't work anymore at all.
» npm install prettier-plugin-tailwindcss