无法让 prettier-plugin-tailwindcss 在 Nextjs 应用程序上工作

Question

因此，我的 nextjs 应用程序通常配置了 tailwind，然后运行命令来npm安装 prettier 和 prettier tailwind 插件，据我了解，它应该立即工作。

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

我没有添加任何更漂亮的配置文件或任何东西。只是我的顺风配置文件，也不包含与插件相关的任何内容。

Prettier 插件自动加载出现问题，但不知道如何修复它。

Answer 1

我认为这个问题可能是由 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 问题

编辑：

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

npm install -D prettier prettier-plugin-tailwindcss

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

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

最后，确保重新加载 Visual Studio Code 以使更改生效。欲了解更多信息，请参阅此GitHub 评论。