Closed AndreiBadescu closed 1 year ago
Ah, been there. Rename your prettier config file to exactly this: .prettierrc.json
.
Only the JSON file type works (bug?) for me at least.
Source: https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/176#issuecomment-1644238039
Copying my reply from #186:
Hi! When we released v3 Svelte, Astro, and all suppored plugins from v2 (as far as I know) had not yet updated. We temporarily disabled support for external plugins because of this — when using v3 only (because there's no way we would be able to shim v2 -> v3 for external plugins).
I'm taking a look at all our previously supported plugins on Monday (today) and will try to get a release out Monday/Tuesday with any that have updated.
Copying my reply from #186:
Hi! When we released v3 Svelte, Astro, and all suppored plugins from v2 (as far as I know) had not yet updated. We temporarily disabled support for external plugins because of this — when using v3 only (because there's no way we would be able to shim v2 -> v3 for external plugins).
I'm taking a look at all our previously supported plugins on Monday (today) and will try to get a release out Monday/Tuesday with any that have updated.
I was able to get it working following the link. I was running into the same issue on vite project and adding the lines into my .prettierrc.json file did the trick.
Just in case it's helpful to anyone: here's what I put in my .prettierrc.json
to get it working:
{
"plugins": ["prettier-plugin-tailwindcss"]
}
Hey all gonna close this in favor of #186 since it's the same issue.
Just in case it's helpful to anyone: here's what I put in my
.prettierrc.json
to get it working:{ "plugins": ["prettier-plugin-tailwindcss"] }
Thanks. Then you can delete prettier.config.js
After trying all the above solutions without any result I get it working by changing the order of the plugin in the plugin array
before
"plugins": [ "prettier-plugin-tailwindcss", "prettier-plugin-organize-imports" ]
after
"plugins": [ "prettier-plugin-organize-imports", "prettier-plugin-tailwindcss" ]
I solved this problem with reopen my Visual Studio Code.
Solved with reopen the Visual Studio Code.
you are the king, thanks :D
check OUTPUT tab in VS Code console for errors too :)
After trying all the above solutions without any result I get it working by changing the order of the plugin in the plugin array
before
"plugins": [ "prettier-plugin-tailwindcss", "prettier-plugin-organize-imports" ]
after
"plugins": [ "prettier-plugin-organize-imports", "prettier-plugin-tailwindcss" ]
God bless you! :D
Just in case it's helpful to anyone: here's what I put in my
.prettierrc.json
to get it working:{ "plugins": ["prettier-plugin-tailwindcss"] }
Thanks :) - That's Works
had the same issue with @trivago/prettier-plugin-sort-imports
before
"plugins": [ "prettier-plugin-tailwindcss", "@trivago/prettier-plugin-sort-imports" ]
after
"plugins": [ "@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss" ]
After trying all the above solutions without any result I get it working by changing the order of the plugin in the plugin array
before
"plugins": [ "prettier-plugin-tailwindcss", "prettier-plugin-organize-imports" ]
after
"plugins": [ "prettier-plugin-organize-imports", "prettier-plugin-tailwindcss" ]
thank you so much. can confirm it takes doing that + using .prettierc not prettier.config.js to fix, and potentially using > prettier 3.3.0 too
@juliansommer it's in the readme:
One limitation with this approach is that prettier-plugin-tailwindcss must be loaded last.
@thecrypticace oops didn't realise. I have other projects with prettier-plugin-tailwindcss being the first import so didn't suspect it.
I solved this problem with reopen my Visual Studio Code.
This worked for me. 💯
had the same issue with
@trivago/prettier-plugin-sort-imports
before
"plugins": [ "prettier-plugin-tailwindcss", "@trivago/prettier-plugin-sort-imports" ]
after
"plugins": [ "@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss" ]
If it still doesn't work, try restarting VSCode.
What version of
prettier-plugin-tailwindcss
are you using?"prettier": "^3.0.0",
What version of Tailwind CSS are you using?
"tailwindcss": "^3.3.3"
What version of Node.js are you using?
Node.js v18.17.0
What package manager are you using?
npm
What operating system are you using?
macOS
Reproduction URL
No need. Here's a snippet of my prettier.config.cjs: `/* @type {import("prettier").Options} / const config = { trailingComma: "es5", tabWidth: 2, semi: false, singleQuote: true, printWidth: 999, singleAttributePerLine: false, useTabs: false, plugins: ["prettier-plugin-tailwindcss"], tailwindConfig: "./tailwind.config.cjs", };
module.exports = config;
tailwind.config.cjs
/* @type {import('tailwindcss').Config} / module.exports = { content: ["./src/*/.{html,js,svelte,ts}"], theme: { extend: {}, }, plugins: [], }; `Describe your issue
prettier-plugin-tailwindcss simply doesn't work when I save. No class is shifted. I use this plugin in my astro project inside svelte components where I have tailwind.