人们在讨论如何在 Tailwind 项目中最好地排序您的实用类，已经 至少有四年了。今天我们很高兴地宣布，随着我们正式发布的 Prettier 插件，您终于可以不再担心这个问题。
该插件扫描您的模板中的类属性，查找包含 Tailwind CSS 类的属性，然后自动按照我们的 推荐类顺序 对这些类进行排序。
<!-- 排序前 --><button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button><!-- 排序后 --><button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>它与自定义的 Tailwind 配置无缝兼容，而且因为它仅仅是一个 Prettier 插件，所以它可以在任何 Prettier 可以工作的地方工作——包括每个流行的编辑器和 IDE，当然也包括命令行。
要开始使用，请将 prettier-plugin-tailwindcss 安装为开发依赖：
npm install -D prettier prettier-plugin-tailwindcss然后将插件添加到您的 Prettier 配置文件 中：
{ "plugins": ["prettier-plugin-tailwindcss"]}您还可以 通过使用 Prettier CLI 的 --plugin 标志或通过使用 Prettier API 的 plugins 选项加载插件。
类是如何排序的
从根本上讲，该插件的功能就是按 Tailwind 在 CSS 中的顺序来组织您的类。
这意味着基础层中的任何类会首先被排序，接着是组件层中的类，最后是实用层中的类。
<!-- `container` 是一个组件，所以它排在前面 --><div class="container mx-auto px-6"> <!-- ... --></div>实用类本身也是按照我们在 CSS 中对其进行排序的顺序，这意味着任何覆盖其他类的类总是出现在类列表后面：
<div class="pt-2 p-4"><div class="p-4 pt-2"> <!-- ... --> </div></div>不同实用类的实际顺序大致是基于盒模型，并努力将对布局影响较大的高影响类放在前面，将装饰类放在最后，同时也努力保持相关实用类在一起：
<div class="text-gray-700 shadow-md p-3 border-gray-300 ml-4 h-24 flex border-2"><div class="ml-4 flex h-24 border-2 border-gray-300 p-3 text-gray-700 shadow-md"> <!-- ... --> </div></div>修饰符如 hover: 和 focus: 被一起分组，并在任何普通实用类之后进行排序：
<div class="hover:opacity-75 opacity-50 hover:scale-150 scale-125"><div class="scale-125 opacity-50 hover:scale-150 hover:opacity-75"> <!-- ... --> </div></div>响应式修饰符如 md: 和 lg: 被一起分组，按照您在主题中配置的顺序排列——默认从小到大：
<div class="lg:grid-cols-4 grid sm:grid-cols-3 grid-cols-2"><div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4"> <!-- ... --> </div></div>任何不来自 Tailwind 插件的自定义类（例如用于目标第三方库的类）始终排在前面，因此可以很容易地看到一个元素是否使用它们：
<div class="p-3 shadow-xl select2-dropdown"><div class="select2-dropdown p-3 shadow-xl"> <!-- ... --> </div></div>自定义
我们认为 Prettier 做得很好，在提供有限的可定制性方面持有坚定的态度——归根结底，排序类最大的好处是，这只是让您和团队之间争论少了一件事。
我们很努力地尝试提出一种容易理解的排序顺序，并尽快传达最重要的信息。
该插件 将 尊重您的 tailwind.config.js 文件，并与您安装的任何 Tailwind 插件一起工作，但 没有办法更改排序顺序。就像使用 Prettier 一样，我们认为自动格式化的好处将很快超过您所拥有的任何风格偏好，您也会很快习惯它。
准备好尝试了吗？ 查看 GitHub 上的完整文档 →