人们一直在讨论在 Tailwind 项目中最好如何排序实用工具类的问题，这已经至少持续了四年。今天，我们很高兴地宣布，随着我们发布 Tailwind CSS 的官方 Prettier 插件，您终于可以不用再为此烦恼了。
这个插件会扫描您的模板中包含 Tailwind CSS 类的 class 属性，然后按照我们推荐的类排序方式自动排序这些类。
<!-- Before --><button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button><!-- After --><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="p-4 pt-2"><div class="p-4 pt-2"> <!-- ... --> </div></div>不同实用程序的实际顺序大致基于盒模型，并尝试将影响布局的高影响类放在开头，将装饰类放在末尾，同时尝试将相关的实用程序放在一起：
<div class="ml-4 flex h-24 border-2 border-gray-300 p-3 text-gray-700 shadow-md"><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="scale-125 opacity-50 hover:scale-150 hover:opacity-75"><div class="scale-125 opacity-50 hover:scale-150 hover:opacity-75"> <!-- ... --> </div></div>像 md: 和 lg: 这样的响应式修饰符被分组在末尾，并按照它们在主题中配置的顺序排序 — 默认情况下是从最小到最大：
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4"><div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4"> <!-- ... --> </div></div>任何不来自 Tailwind 插件的自定义类（例如用于定位第三方库的类）总是排在最前面，因此很容易看到元素何时使用它们：
<div class="select2-dropdown p-3 shadow-xl"><div class="select2-dropdown p-3 shadow-xl"> <!-- ... --> </div></div>自定义
我们认为 Prettier 是对的，在提供有限的自定义选项方面是有道理的 — 归根结底，排序类的最大好处是它只是减少了与团队争论的一个问题。
我们非常努力地提出了一个易于理解的排序顺序，并尽可能快地传达最重要的信息。
该插件 会 尊重您的 tailwind.config.js 文件并与您安装的任何 Tailwind 插件一起工作，但无法更改排序顺序。就像 Prettier 一样，我们认为自动格式化的好处很快就会超过您的任何风格偏好，并且您会很快习惯它。
准备好试试了吗？在 GitHub 上查看完整文档 →