prettier-plugin-tailwindcss: Prettier plugin not working with vs code and nextjs project

Can confirm broken from my end as well – prettier works on save if remove prettier-plugin-tailwindcss from prettier.config.js.

    "prettier": "^3.0.0",
    "prettier-plugin-tailwindcss": "^0.3.0",

Running Remix here, so nothing to do w/ Nextjs (may want to edit title)

Wasn’t working for me either, but I put the version for prettier “^2” and deleted my package-lock.json and reinstalled the packages.

Afterwards reloaded the VSCode window and it worked. Try to do those steps exactly like I did and see if it works for you.

Wasn’t working for me either, but I put the version for prettier “^2” and deleted my package-lock.json and reinstalled the packages.

Afterwards reloaded the VSCode window and it worked. Try to do those steps exactly like I did and see if it works for you.

Thanks @HenrijsS. It has worked for me.

"prettier": "^2.8.7",
 "prettier-plugin-tailwindcss": "^0.3.0",
 "tailwindcss": "^3.3.2"

If the problem still persists, try the package combo above.

As @HenrijsS mentioned,

• Install prettier": "^2.8.7 (Note: I tried with prev. 2.8.8, But doesn’t work).
• Delete package-lock.json file.
• Reinstall the packages using npm install
• Close and Reopen the VSCode.

Same here, I get this error in the Prettier output pane:

["ERROR" - 02:21:52] Error resolving prettier configuration for [...]
["ERROR" - 02:21:52] Cannot read properties of undefined (reading 'parsers')

UPDATE: I fixed it by downgrading to Prettier 2.8.8 and restarting VS Code.

For reference: https://github.com/prettier/prettier/issues/15020

facing same issue

@vestimir I replicated your setup from that information (except I’m on an M1 Max MacBook Pro and use fnm to manage Node versions). Format on save is working for me. It could be that you have an outdated prettier extension installed perhaps (I’m using v9.19.0 — which looks to be the latest)?

I installed deps using npm. If you’re using PNPM or Yarn v2/v3 PnP I’d try using npm install to see if that fixes it. Both have known problems with Prettier itself — especially in conjunction with the VSCode extension.

https://github.com/tailwindlabs/prettier-plugin-tailwindcss/assets/614993/73ab9baf-8715-4b0f-9dc4-a38fbe630b33

You can check to see if the prettier extension is even running on save by opening up the output window for it:

https://github.com/tailwindlabs/prettier-plugin-tailwindcss/assets/614993/204ddc83-0aed-4f7d-b3c9-19909d977aeb

Hey, I updated the plugin to v0.4.0 and prettier to v3.0.0, but it’s somehow still not working for me in my Next.js project. Previously, I was using v0.3.0 of the plugin and v2.8.8 of Prettier, which worked flawlessly (exact same enviroment). Can someone help me troubleshoot this? Let me know if you need any additional information. Thanks!

This also happened to me, but i fixed it with

1. If you don’t have any prettier configuration file or prettierrc, create new / change it to prettier.config.js
2. Add this inside prettier.config.js

module.exports = {
  ... any config that you may have inside prettierrc
  plugins: ["prettier-plugin-tailwindcss"], <-- add this line
};

1. Reload vscode

Make sure that you have the right version of prettier tailwind plugin package.

This is my version.

"prettier": "^3.0.0",
"prettier-plugin-tailwindcss": "^0.4.0",

hope this help

@Celarye a reproduction would be helpful here. Note: If you were relying on autoloading to load the plugin that won’t work anymore as Prettier v3 has removed plugin autoloading entirely. You’ll need to explicitly specify that you’re using prettier-plugin-tailwindcss.

edit: also if you could, open a new issue with the reproduction please. It helps keep track of things so they don’t get lost in the noise.

Hey, I updated the plugin to v0.4.0 and prettier to v3.0.0, but it’s somehow still not working for me in my Next.js project. Previously, I was using v0.3.0 of the plugin and v2.8.8 of Prettier, which worked flawlessly (exact same enviroment). Can someone help me troubleshoot this? Let me know if you need any additional information. Thanks!

Hey! We’ve released v0.4.0 with Prettier v3 support which should fix any issues you all are having.

v0.4.0 works wonders! Thank you! I literally just encountered this issue 10 minutes ago! Glad it is now fixed!