为什么需要类名自动排序？
在真实项目开发中，我们采用的都是多人协同开发，此时必然会出现这种情况：团队每个人的书写 CSS 的习惯可能都是不同的。有的人喜欢先写颜色，有的人喜欢先写外边距，还有的人习惯把 hover 状态插在中间。
这样很可能会导致同一个样式的按钮，在不同页面里的类名顺序完全不一样，然后极大地增加了后期的代码审查和维护成本。
Tailwind CSS 官方推荐的CSS 排序逻辑非常科学，它遵循着 “由外到内、由结构到细节” 的层次规律。这也与业界（也包括咱们绿叶网）推荐的 CSS 属性书写顺序高度一致。
| 层级 | 类别 | 示例 |
|---|---|---|
| 1 | 定位与布局 | absolute、z-10、flex、grid、gap-4 |
| 2 | 盒模型与尺寸 | w-full、h-10、m-4、p-6、box-border |
| 3 | 文字排版 | text-center、text-lg、font-bold、text-white |
| 4 | 视觉外观 | bg-green-500、border、rounded-xl、shadow-md |
| 5 | 交互与状态 | hover:bg-green-600、focus:ring、transition-all |
安装官方插件
Tailwind CSS 官方提供了一个名为 “prettier-plugin-tailwindcss” 的插件。我们只要配置好它，然后每次保存文件（Ctrl + S 或 Cmd + S）时，编辑器就会自动把凌乱的类名排好序，非常的方便。只需要以下简单的 3 步即可：
1. 安装依赖
在前端项目（Vue 或 React）中，打开终端执行以下命令来安装 Prettier 相关插件：
npm install -D prettier prettier-plugin-tailwindcss2. 配置 Prettier
在项目根目录下创建一个名为 “.prettierrc” 的配置文件，并写入以下内容来告诉 Prettier 启用该插件：
{
"plugins": ["prettier-plugin-tailwindcss"]
}3. 配置 VSCode
首先，我们需要在 VSCode 中安装 “Prettier - Code formatter” 这个插件（非常重要）。然后还需要进行最后一步配置，也就是开启 VSCode 的 “保存时自动格式化（Format On Save）”。
在 VSCode 的左上角，依次找到【文件】→【首选项】→【设置】，如下图所示。
然后，勾选【Format On Save】这一项，如下图所示。
配置完成之后，只要在 VSCode使用 “Ctrl + S” 保存文件，插件就会自动对 Tailwind CSS 类名进行排序了。
比如我们随便在一个 HTML 文件中写一段极度混乱的类名：
<div class="bg-red-500 p-4 hover:bg-red-600 absolute z-10 w-full mt-4 flex"></div>然后按下 “Ctrl + S” 来保存，它就会瞬间被重构为符合行业标准的高级排版：
<div class="absolute z-10 flex w-full mt-4 p-4 bg-red-500 hover:bg-red-600"></div>最后有小伙伴会问：“ 这个插件的排序规则我不是很习惯，可以自定义修改吗？”其实是不可以的，而且这也是 Tailwind CSS 官方有意为之的设计。
Tailwind CSS 官方插件是一个强预设工具，它不提供任何自定义排序规则的配置项。这样做的目的是为了保证：无论谁写的代码，包括你在全网阅读哪个开源项目，Tailwind 类名的顺序都是绝对统一的。习惯了这套全球通用标准后，你会发现阅读别人的代码就像阅读自己的一样顺畅。
