はじめに
Tailwind CSSを初めて使う機会があり，
「そもそもTailwind CSSとは何なのか？」というところから調べ始めました．
調べていく中で，Tailwind CSSのメリットとして，主に次のような点が挙げられていました．
- CSSファイルを書く機会が減る（責務が曖昧になるという議論もあるそうですが…）
- 開発スピードが上がる
- レスポンシブ対応が簡単
しかし，
「普通のインラインスタイル（style属性）と何が違うのか？」
「結局、何がそんなに嬉しいのか？」
という点がいまいち腑に落ちませんでした．
そこで本記事では，
style属性との比較を通して、Tailwind CSSの特徴と嬉しさを自分なりに整理してみます．
style属性の特徴
<div style="margin-top: 13px; color: #ff3a2b;">
- CSSをそのまま書けるので自由度が高い
- どんな値でも指定できる
しかしその反面，
-
13px、14pxなど「人や場所によって微妙にズレる」 - 色も
#ff0000や#ff0101のように「ほぼ同じ見た目の値が混在しやすい」
結果として，
- デザインが揃いにくい
- ルール化しづらい
- 後から直すのが大変になる
Tailwind CSSの特徴
<div class="mt-4 text-red-500">
-
mt-4やtext-red-500のように「あらかじめ用意されたクラスから選ぶ」 - マージン、色、文字サイズなどが「段階的に定義されている」
その結果，
- クラス名の意味が統一される
- インラインでもクラス名を比較的簡潔に記載できる（style属性と比較した場合）
- 実装者やファイルが違ってもデザインのズレが起きづらい
つまり，
Tailwindは
「自由を少し減らす代わりに、再現性と統一感を得る」
仕組みだと理解しました．
クラスは覚えないといけないのか？
そもそも，
「Tailwind CSSのクラスって覚えないといけないのでは？それって面倒じゃない？」
という点が疑問に思いました．
結論としては「最初は覚えなくてよさそう」です．
- 必要なときにドキュメントで調べる
- 使っているうちに自然と覚えていく
また，
- m = margin
- p = padding
のように，クラス名は規則的なのでCSSの知識があれば推測できる部分も多いです．
エディタの補完機能もあるため，調べながら使いたいと思います．（そりゃそうか）
まとめ
Tailwind CSSの強みは，
- クラス名が短く意味を持つこと
- あらかじめ用意されたクラスを利用するため，微妙なズレ（コード間・人間間で）が起きづらいこと
と整理できます．