【半年使った】Tailwind CSSのメリット・デメリット・今後について語る

TailwindCSS を半年ほど使って感じたメリット・デメリット・今後について話します。

このサイトのデザインにも使っていますし、Notion カウントダウン、Notion 文字数カウント、その他の個人で作ったサイトに使った経験があります。

まず、あくまで個人的な意見だということをご了承ください。 というのも、感じ方は人それぞれで、その人の背景がバラバラだからです。

• CSS の出始めのころを知っている
• 素の CSS ファイルを使ったことがない
• そもそも CSS を書いたことがない

以上の人たちが Tailwind CSS を使った時に同じような感想をもつはずがないと思います。 ちなみに僕は、もともとバックエンドをメインに勉強・バイトをし、個人開発をするにあたり CSS も勉強し始めた感じで、もはや素の CSS は Progate でしか使っていません。

「考える時間を減らし、開発効率とパフォーマンスを上げる」こと。 メリットはこれに尽きると思います。人的なリソースが多くても、少なくても効果を発揮するはず。

具体的に挙げると、以下の 4 点です。

• CSS のクラス名を考える必要がない
• ビルド時に CSS のサイズを小さくできる
• エコシステムが充実している
• 特定のフロントエンドライブラリに依存せず使える

順に詳しく解説します。

素の CSS ファイルを用いて書く際は以下のように HTML/CSS を書きますね。

コピー
1<p class="sample">hoge</p>

コピー
1.sample {
2  color: red;
3  font-size: 1.25rem;
4  line-height: 1.75rem;
5}

これが階層化し、要素の数が増えるとカオスになります。

きちんと経験があり実装のできる方なら大丈夫だと思いますが、自分のような CSS 初学者・実務での CSS の利用がない方にとっては使うのは困難です。

BEMという命名規則でクラス名を考え実装していくのが無難ですが、正直に言うとコストがかかりすぎます。 命名って難しいですよね。。。そのコストを削減するために Tailwind CSS を使うのです。

具体的には以下のように書き換えることができます。

コピー
1<p class="text-xl text-red-900">hoge</p>

その要素に与えるスタイリングにのみ注力できるため、効率化が可能です。 text-xl に関しては、https://tailwindcss.com/docs/font-sizeに載っています。

詳しくは公式ページの、https://tailwindcss.com/docs/optimizing-for-productionを参照して欲しいですが、ビルドする際に最適化（ファイルサイズを小さく）を行うことができます。

上記サイトで以下のような説明がなされています。（僕の意訳も含みます）

大きなプロジェクトでも 10kB 以下の CSS ファイルにできる。 さらにファイルサイズを小さくするには cssnano などのツールで CSS を最小化し、Brotli で CSS を圧縮する。

このように、大規模なアクセスを受ける本番環境での運用でも効果を発揮しますし、実際に Netflix などの最大手サイトでも利用されているのです。

現代のフロントエンドにおける CSS の実装には、CSS Modules,Emotion,styled-components などがありますが、上手に使わないとパフォーマンスに悪影響を産むこともあります。 CSS を適切にコード分割して、ファイルサイズを小さくすることで解決するのは、会社などで人的なリソースがないと難しいと思っています。

そういった、ファイルサイズの不安を消し去ってくれるのが嬉しいです。

「エコシステムが充実している」とは、Tailwind CSS を使ったライブラリや知見が豊富にあることを意味します（自分の中での解釈も含みます）。

エコシステムが充実すればするほど、開発の効率化ができますし、最適な実装がしやすくなります。というのも、コードが OSS に溜め込まれるからです。

以下の記事で、おすすめのプラグイン・ツールについて解説しました。

https://blog.cohu.dev/tailwind-css-tools

このエコシステムがあるかないかで天と地の差がある、ということです。

React においては、Emotion,styled-components などが CSS の実装ライブラリとして有名です。Vue でも同様の専用ライブラリがあるでしょう。

しかし、これらは React でのみ使えます。 つまり、別のフロントエンド技術を使う場合には、別のライブラリの勉強を再度する必要がでてきます。

勉強すれば良いと言えばそれまでですが、少しはコスト（時間・労力）がかかります。 Tailwind CSS なら、素の HTML（script タグから CDN で読み込む） にも、Vue にも、Svelte にも、なんでも使えて、これまでの知識やエコシステムを総動員して効率的に開発をすることができます。

自分としては語るべきデメリットはほとんど感じません。 強いて言うなら、クラス名が長くなることでしょう。 例えば以下のようにクラス名が長くなると可読性が低くなります。

コピー
1<img
2  className="mx-auto max-h-96 w-auto rounded-md border-stone-400 drop-shadow-xl dark:opacity-90"
3  src={hoge}
4  loading="lazy"
5/>

しかし、クラス名を考えるという労力と比較したら月とスッポンです。絶対にメリットを享受すべきだと僕は思います。

当然、CSS Modules などでは適切なクラス名を与え運用できるなら、クラス名が英単語の数語だけで済ませられ、可読性は向上するでしょう。

以下のような書き方ができるので、見やすいことに変わりはありません。

コピー
1<p class="sample">hoge</p>

コピー
1.sample {
2  color: red;
3  font-size: 1.25rem;
4  line-height: 1.75rem;
5}

最低でもあと 5 年は積極的に開発され、使われ続けると思っているので、これからも使うつもりです。 もし、今後 Tailwind CSS が使われなくなる時が来るなら、それは Web 技術の根底が別の何かに置き換えられるのでは？と思います。

そもそも HTML 対するデザインを CSS で行わない、という時代が来るかもしれません。 そう言った考えも無理やりですが、できます。ただ、未来は誰にも分かりません。

誰よりも早く情報が欲しければ、技術者のコミュニティに入るなり、英語を勉強して海外から最新の情報を仕入れるなどして、なるべく最新の情報に触れるのが大事なのではないでしょうか？

僕自身は英語圏のサイトもたまに見ますが、日本と異なり情報が非常に多くスピード感もあふれるので、何か効率的に情報を見つける工夫をするなり、分野を狭くして情報を追う必要があると感じました。

以上で真面目に Tailwind CSS について語りました。 チュートリアルを始める・ドキュメントを読むなら、公式サイトを確認してみてください。 手を動かしたら感動することでしょう。