英文:

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

问题

所以我已经按照正常步骤配置了我的Next.js应用程序，然后运行了npm安装prettier和prettier tailwind插件的命令，据我了解，它应该立即工作。

我的VSCode中默认的格式化程序是Prettier，我确保了这一点，并且当我保存时，我的文件会使用Prettier进行格式化，但类没有排序。

我没有添加任何prettier配置文件或其他内容。只有我的tailwind配置文件，而这也不包括与插件有关的任何内容。

prettier插件的自动加载似乎有问题，但我不知道如何修复它。

英文:

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.

答案1

得分: 6

我认为这个问题可能是由于 Prettier v3.0 中的更改引起的。您可以尝试按照以下步骤返回到 Prettier v2.8.8 以解决它：

npm uninstall prettier prettier-plugin-tailwindcss

npm install -D prettier@2.8.8 prettier-plugin-tailwindcss@0.4.1

[插件与 Prettier v3.0 不兼容 - GitHub 问题][1]

编辑：

从 prettier-plugin-tailwindcss 版本 0.5.4 起，这个问题应该已经得到解决。您可以使用以下命令更新您的依赖项：

npm install -D prettier prettier-plugin-tailwindcss

另外，请不要忘记在您的 prettier.config.js 文件中包含以下配置：

  plugins: ['prettier-plugin-tailwindcss'],
}```

最后，请确保重新加载 Visual Studio Code 以使更改生效。有关更多信息，请参阅这个 [GitHub 评论][2]。

  [1]: https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/176
  [2]: https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/207#issuecomment-1698071122

<details>
<summary>英文:</summary>

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 prettier@2.8.8 prettier-plugin-tailwindcss@0.4.1

[Plugin is incompatible with Prettier v3.0 - github issue][1]


**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&#39;t forget to include the following configuration in your prettier.config.js file:

    module.exports = {
      plugins: [&#39;prettier-plugin-tailwindcss&#39;],
    }


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


  [1]: https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/176
  [2]: https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/207#issuecomment-1698071122

</details>