优雅地整理你的Tailwind CSS类：Prettier-plugin-tailwindcss

最新推荐文章于 2025-03-31 18:10:03 发布

俞兰莎Rosalind

最新推荐文章于 2025-03-31 18:10:03 发布

阅读量448

点赞数 4

本文链接：https://blog.csdn.net/gitblog_01071/article/details/141050923

版权

优雅地整理你的Tailwind CSS类：Prettier-plugin-tailwindcss

prettier-plugin-tailwindcssA Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.项目地址:https://gitcode.com/gh_mirrors/pr/prettier-plugin-tailwindcss

prettier-plugin-tailwindcss

如果你是Tailwind CSS的忠实用户，并且你也信赖Prettier来维护代码整洁，那么【Prettier-plugin-tailwindcss】将是你不可多得的利器。这款插件专为Prettier 3.0+设计，旨在帮助你自动排序Tailwind CSS 3.0+的类，以遵循官方推荐的最佳实践。

安装与配置

在你的项目中启动这个旅程只需几步简单的操作：

首先，通过以下命令安装必要的依赖：

npm install -D prettier prettier-plugin-tailwindcss

然后，在你的Prettier配置文件（如 .prettierrc）中添加插件：

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

对于那些升级到v0.5.x的用户，请注意这个版本需要Prettier v3且仅支持ESM，具体升级指南可参考相关链接。

功能特性

自定义Tailwind配置路径

默认情况下，插件会在Prettier配置文件所在目录查找tailwind.config.js。如果需要自定义位置，可以利用tailwindConfig选项指定。

排序非标准属性

默认支持class和框架特定的属性如className、:class和[ngClass]等，以及Tailwind的@apply指令。你可以通过tailwindAttributes扩展要排序的其他属性。

在函数调用中排序类

例如使用clsx库时，可以通过tailwindFunctions选项来设置，这样函数调用中的类也将得到有序处理。

在模板字面量中排序

配合类似twrnc这样的库，或者创建自己的身份函数，可以使用tailwindFunctions在模板字面量中进行排序。

保留空白和重复类

插件默认移除冗余空格以保持一致格式。若想保留空白，可启用tailwindPreserveWhitespace；而若需保留重复类，可以启用tailwindPreserveDuplicates。

应用场景

无论是Web开发中的HTML、JSX，还是其他模板语言如Pug或Blade，Prettier-plugin-tailwindcss都能派上大用场。它能确保你的Tailwind CSS类始终按照最佳顺序排列，避免手动调整，从而提升编码效率，保持团队间的一致性。

示例

让我们看一个简单的JSX例子：

function MyButton({ children }) {
  return (
    <button 
      className="rounded bg-blue-500 px-4 py-2 text-base text-white">
      {children}
    </button>
  );
}

插件将自动整理为：

function MyButton({ children }) {
  return (
    <button 
      className="rounded bg-blue-500 text-white text-base px-4 py-2">
      {children}
    </button>
  );
}

可以看到，类按官方推荐的顺序进行了排序，并删除了不必要的空格。