I go this working. I had to add the path to my prettier config in my .vscode/setttings.json file.
Sorting with external plugins like Svelte, Astro, etc… not working when using Prettier v3
Plugin not working
Astro extension doesn't use `prettier-plugin-tailwindcss` when formatting
🐛 BUG: prettier-plugin-tailwindcss doesn't work in .astro files
Can I customize the Prettier configuration to match my coding style?
Of course! Feel free to tweak the .prettierrc file to match your preferred coding style. You can find the full list of configuration options in the official Prettier documentation.
Can I use Prettier with other frameworks or libraries?
Yes, Prettier is highly versatile and can be used with various frameworks and libraries. However, you may need to install additional plugins or adjust your configuration.
I just encountered this problem even though I had everything installed and setup correctly. It got resolved after reloading VS Code through "Command Palette (CTRL + SHIFT + P) > Reload Window". Hope this helps!
I encountered this problem too before. Though I just tried adding the Tailwind Prettier plugin to a new Remix project and everything seems to be working. Here are the steps I performed:
Installed Tailwind
npm install -D tailwindcss postcss autoprefixer concurrentlyAfter finishing all the steps outlined in the link above, I ran
npm install -D prettier prettier-plugin-tailwindcss
I don't have a prettier config file in place. I'm able to run Prettier through vscode and I can confirm that the Tailwind classes are automatically sorted.
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"]
}
» npm install prettier-plugin-tailwindcss
Got into Tailwind last year when developing a personal project and ended up loving it, but disliked the utility class name bloat so I decided to make a VS Code formatter extension to prevent me from going insane. Hoping this helps anyone else out there with the same frustrations.
(Currently only JSX/TSX files supported, but I'm working on potential multi-language support for the next version. The code is open-source and can be found here: GitHub Repo)
Let me know if you find any bugs or issues. And if you liked the extension, please consider a rating/review, a star on the repo, or maybe even a sponsor :) or feel free to just share it around!
Tailwind Formatter Extension DemoExtension Link: https://marketplace.visualstudio.com/items?itemName=Myhtica.tailwind-formatter