🌻
【Tailwind CSS】クラスの順番を自動で並び替え（Prettier）
公式の Tailwind Labs が公開しているパッケージ「prettier-plugin-tailwind」を使用します。
prettier-plugin-tailwind GitHubより引用
手順
1. インストール
ターミナルで実行
npm install -D prettier prettier-plugin-tailwindcss
prettierとprettier-plugin-tailwindを開発環境に限定（-D = --save-dev）してインストールします。
2. Prettier設定ファイルの作成
ターミナルで実行
touch .prettierrc.json
設定を記述するためのファイルを作成します。ファイル名「.prettierrc.json」はPrettier公式ドキュメントを参照しています。"rc"というのは"run command"の略だそうです。
3. Prettier設定ファイルを記述
.prettierrc.json
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": false,
"plugins": ["prettier-plugin-tailwindcss"],
"tailwindConfig": "./tailwind.config.js"
}
| 設定 | 概要 |
|---|---|
| "trailingComma": "es5" |
※1 ES5に準拠 |
| "tabWidth": 2 |
※1 段落の幅がTab１つ分（= 半角スペース2つ）で整形 |
| "semi": true |
※1 文末にセミコロンをつける |
| "singleQuote": false |
※1 デフォルトを「シングルクォート」or「ダブルクォート」にする |
| "plugins": ["prettier-plugin-tailwindcss"] | プラグインとして「prettier-plugin-tailwind」を使用する |
| "tailwindConfig": "./tailwind.config.js" |
※2 Tailwindの設定ファイルを参照 |
※1: 値は任意
※2: 設定ファイルのパスや名前はプロジェクトによって異なります（.tsの場合もあります）
完了
これで設定完了です！あとは ⌘ + s もしくは Ctrl + s で整形するだけ！
ちなみに、、どんな規則で整形してるの？
並び替え規則は以下の通りです：
-
レイアウト (Layout)
-
container,box-decoration,float,clear,isolation,object,overflow,overscroll,position,top,right,bottom,left,inset,z,space,divide
-
-
フレックスボックス (Flexbox) と グリッド (Grid)
-
flex,flex-direction,flex-wrap,flex-grow,flex-shrink,order,grid,grid-cols,grid-rows,grid-flow,auto-cols,auto-rows,gap
-
-
背景 (Background)
-
bg,background,gradient,from,via,to,fill,stroke
-
-
ボーダー (Borders)
-
border,divide,outline,ring,ring-offset
-
-
スペーシング (Spacing)
-
p,pt,pr,pb,pl,px,py,m,mt,mr,mb,ml,mx,my
-
-
サイズ (Sizing)
-
w,min-w,max-w,h,min-h,max-h
-
-
タイポグラフィ (Typography)
-
font,text,tracking,leading,list,placeholder
-
-
テーブル (Tables)
-
table,border
-
-
効果 (Effects)
-
shadow,opacity,mix-blend,background-blend,filter,backdrop-filter
-
-
トランジションとアニメーション (Transitions & Animation)
-
transition,duration,ease,delay,animate
-
-
変形 (Transforms)
-
scale,rotate,translate,skew,transform
-
-
インタラクション (Interactivity)
-
appearance,cursor,pointer-events,resize,user-select
-
-
アクセシビリティ (Accessibility)
-
sr,not-sr
-
この順序に従って Tailwind CSS のクラスを並び替えることで、クラスの目的別にコードを整理しやすくなります。プラグインを使うことで、この順序が自動的に適用されているんですね！
公式
Discussion