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

フロントエンドのデベロッパーとして活躍しているAhmad Shadeed氏による、Tailwind CSSのメリットとデメリット、所感を紹介します。

Tailwind CSSの最近の人気はすごいですね。すでに使用している人、気になっている人も多いと思います。Tailwind CSSとどのように向き合っていくとよいか、そのきっかけになればと思います。

A Look at Tailwind CSS
by Ahmad Shadeed

Tailwind CSSについて詳しく知りたい人は、以前の記事も参考にどうぞ。

• Tailwind CSSが私には合わなかった理由
• Tailwind CSSのカスタマイズ方法を解説
• Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる
• CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」
• Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました
• Tailwind CSSですぐに実装できるUIコンポーネントのまとめ -tailblocks

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• Tailwind CSSのメリット
• Tailwind CSSのデメリット
• 最終的な考え

はじめに

今年になって、私は人気のあるCSSフレームワーク「Tailwind CSS」について多くの記事を目にしました。このUIフレームワークに関する私の考えや懸念を共有したいと思います。

私は数年前にフロントエンドの実装で、ユーティリティファーストのCSSを使用した経験があります。この記事では、それについて私が考えていることをお伝えします。

Tailwind CSSのメリット

HTMLから離れる必要がない

Tailwind CSSの公式サイトにこんな一文があります。

1ヵ所でコードを書いたほうが、異なるファイル（HTMLとCSSのファイル）を行き来するよりも早いということには同意します。しかし、HTMLを残しておくことは私にとって問題ではありません。マークアップとスタイルのコンテキストを切り離すのに役立ちます。考えてみると、HTMLとCSSのファイルを分けておくことで、目の前のタスクに集中できます。

逆に、マークアップとスタイルが混在していると、複雑な多言語、レスポンシブ、テーマに沿ったUIに取り組んでいる場合は、タスクが混乱してしまうかもしれません。

Tailwind CSSで作業するのは、スケッチ用とカラー用の2本のペンを持っているのと似ています。マークアップとスタイルを同時に書くと、この2本のペンが頭に浮かびます。Tailwind CSSの大きな違いは、カラーのペンに制限や制約があることです。つまり、事前に定義されたカラーしか使ってはいけないということです。

私としては、アクセシブルでセマンティックなマークアップを書くことに集中してから、スタイルは別に作業する方がよいと思っています。

デザインの制約

デザインシステムでは通常、カラー、スペース、サイズをはじめ、さまざまなバリエーションを定義します。できることに制限があると、デベロッパーの仕事は楽になります。Tailwind CSSはそれをうまく実現しています。カスタム構成ファイルを定義するというアイデアはとても便利です。

CSSのクラスの命名

Tailwind CSSではクラスの命名について考える必要はありません。これにより、実装にかかる時間が短くなるかもしれません。

上司から「今日中に完成させなければならない緊急のランディングページがあり、それを作るのに3時間しかない」というメールがきたときに、この機能が便利だと思いました。Tailwind CSSは、そういった場合に非常に早く実装するのに役立ちます。ただし、マークアップとスタイルを別々に書くことにこだわると、時間がかかります。

もう1つ便利な使用方法は、コンペやハッカソンです。このようなイベントで重要なのは、何かを実装して動作させることです。どのようにCSSを書いたかなんて誰も気にしません。

Tailwind CSSのデメリット

ユーティリティファーストのフレームワークではありません

Tailwind CSSの公式サイトにこんな一文があります。

私が見たところ、ユーティリティオンリーのフレームワークです。おそらく、ユーティリティオンリーと呼ぶことは、初心者の理解度に影響するからだと思います。Tailwind CSSを使用しているサイトで、ユーティリティファーストのコンセプトを採用しているWebサイトを目にすることはめったにありません。

クラスの長いリストで混乱することがある

注: @applyメソッドがあるのは知っています。

Tailwind CSSのドキュメントからこの例を見てみましょう。

上記のコードは、17個のクラスを持つinputです。クラスを1つずつ水平に読むのと、垂直にスキャンするのはどちらが簡単でしょうか？
上記をCSSファイルにすると、こうなります。

HTMLをスキャンするよりもずっと早く、どのようなスタイルが適用されているか理解することができます。HTMLのクラスを自動整形するツールがあるかもしれませんが、ブラウザのデベロッパーツールでは実現できません。

私は@applyメソッドを知っていますが、考えるたびに、Tailwind CSSのコアコンセプトに反していることが分かります。
上記と同じスタイルで見てみましょう。

このクラスのリストの長さを見てください。

もしTailwind CSSのポイントがユーティリティファーストであるなら、なぜ公式ドキュメントやTailwind UIで@applyの使用方法を見るのが稀なのでしょうか？ 繰り返しになりますが、私はTailwind CSSをユーティリティオンリーのフレームワークだと思っています。

物事には必ず名前をつける必要がある

デザインシステムでは、特定のコンポーネントに名前をつけないと、そのコンポーネントについて議論することは困難です。要するに、こんなメールを同僚に送信することはないということです。

通常は、下記のようにメールします。

最終的には、構築するプロジェクトのすべてのコンポーネントにユニークで意味のある名前を設定する必要があります。もちろん、プロジェクトのスケールアップして長期的に維持したい場合にも当てはまります。

少し前に友人と冗談で「従来の命名」を横に置いて、ユニークな名前ではなく、こんな風に自分たちを呼ぶのはどうだろうと話していました。

意味がありませんでした。こちらの方がずっと良いです。

一部のクラスは混乱している

Tailwind CSSを使用し始めたばかりの頃、align-items: center;を担うクラスを追加する必要がありました。私が最初に考えたのは.align-centerでしたが、これはうまく機能しませんでした。ドキュメントを調べたところ、混乱してしまいました。

