Can't get prettier-plugin-tailwindcss to work on Nextjs App

Question

So I had my nextjs app configured with tailwind normally then ran the command to npm install prettier and the prettier tailwind plugin and as I understand, it should work right away.

My default formatter in vscode is Prettier, I made sure of that and my files are formatted using Prettier when I save but the classes aren't sorted.

I didn't add any prettier config files or anything. Just my tailwind config file and that doesn't include anything related to the plugin either.

Something's wrong with the prettier plugin autoloading but idk how to fix it.

Answer 1

I think this problem might be caused by changes in Prettier v3.0. You can try fixing it by going back to Prettier v2.8.8 with these steps:

npm uninstall prettier prettier-plugin-tailwindcss

npm install -D [email protected] [email protected]

Plugin is incompatible with Prettier v3.0 - github issue

Edit:

As of the prettier-plugin-tailwindcss version 0.5.4, this issue should now be resolved. You can update your dependencies with the following commands:

npm install -D prettier prettier-plugin-tailwindcss

Additionally, don't forget to include the following configuration in your prettier.config.js file:

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

Lastly, make sure to reload Visual Studio Code for the changes to take effect. For more information, please refer to this GitHub comment.