Tailwind CSS のメリットとデメリット

▼ 「Tailwind CSS 入門と実践」という本（ZennのBook）を書きました！こちらもぜひどうぞ。
https://zenn.dev/yohei_watanabe/books/c0b573713734b9

はじめに

新規サイトを作成するにあたって、できるだけCSSを書きたくないなと思って調べていたところ、Tailwind CSSというCSSフレームワークが人気ということで、さっそく使ってみました。
使ってみて、メリットとデメリットが分かってきたので、それについて書きます。

Tailwind CSSとは

CSSフレームワークの一種です。CSSフレームワークといえば、一番有名なのはBootstrapかと思いますが、Tailwind CSSは、ユーティリティーファーストを謳っていて、要は、便利で汎用的なクラスがたくさん用意されているので、使う側はそれを組み合わせて使うスタイルのフレームワークです。
ちなみに、読みはテイルウィンド。日本語で「追い風」。
https://tailwindcss.com/

メリット

メリットは以下の通り。

1. CSSを書かずに済む

CSSフレームワークなので当然といえば当然ですが、CSSを自分で書く必要がありません。
CSSファイルを開いて、CSSを書いて...という作業がないのは、とても効率的です。

2. クラス名を考える必要がない

Tailwindのクラス名ですべて実現できるので、自分でクラス名を考える必要がなくなります。
クラス名のために、わざわざ英単語を調べて...ということもなくなります。

3. CSSファイルのサイズを小さくできる

Tailwindは内部的にPurge CSSというツールを使っていて、これにより、使われていないCSSの記述をCSSファイルから削除することができます。
個人的にはここに感動しました。超合理的。
https://purgecss.com/

デメリット

逆に、デメリットは以下の通り。

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向けには補完機能の拡張が提供されています。
https://tailwindcss.com/docs/intellisense

3. 導入がデザイナーには少し難しいかも

Tailwindの導入は、基本的にnodejsが必要です（nodejsで成果物CSSをビルドする）。
nodejsを使ったことがないデザイナーなどには、若干ハードルが高いかもしれません。

一応CDNでも使えるのですが、CSSのファイルサイズが重い（3MBくらいある）ので、これを使うのはオススメしません。

まとめ

Tailwind CSSはとても使いやすいフレームワークだと感じました。
どのプロジェクトでも容易に導入できそうなので、個人的には積極的に使っていこうかなと思っています。