使用 Prettier 自动排序类

人们一直在讨论在 Tailwind 项目中排序实用程序类的最佳方式，至少四年了。今天，我们很高兴地宣布，随着我们官方 Tailwind CSS 的 Prettier 插件的发布，您终于可以不再为此担心了。

此插件会扫描您的模板以查找包含 Tailwind CSS 类的类属性，然后根据我们的推荐的类顺序自动排序这些类。

HTML

<!-- Before -->
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</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 配置文件中

.prettierrc

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

您也可以使用 --plugin 标志与 Prettier CLI 或使用 plugins 选项与 Prettier API 加载插件。

类如何排序

从本质上讲，此插件所做的就是以与 Tailwind 在您的 CSS 中排序相同的顺序组织您的类。

这意味着基础层中的任何类都将首先排序，然后是组件层中的类，最后是实用程序层中的类。

<!-- `container` is a component so it comes first -->
<div class="container mx-auto px-6">
  <!-- ... -->
</div>

实用程序本身也按照我们在 CSS 中排序的顺序排序，这意味着任何覆盖其他类的类始终出现在类列表的后面

<div class="pt-2 p-4">
<div class="p-4 pt-2">
  <!-- ... -->
</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>

像 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>

像 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>

任何来自 Tailwind 插件以外的自定义类（例如针对第三方库的类）始终会被排序到最前面，因此很容易看到元素何时使用它们。

<div class="p-3 shadow-xl select2-dropdown">
<div class="select2-dropdown p-3 shadow-xl">
  <!-- ... -->
</div>

自定义

我们认为 Prettier 做得很好，因为它在提供意见和自定义选项方面很少——归根结底，对你的类进行排序的最大好处是，它减少了与团队争论的理由。

我们已经非常努力地想出一个排序顺序，它易于理解，并能尽快传达最重要的信息。

该插件会尊重你的 tailwind.config.js 文件，并与你安装的任何 Tailwind 插件一起工作，但无法更改排序顺序。就像 Prettier 一样，我们认为自动格式化的优势很快就会超过你对任何风格偏好的影响，你很快就会习惯它。

​类如何排序

​自定义

类如何排序

自定义