人們一直在討論在 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` is a component so it comes first --><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 上的完整文件 →