概要
- 今回はTailwind CSSにおけるスタイリングのベストプラクティスについてまとめました。
- ベストプラクティスにあたっては、tailwindlabsのCommunity ManageをされているSophiaさんのTipsを基にしております。
- また、本記事はTailwind CSS自体の説明は割愛しているため、Tailwind CSS自体を学びたい場合は、こちらをオススメいたします。
Tailwind CSSのベストプラクティス
ユーティリティクラス
- 複数のユーティリティクラスを使用する場合は、その文字列の順番に意味を持たせます。
- Concentric CSSのアプローチを使うのが良さそうです。
- Concentric CSSでは、プロパティをアルファベット順とかにするのではなくて、それぞれのプロパティの役割ごとに並び替えます。
下記はConcentric CSSで並び替えたcssの例です。
{
display: ;
position: ;
float: ;
clear: ;
visibility: ;
opacity: ;
z-index: ;
margin: ;
outline: ;
border: ;
background: ;
padding: ;
width: ;
height: ;
overflow: ;
color: ;
text: ;
font: ;
}
- このルールに従うと下記のような順番でユーティリティクラスをつけていく形になります。
- ① : ポジショニング系
- ② : ボックスモデル
- ③ : ボーダ系
- ④ : コンテンツのサイズとスクロールバー周りのやつ
- ⑤ : テキスト周りのやつ
- ⑥ : その他の視覚的な調整を行うもの
- 使用するユーティリティクラスの数を少なくします。
- 例えば、ml-2 mr-2 と書いているのであれば、mx-2にすれば１つのユーティリティクラスで解決します。
良くない例
ml-2 mr-2
上記は下記のように書き直せます。
良い例
mx-2
他にもシンプルにできるのであればシンプルにできるよう努力する。
良くない例
pt-4 lg:pt-8 pr-4 pb-4 pl-4
良い例
p-4 lg:pt-8
- 画面のサイズごとにユーティリティクラスが変わるbreakpoint's prefix(レスポンシブになるユーティリティクラス)を使用している場合、まとめられるのであればまとめる。
良くない例
lg:flex lg:flex-col lg:justify-center
- それぞれのユーティリティクラスごとにlg:をつけてますよね。
- これは下記のようにまとめられます。
良い例
block lg:flex flex-col justify-center
- レスポンシブになるユーティリティクラスでは、画面サイズに応じてそのユーティリティクラスが適用される。
- なので、無駄なユーティリティクラスは省略できます。
良くない例
block sm:block md:flex lg:flex xl:flex
- 上記の場合、md: に記載されているものが適用されるので、それ以上の画面サイズに応じたユーティリティクラスは省略できます。
良い例
block sm:block md:flex
コンポーネントクラス
-
@applyを使用する場合は、Tailwind CSSがプロジェクトに馴染んできたくらいで使用します。 - なぜかというと
@applyの使用用途が、あるコンポーネント内のユーティリティクラスの文字列が他のコンポーネントでも使用されている場合に共有として使えるように@applyを使用することで意味を持つ為です。(これで重複するようなユーティリティクラスを排除できる)
参考