prettier-plugin-tailwindcss: Plugin is incompatible with Prettier v3.0

Hey! For now we’d recommend downgrading to v2.8. Prettier v3.0 has some API changes that’ll require a good bit of work and testing for our plugin. But it’s on our radar! I’m going to be looking into this later this week or early next week.

Hey all! We’ve just released v0.4.0 with support for both Prettier v2.x and v3.0.

Please note that many plugins have yet to be updated for Prettier v3 so the third-party plugin compatibility has been temporarily disabled when using Prettier v3. Once plugins start migrating we will test them and do another release that implements compatibility with working third-party plugins where possible.

So, for example, Svelte, Twig (Melody), Pug, Astro, etc… are not currently supported. We’ll be keeping an eye on the plugins once they’ve updated and work toward another release which re-enables support.

Please give the new version a test and open a new issue if you see any problems. Thanks for your patience! ✨

You dont need to downgrade, just add this line “plugins”: [“prettier-plugin-tailwindcss”] to .prettierrc.json

Node.js Version: v18.16.0 Package Manager: npm Operating System: macOS

Here to confirm that rolling back to prettier v2.8 resolved the issue. Commands used:

1. npm uninstall prettier prettier-plugin-tailwindcss
2. npm install -D prettier@2.8 prettier-plugin-tailwindcss

@RnbWd, they did warn about the breaking changes about 8 month ago in https://github.com/prettier/prettier/issues/13616 and even left a message about it in tailwindcss repo https://github.com/tailwindlabs/tailwindcss/discussions/9602 that was ignored

Same issue here after upgrading to prettier 3.0

even left a message about it in tailwindcss repo https://github.com/tailwindlabs/tailwindcss/discussions/9602 that was ignored

Just to be clear here we didn’t ignore it, we simply didn’t see it. The discussion area is for the community, it’s not an inbox for the team where we read every message. I see maybe 5% of messages posted there.

reading the prettier 3.0 docs was a headache for me, I had no idea they were going to completely break almost all plugins overnight with no warning. It’s not a small change at all. I’ll be sticking with v2 for the next 6 months.

It seems that you are currently utilizing prettier version 3.0.0. Please consider a temporary downgrade to version 2.8.8.

For folks using vs code that are still having issues with version 2.8.8, you could try installing the specific Prettier extension version 9.13.0. I’ve found some backwards compatibility issues with the latest extension version. https://marketplace.visualstudio.com/items/esbenp.prettier-vscode/changelog

@mutheusalmeida

Hi, guys. I downgraded and it’s still not working. My .prettierrc using Vite:

I don’t know if this will work for you but after downgrading I had to reload my vscode for it to start working for me. I’m not using a .prettierrc file though. I’m just using the prettier extension.

While we’re at it, I also noticed that prettier recently removed plugin autoloading (https://github.com/prettier/prettier/pull/14759) in version 3.0.0, breaking configurations that rely on autoloading as the docs for this plugin recommend.

You dont need to downgrade, just add this line “plugins”: [“prettier-plugin-tailwindcss”] to .prettierrc.json

In a JS file also works .prettierrc.js

module.exports = {
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  arrowParens: 'always',
  jsxSingleQuote: false,
  printWidth: 120,
  plugins: ['prettier-plugin-tailwindcss'],
}

Took me way too long to get this to work, getting confused by the comments above… It was actually very simple and straight forward to get it to work with the 3.x branch of prettier. This is what worked for me:

1. npm install -D prettier prettier-plugin-tailwindcss At the moment of writing
   • prettier v3.0.0
   • prettier-plugin-tailwindcss v0.4.1
2. Then in .prettierrc.json

{
  "semi": false,
  "tabWidth": 2,
  // [..]
  "plugins": ["prettier-plugin-tailwindcss"]
}

prettier.config.js

module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
}

@martinharyanto Without the require()

It is not a workaround, it it the new way to implement. Cause is the removed plugin autoloading in prettier v3 because of problems with package managers except npm.

You dont need to downgrade, just add this line “plugins”: [“prettier-plugin-tailwindcss”] to .prettierrc.json

Works for me!

Spent 3 hours on this (first time installation and first time prettier config). Works after downgrade. Thought I was losing my mind

After downgrade, it`s works fine for me

My bad, its probably the vscode tailwind extension issue, because it does not automatically pick up the plugin anymore, so I have to add it to .prettierrc.json explicitly.

The plugin search feature has been removed.

Because it’s fixed!

You dont need to downgrade, just add this line “plugins”: [“prettier-plugin-tailwindcss”] to .prettierrc.json

In a JS file also works .prettierrc.js

module.exports = {
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  arrowParens: 'always',
  jsxSingleQuote: false,
  printWidth: 120,
  plugins: ['prettier-plugin-tailwindcss'],
}

It just works with a .json file. Anyone know whats the matter?

@vighnesh153 I’m pretty sure this is a change in Prettier itself rather than with our plugin. It may be related to the removal of plugin autoloading in Prettier v3 which means that you may need to specify the full path to the plugin.

@debashisbiswas The docs for this plugin explicitly recommended against autoloading and gave instructions for disabling it (when using it in conjunction with any other “compatible” plugin).

We’ll update the docs to remove any mention of autoloading once we’ve updated for v3.0.