.items-centerのクラスは、align-items: center;を担当します。そして、.align-middleは、vertical-align: middle;を担当します。これらを覚えるには、ちょっとした記憶力が必要です。

経験豊富なデベロッパーであれば、これらに簡単に対応でき、大きな問題にはならないでしょう。興味深いのは、CSSを始めて学ぶ人にとってです。CSSのしっかりとした知識を持たずにTailwind CSSを学ぶと、将来的に誤解を招く恐れがあります。例えば、Tailwind CSSのみを使用してキャリアを始めたデベロッパーが、ゼロからCSSを書けと言われても、書くことはできないでしょう。不可能とは言いませんが、かなりの時間と労力が必要になります。

ブラウザでのデザインの調整が難しい

私はデザインと実装の両方をしているので、デベロッパーツールでの作業は非常に重要です。しかし、Tailwind CSSを使用すると、これが難しくなります。

例えば、コンポーネントのパディングを調整したいとします。.py-3というクラスの値を変更すると、それを使用しているすべての要素に反映されてしまいます。

これに対応する唯一の方法は、デベロッパーツールで.clsメニューを開き、クラスを変更します。しかし、これでは問題が解決しません。このような場合に私ができることは、デベロッパーツールでインラインスタイルを追加することですが、これは好きではありません。

この問題は、単純に名前を付けるだけで解決されます。

さらに付け加えると、Tailwind CSSの総ファイルサイズは12MBです。デベロッパーツールでのCSS編集は非常に時間がかかります。つまり、ブラウザでのデザインは効率的ではないということです。

最近、Tailwind CSSのチームは使用されていないCSSを削除するJITコンパイラをリリースしました。これにより、ブラウザでデザインするという考え全体が妨げられます。

上記は、backを入力して、利用可能なすべてのクラスの長いリストが表示されます。JITではそのようなことはありません。

多言語のWebサイトに適していない

私は、英語（LTR）とアラビア語（RTL）の両言語で機能するWebサイトを実装していますが、その背景を説明しましょう。下記のCSSをご覧ください。

RTL用の別のCSSファイルでは、スタイルは下記のようになります。

この例では、ページの方向（左から右、または右から左）に応じてパディングを反転させる必要があります。そのためのプレグインはすでにありますが、それらは外側からのみ問題を解決します。

私が見つけた最初のプラグインは下記のようにします。

これは私にとって良い解決策ではありませんでした。2番目のプラグインは少し異なっていました。

これではあっという間に制御不能になってしまいます。最近、あるWebサイトを調べていたら、ボタンに30以上のクラスがあることに気づきました。

これは特にCSS初心者にとって、Tailwind CSSがどのように制御不能になるかを示す例です。ボタンを実装するために30以上のクラスを書かなければいけないのは、多すぎます。これであれば、インラインのスタイルを使用したほうがよいでしょう。

現在、私はBi-AppSassを使用して多言語Webサイトを構築しています。コードのサンプルは下記のとおりです。

上記は2つの異なるCSSファイルにコンパイルされます。まずは、LTR用のCSSファイル。

RTL用のCSSファイルです。

この記事でRTLスタイリングの詳細を実際に読んでください。

テンプレートを常に使用するとは限らない

Tailwind CSSの問題点はまだあります。例えばカードのリストがあり、特定のクラスのセットを変更したい場合、エディタで手作業で確認する必要があることです。プロダクトにパーシャルやコンポーネントを使用している場合は、この問題はありません。一度HTMLを書けば、そのコンポーネントが使用されている場所であれば、変更が反映されます。

しかし、常にそうなるとは限りません。私の場合、index.htmlというシンプルなページをつくる際に、パーシャルやコンポーネントに分けるほどではありません。このような場合、Tailwind CSSを使ってCSSを編集することは、エラーを起こしやすい作業になります。というのも「検索・置換」ができないため、ページ上の他の要素を見逃してしまう可能性があるからです。

Webサイトが似た感じになる

Tailwind CSSのチームは、カスタマイズが簡単でプロジェクトですぐに使用できるTailwind UIと呼ばれるコンポーネントのセットをリリースしました。

コンポーネントのルック＆フィールは素晴らしく、私も気に入っています。ただし、問題があって、Tailwind UIを使用しているWebサイトがあると、わりとすぐに分かります。

Tailwind UIを使用するということは通常、カスタムメイドのデザインで実装する時間がないことを意味します。そのために短時間で実装できる何かが必要になりますよね。これは数年前のBootstrapと同じ現象で、多くのWebサイトが似たようなデザインになってしまうことを除けば、優れた使用例だと思います。

CSSの一部のプロパティまたは機能は使用できません

例えば、clip-pathプロパティは含まれていません。その理由はよく分かりますが、仮にコンポーネントに使用したいとしましょう。CSSをどこに入れればよいでしょうか？

下記のように、Tailwind CSSの構成に含めることができます。

もしくは、下記のようにインラインのスタイルで記述します。

最終的な考え

Tailwind CSSはコンパイル時にも使える？

Tailwind CSSがコンパイル時にのみ発生する場合を想像してみてください。つまり、普通にCSSを書いて、名前を付けても、コンパイラがCSSをユーティリティクラスに変換してくれるということでしょうか？ それは夢のような話ですね。

ユーティリティークラスは強力だが、使いすぎてはいけない

私は現在のプロジェクトで、ユーティリティクラスと通常のCSSを組み合わせて使用しています。これは私にとって完璧な組み合わせです。ユーティリティクラスの力を失わずに、しかもHTMLを汚さずに使用することができます。

コメントや提案があれば、@shadeed9までお願いします。