Tailwind CSS のメリットとデメリット
はじめに
新規サイトを作成するにあたって、できるだけCSSを書きたくないなと思って調べていたところ、Tailwind CSSというCSSフレームワークが人気ということで、さっそく使ってみました。
使ってみて、メリットとデメリットが分かってきたので、それについて書きます。
Tailwind CSSとは
CSSフレームワークの一種です。CSSフレームワークといえば、一番有名なのはBootstrapかと思いますが、Tailwind CSSは、ユーティリティーファーストを謳っていて、要は、便利で汎用的なクラスがたくさん用意されているので、使う側はそれを組み合わせて使うスタイルのフレームワークです。
ちなみに、読みはテイルウィンド。日本語で「追い風」。
メリット
メリットは以下の通り。
1. CSSを書かずに済む
CSSフレームワークなので当然といえば当然ですが、CSSを自分で書く必要がありません。
CSSファイルを開いて、CSSを書いて...という作業がないのは、とても効率的です。
2. クラス名を考える必要がない
Tailwindのクラス名ですべて実現できるので、自分でクラス名を考える必要がなくなります。
クラス名のために、わざわざ英単語を調べて...ということもなくなります。
3. CSSファイルのサイズを小さくできる
Tailwindは内部的にPurge CSSというツールを使っていて、これにより、使われていないCSSの記述をCSSファイルから削除することができます。
個人的にはここに感動しました。超合理的。
デメリット
逆に、デメリットは以下の通り。
1. クラスが多くなる
Tailwindでは、汎用的なクラスを組み合わせて使うという性質上、指定するクラスが多くなります。
特に、レスポンシブ対応の際にはかなり増えます。
例えば、以下のように増えていきます...。
<div class="flex flex-col fixed top-0 right-0 bg-gray-400 p-4 h-full lg:flex-row lg:static lg:bg-transparent">
一応、@applyという機能を使うことで、Tailwindクラスをまとめた独自クラスを作成することができます。しかし、これをやりすぎると、あまりユーティリティーファーストとは言えない設計になってしまうので、慎重に検討した方が良いかもしれません。
.my-section {
@apply flex flex-col fixed...;
}
2. クラスを探すのがめんどくさい
Tailwindのドキュメントでクラスを探すのがめんどくさいです（フレームワークを使う以上、当たり前ではあるが...）。いわゆる学習コストですね。
例えば、text-align: center;に相当するクラスはtext-centerですが、こういうのを、いちいちドキュメントで検索する必要があります。
一応、VS Code向けには補完機能の拡張が提供されています。
3. 導入がデザイナーには少し難しいかも
Tailwindの導入は、基本的にnodejsが必要です（nodejsで成果物CSSをビルドする）。
nodejsを使ったことがないデザイナーなどには、若干ハードルが高いかもしれません。
一応CDNでも使えるのですが、CSSのファイルサイズが重い（3MBくらいある）ので、これを使うのはオススメしません。
まとめ
Tailwind CSSはとても使いやすいフレームワークだと感じました。
どのプロジェクトでも容易に導入できそうなので、個人的には積極的に使っていこうかなと思っています。
Discussion