皆さん、Tailwind CSS 触っていますか？
僕は Tailwind CSS を勤め先のプロジェクトで導入してみてから 5 ヶ月くらいになったのですが、めちゃんこいい感じなので、オタクらしく推しポイントを語っていこうと思います。
公平性のためにデメリットもあげて、それらを踏まえて採用するか判断しましょう、みたいな記事じゃないです。ただただ好きなところだけをあげます。
これが Tailwind CSS の貢献者たちに届けばうれしいですが、直接言うのは恥ずかしいという乙女心なのです……。
対象読者
- Tailwind CSS はなにがいいのか知りたい人
- Tailwind CSS 触ってみたけど良さがよくわからんから知りたいという人
- Tailwind CSS を導入するか検討している方
- Tailwind CSS のいいとこあるあるをみて共感したいオタク
なお、この記事では Tailwind CSS の基本や使い方などについては扱いませんのであしからず。
最初の印象
最初 Tailwind CSS を見たときの印象はこんな感じでした。
（´-`）.｡oO（これはただただ CSS プロパティと一対一の CSS クラスが並んでいるだけでは……？ インラインスタイルと同じじゃん……。 なにが便利なんだ……？）
（´-`）.｡oO（あとどうでもいいけどこの顔文字久々にみたな）
こんな印象を抱いた方、多いんじゃないでしょうか。
が、使ってみてこの印象は完全に覆りました。
Tailwind CSS とは
Tailwind CSS とは、ユーティリティファーストな CSS フレームワークです。
冒頭のとおり、ユーティリティファーストってなんぞやという基本的な説明は割愛しますが、一応この記事を全部読んだらなんとなくわかるとは思います。（わからなかったらごめんなさい）
Tailwind CSS のよくある誤解
良さを語る前に、まずよくある誤解を解消させてください。
Q. Bootstrap とかと一緒じゃないの？
A. 全然違います。
Bootstrap はボタン (.btn) やフォーム (.form-control) などの UI コンポーネントライブラリおよびフレームワークというのが基本思想ですが、Tailwind CSS はユーティリティファーストな CSS フレームワークです。
そのため、Tailwind CSS にはボタンなどのコンポーネントは一切用意されておらず、代わりにフレックスボックス.flexなど小さな単位での CSS クラスが定義されています。
Q. CSS わからん人でも使える？
A. CSS とほぼ一対一の CSS クラスが定義されている感じなので、CSS がわからなくても書けるってわけではないです。
ただ CSS わからん人が Tailwind CSS を一旦覚えて、それから CSS を覚える、というのは容易だと思います。ほぼ一対一なので。
CSS わからん人が Bootstrap に飛びついた感じで Tailwind CSS が流行っているように見える、みたいなことをどこかで見ましたが、個人的にはそれは違うと思っています。
Q. インラインスタイルを書くとの一緒じゃない？
A. 僕が最初に抱いた印象ですが、結論としては一緒ではないです。
インラインスタイルは値を制限できません。
そのため、例えば font-size を 14px にするか、13px にするか、はたまた 0.85rem にするか、無限の自由の代償として無限の選択に迫られます。
Tailwind CSS はフレームワークなのでいい意味で制約を与えてくれます。
それによって、小さいフォントサイズにしたい場合は .text-sm にするか .text-xs の 2 択から選ぶ、と言ったように、はじめから選択肢が絞られていて、意思決定のコストが下がります。
Q. CSS を書かなくていいところが Tailwind CSS の一番いいところなの？
A. 人によるでしょうが、僕はそこが一番いいところだとは考えていません。
たぶんさらっと Tailwind CSS の使い方を見るだけだと、 CSS を書かずに CSS クラスを付与していくところが目立ち、それが Tailwind CSS の一番の良さだと勘違いされているんじゃないかと考えています。
#Tailwind CSS のここが好き ともかぶりますが、Tailwind CSS は様々な課題を解決してます。
CSS を書かなくていいというのは、Tailwind CSS が様々な課題を解決しようとした結果至ったアプローチなのであって、これが一番のセールスポイントってわけではないと思っています。
Tailwind CSS が解決してくれる課題のほうに価値があり、僕が好きなポイントです。
Tailwind CSS のここが好き
- CSS クラス名を考えなくていい
- 細かいことまで考えなくて済む
- 細かいとこまで設定もできる
- デザインシステムの導入に便利
- UI の情報がすべて HTML に集約される
- UI ライブラリとの共存も用意
- 消しやすい
CSS クラスを考えなくていい
プログラムの変数でもそうですが、命名というのは案外時間と頭のリソースを使うもの。
しかも命名というはコードレビューで指摘されやすかったり、ソースコード全体で一貫性を保ちにくかったりする部分でもあります。
あと、勤め先ではほとんどのプロジェクトで Angular を採用し、コンポーネント単位の CSS カプセル化がされているので問題にはなりづらいですが、そうではない場合は既存の CSS クラス名とのコンフリクトまで気にかけなければならなくなることもあります。
Tailwind CSS では CSS クラス名を考えなければならない事自体がぐんっと減ります。
そもそもクラス名をつけなくてよければ前述の課題は起きないので、とてもハッピーです。
命名する数が減ることで、マジでストレスが減りました。
細かいことまで考えなくていい
命名と同様に頭を悩ませるのが、例えばフォントサイズやマージン、パディング。
文字を小さくしたいと思ったときに、一人で作っていてもここは 15px か、それとも 14px か、と些細なことに時間を使ってしまいます。
複数人での開発となればなおさらで、一貫性を保つことも難しくなってきてしまいます。
Tailwind は文字を小さくしたいとなったときは text-sm とするだけでよく、他の誰が書いても text-sm なので一貫性が保ちやすいです。
コードレビューで「ここは 14px じゃなくて 13px のほうがいいと思います」とかいちいち指摘したくないですよね。
もちろんデザインカンプから寸分狂わず作らないといけないケースでは、Tailwind CSS をフル活用するのは難しいでしょうが、それではないケースではこれが大いに活躍してくれます。
細かいとこまで設定できる
細かいとこまで考えてなくていい、と一個前に書きましたが、細かいとこまで設定することもできたりします。
なにができるかは Tailwind CSS のページを見てもらったほうが早いので割愛しますが、自分と合わないなぁという設定は大体変更できます。
しかも Tailwind CSS IntelliSense という VSCode 拡張が賢いので、自分でカスタマイズした設定も考慮してコード補完してくれます。
カスタマイズしたからコード補完が効かなくなっちゃった、それゆえ使いにくいということがないのもよいです。
デザインシステムの導入に便利
#細かいことまで考えなくていい の例のように、15px か 14px かで悩むという問題は、デザインシステムがあればある程度は解消すると思います。
が、デザインシステムを 1 から作るというのはかなり大変で、結局頓挫してしまうということありませんか？
Tailwind CSS はデザインシステムを導入したいなぁ〜というときの取っ掛かりとしても非常に便利です。
元々用意されている CSS クラスに、独自のものを追加したり、逆にうちのデザインシステムには不要だなというものについては削除したり、というのが簡単にできます。
UI の情報がすべて HTML に集約される
賛否あるかもですが、これが良いです。
CSS 自体の目的が HTML というマークアップから UI をデザインするための部分を分離するところにあるので仕方がないのですが、HTML だけではこの要素がどういった UI になるのか？というのは予想できないです。
デメリットとしてはクラス名が長くなって見づらいことがあるってことでしょうか。
でもこれを折りたたんだりする VSCode 拡張くらいなら作れそうですね。
なんなら探せばあるんでしょうか？
2021-05-31 追記
prettier-plugin-taliwind を使えば並び替えできそうです。
折りたたみではないですが、並び順が一人よってバラバラでストレス……みたいなことにはならずに済みそうです。
UI ライブラリとの共存も容易
Tailwind CSS は UI コンポーネントライブラリではないので、Bootstrap でも Material Design とでもケンカせずに組み合わせることが可能です。
なのでボタンとかのコンポーネントは Material Design を使いつつ、レアアウトやパディングは Tailwind CSS を使う、なんてことも何不自由なくできます。
実際、勤め先で使っているプロジェクトでは Angular Material と Tailwind CSS を組み合わせて使っています
消しやすい
これは Tailwind CSS を使っていて、しばらくしてから気づいたポイントなのですが、不要になった要素を消すとき、Tailwind CSS はその要素自体にデザインの情報が詰め込まれているため、本来不要な CSS の定義が残ってしまっている、みたいなことが起きないです。
消す側もコードレビューする側も楽です。
まとめ
良さを語れてスッキリしました。
みなさんの、Tailwind CSS の好きなところもぜひ教えて下さい〜〜！
Discussion