目錄
?類如何排序
自定義
實戰應用
.prettierrc
package?
.eslintrc?
人們一直在討論在 Tailwind 項目中對實用程序類進行排序的最佳方法。今天，我們很高興地宣布，隨著我們官方??prettier-plugin-tailwindcss 的發布，您終于可以不用為此擔心了。
此插件會掃描您的模板，查找包含 Tailwind CSS 類的 class 屬性，然后按照我們推薦的類排序動對這些類進行排序。
<!-- 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然后將插件添加到您的?.prettierrc 中?
配置文件 · Prettier 中文
{"plugins": ["prettier-plugin-tailwindcss"]
}您還可以通過將 --plugin 標志與 Prettier CLI 一起使用，或者通過將 plugins 選項與 Prettier API 一起使用來加載插件。
插件是向 Prettier 添加新語言或格式規則的方法。Prettier 自身對所有語言的實現都使用插件 API 來表達。核心
prettier包內置了 JavaScript 和其他 Web 語言。如需添加其他語言，則需要安裝插件您可以使用以下方式加載插件：
{"plugins": ["prettier-plugin-foo"] }提供的字符串
plugins最終傳遞給import()表達式，此您可以提供模塊/包名稱、路徑或任何其他import()內容。
?類如何排序
從本質上講，此插件所做的只是按照 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>
不同實用程序的實際順序大致基于盒模型，并嘗試將影響布局的高影響類放在開頭，將裝飾類放在結尾，同時還嘗試將相關的實用程序放在一起
<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 一樣，我們認為自動格式化的好處將很快超過您擁有的任何樣式偏好，并且您會很快習慣它。
https://prettier.io/docs/option-philosophy.html
然而，該停下來的時候到了。如今 Prettier 已經足夠成熟，我們看到它被如此多的組織和項目采用，研究階段已經結束。我們有充分的信心得出結論，Prettier 已經達到了一個應該“凍結”選項的階段。選項請求將不再被接受。我們感謝所有參與這段艱難旅程的人。
實戰應用
作者在使用的時候因為使用的?prettier，?eslint-plugin-prettier 這兩個第三方插件的版本太低導致各種不生效 所以我把現在可以運行的版本貼出來供參考
如果遇到問題可以先更新版本 然后在參考文檔看看是否有最新方案
.prettierrc
{"plugins": ["prettier-plugin-tailwindcss"],"printWidth": 80,"tabWidth": 2,"useTabs": false,"singleQuote": true,"semi": false,"trailingComma": "none","bracketSpacing": true
}
package?
{"private": true,"version": "1.0.0","description": "通知H5 MonoRepo項目","main": "index.js","type": "module","scripts": {"dev": "turbo run dev","build": "turbo run build","prepare": "husky install"},"keywords": [],"author": "","license": "ISC","devDependencies": {"@types/node": "^18.11.9","@typescript-eslint/eslint-plugin": "^5.42.0","@typescript-eslint/parser": "^5.42.0","eslint": "^8.26.0","eslint-config-prettier": "^8.5.0","eslint-plugin-prettier": "^5.5.1","eslint-plugin-vue": "^9.7.0","husky": "^8.0.1","lint-staged": "^13.0.3","prettier": "^3.6.2","prettier-plugin-tailwindcss": "^0.6.14","turbo": "^2.5.4","typescript": "^4.8.4"},"lint-staged": {"*.{js,ts,vue,jsx,tsx,json}": "eslint --cache --fix"},"packageManager": "pnpm@9.0.0"
}
.eslintrc?
{"env": {"browser": true,"es2021": true,"node": true},"extends": ["eslint:recommended","plugin:vue/vue3-essential","plugin:@typescript-eslint/recommended","plugin:prettier/recommended"],"overrides": [],"parser": "vue-eslint-parser","parserOptions": {"ecmaVersion": "latest","parser": "@typescript-eslint/parser","sourceType": "module"},"plugins": ["vue","@typescript-eslint"],"rules": {"vue/multi-word-component-names": "off","@typescript-eslint/no-this-alias": ["off"]},"globals": {"uni": true,"getApp": true,"Android": true}}
