tailwindlabs / prettier-plugin-tailwindcss

A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.
MIT License
5.67k stars 134 forks source link

Plugin not working #191

Closed AndreiBadescu closed 1 year ago

AndreiBadescu commented 1 year ago

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.

ironbyte commented 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

thecrypticace commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

androfficial commented 1 year ago

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 commented 1 year ago

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 commented 11 months ago

I solved this problem with reopen my Visual Studio Code.

kr0xm commented 10 months ago

Solved with reopen the Visual Studio Code.

you are the king, thanks :D

balanCORE commented 10 months ago

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

poznianski commented 10 months ago

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 commented 9 months ago

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 commented 6 months ago

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 commented 5 months ago

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 commented 5 months ago

@juliansommer it's in the readme:

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

juliansommer commented 5 months ago

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

joshdoesthis commented 5 months ago

I solved this problem with reopen my Visual Studio Code.

This worked for me. 💯

Chaoyingz commented 5 months ago

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.