Plugin not working

[andreibade]

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.

[ironheart122]

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: #176 (comment)

[thecrypticace]

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.

[vectorcr]

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.

[michaelbonner]

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"]
}

[thecrypticace]

Hey all gonna close this in favor of #186 since it's the same issue.

[androfficial]

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

[yacineahmaich]

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" ]

[feri-irawan]

I solved this problem with reopen my Visual Studio Code.

[kr0xm]

Solved with reopen the Visual Studio Code.

you are the king, thanks :D

[balanCORE]

check OUTPUT tab in VS Code console for errors too :)

[poznianski]

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

[usama-rahman]

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

[adnjoo]

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" ]

[juliansommer]

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

[thecrypticace]

@juliansommer it's in the readme:

One limitation with this approach is that prettier-plugin-tailwindcss must be loaded last.

[juliansommer]

@thecrypticace oops didn't realise. I have other projects with prettier-plugin-tailwindcss being the first import so didn't suspect it.

[joshdoesthis]

I solved this problem with reopen my Visual Studio Code.

This worked for me. 💯

[Chaoyingz]

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.