人们一直在讨论在 Tailwind 项目中针对 at least four years 对实用程序类进行排序的最佳方法。今天，我们很高兴地宣布，随着我们官方 Prettier plugin for Tailwind CSS 的发布，你终于可以不再为此担忧了。
¥People have been talking about the best way to sort your utility classes in Tailwind projects for at least four years. Today we're excited to announce that you can finally stop worrying about it with the release of our official Prettier plugin for Tailwind CSS.
此插件会扫描你的模板，查找包含 Tailwind CSS 类的类属性，然后根据我们的 推荐的类顺序 自动对这些类进行排序。
¥This plugin scans your templates for class attributes containing Tailwind CSS classes, and then sorts those classes automatically following our recommended class order.
<!-- 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，当然也包括命令行。
¥It works seamlessly with custom Tailwind configurations, and because it's just a Prettier plugin, it works anywhere Prettier works — including every popular editor and IDE, and of course on the command line.
要开始使用，请将 prettier-plugin-tailwindcss 安装为开发依赖：
¥To get started, install prettier-plugin-tailwindcss as a dev-dependency:
npm install -D prettier prettier-plugin-tailwindcss然后将插件添加到你的 Prettier 配置文件 文件中：
¥Then add the plugin to your Prettier configuration file:
{ "plugins": ["prettier-plugin-tailwindcss"]}你也可以 使用 Prettier CLI 的 --plugin 标志加载插件，或使用 Prettier API 的 plugins 选项加载插件。
¥You can also load the plugin by using the --plugin flag with the Prettier CLI, or by using the plugins option with the Prettier API.
类如何排序(How classes are sorted)
¥How classes are sorted
这款插件的核心功能是按照 Tailwind 在 CSS 中排序的顺序来组织你的类。
¥At its core, all this plugin does is organize your classes in the same order that Tailwind orders them in your CSS.
这意味着基础层中的所有类都将首先排序，然后是组件层中的类，最后是实用程序层中的类。
¥This means that any classes in the base layer will be sorted first, followed by classes in the components layer, and then finally classes in the utilities layer.
<!-- `container` is a component so it comes first --><div class="container mx-auto px-6"> <!-- ... --></div>实用程序本身的排序顺序与我们在 CSS 中的排序顺序相同，这意味着任何覆盖其他类的类始终出现在类列表的较后位置：
¥Utilities themselves are sorted in the same order we sort them in the CSS as well, which means that any classes that override other classes always appear later in the class list:
<div class="pt-2 p-4"><div class="p-4 pt-2"> <!-- ... --> </div></div>不同实用程序的实际顺序大致基于盒子模型，并尝试将影响布局的高影响力类放在开头，将装饰性类放在结尾，同时尝试将相关的实用程序放在一起：
¥The actual order of the different utilities is loosely based on the box model, and tries to put high impact classes that affect the layout at the beginning and decorative classes at the end, while also trying to keep related utilities together:
<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: 这样的修饰符被分组在一起，并排序在任何普通实用程序之后：
¥Modifiers like hover: and focus: are grouped together and sorted after any plain utilities:
<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:）会按照它们在主题中的配置顺序分组到最后 - 默认是从小到大：
¥Responsive modifiers like md: and lg: are grouped together at the end in the same order they're configured in your theme — which is smallest to largest by default:
<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 插件的自定义类（例如用于第三方库的类）始终排在最前面，因此很容易看到元素何时使用了它们：
¥Any custom classes that don't come from Tailwind plugins (like classes for targeting a third-party library) are always sorted to the front, so it's easy to see when an element is using them:
<div class="p-3 shadow-xl select2-dropdown"><div class="select2-dropdown p-3 shadow-xl"> <!-- ... --> </div></div>自定义(Customization)
¥Customization
我们认为 Prettier 已安装右图 比较有态度，且缺乏可定制性 - 归根结底，对类进行排序的最大好处在于，它能减少与团队的争论。
¥We think Prettier gets it right when it comes to being opinionated and offering little in terms of customizability — at the end of the day the biggest benefit to sorting your classes is that it's just one less thing to argue with your team about.
我们一直努力设计一种易于理解的排序方式，并希望能够尽快传达最重要的信息。
¥We've tried really hard to come up with a sort order that is easy to understand and communicates the most important information as fast as possible.
该插件会遵循你的 tailwind.config.js 文件，并与你安装的任何 Tailwind 插件兼容，但无法更改排序顺序。与 Prettier 一样，我们认为自动格式化的优势很快就会超过你的任何风格偏好，而且你很快就会习惯它。
¥The plugin will respect your tailwind.config.js file and work with any Tailwind plugins you've installed, but there is no way to change the sort order. Just like with Prettier, we think that the benefits of auto-formatting will quickly outweigh any stylistic preferences you have and that you'll get used to it pretty fast.
准备好尝试一下了吗？Check out the full documentation on GitHub →
¥Ready to try it out? Check out the full documentation on GitHub →