Tailwind CSSが私には合わなかった理由

ここ1,2年で、Tailwind CSSを使用する人が増えてきました。Tailwind CSSはユーティリティファーストのフレームワークで、いくつかのclassを組み合わせることでUIコンポーネントやレイアウトを簡単に実装できます。

Webデベロッパーによる、Tailwind CSSが私には合わなかった理由を紹介します。

Why Tailwind Isn't for Me
by Jared White

Tailwind CSSについて詳しく知りたい人は、以前の記事をご覧ください。

• Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる
• CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」

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

• はじめに
• 理由1: Tailwind CSSは汚いHTMLを推進している
• 理由2: @applyは互換性がなく、非標準（大部分は不要）
• 理由3: Tailwind CSSのデザインシステムとトークンは、CSS変数に置き換えることができる
• 理由4: Webコンポーネントが存在することを忘れてしまう
• 理由5: Tailwind CSSはdivとspanタグのスープを推奨している
• 結論: Tailwind CSSが好きなら使用すればいい。しかし、目指すべき未来であると私に納得させようとするのはやめてください

はじめに

最近、Tailwind CSSをめぐってネット上で白熱した議論をしました。私はこのことを誇りに思っているわけではなく、誰かと対立することも好きではありません。

Tailwind CSSを構築している人たちは才能があり、いい人たちだと思います。しかし、私は純粋に技術的なレベルでTailwind CSSを好きではありません。例え誰かのために作られたものだとしても、私のために作られたものではありません。

ある意味、それは問題ありません。私が絶対に使用しないWebのテクノロジーはたくさんあります。だからといって、それらが悪いということではありません。グルーヴィーな技術スタックはいくらでもあります。

私が直面している問題は「Tailwind CSSに将来性がある」という世間の感情が高まっていることです。それは物事があるべき姿です。言い換えれば、オピニオンリーダーで、エバンジェリストを鼓舞しているということです。繰り返しになりますが、あるレベルでは問題ありません。例えば、Railsはオピニオンリーダーで、私はRailsを使用するのが大好きです。

しかし、Tailwind CSSは間違いなく手袋を投げつけて決闘を挑んできます。Tailwind CSSのサイトに掲載されているクリエイターのAdam Wathan氏の言葉を引用します。

この挑戦を受けました。

私はTailwind CSSを実際に試し、実務レベルで使用しました。私のクライアントの1つが開発しているプロジェクトは、ReactとTailwind CSSで構築されています。だから何を言われようとも、Tailwind CSSを使用していないと私を非難することは誰にもできません。

私にはまったく合いませんでした。Tailwind CSSにいくつかの懸念を抱いています。私がこの懸念を言葉にすると、Tailwind CSSの熱烈なファンから非難を受けます。90年代後半からこの業界でフルタイムで働いてきたプログラマーとして、納得できません。

というわけで、TwitterやHackerNewsのコメントはこのレベルの技術的な話をするには不向きなので、記事にしてTailwind CSSが私に合わない理由を説明したいと思います。

理由1: Tailwind CSSは汚いHTMLを推進している

1つ目の理由は美的な懸念ですが、後に説明する技術的な課題と密接に関係しています。少なくとも私は、ユーティリティCSSのみのHTMLの見た目が嫌いです。あー、いやだ、イヤだ、嫌だ。Adamは「チャンスを得るために十分な時間をかけて、後悔したい衝動を抑えてください」と、このことを真正面から認めています。つまり、Tailwind CSSでマークアップを書くことは最初は醜くて奇妙に見えるけど、メリットが非常に大きいので、最終的には「それを乗り越えられる」という暗黙の了解です。

私はTailwind CSSを書き始めて1年が経ちましたが、いまだに乗り越えていません。ごめんなさい。私にはメリットが多いことに感謝ができませんでした。

HTMLをクリーンに保ちたいなら、@applyを使えばいいんだよ！という声が聞こえます。まぁ、それは潜在的な解決策であり、実際に前述のプロジェクトで私たちは行いました。HTMLの多くはコンポーネントスコープされたクラス名（実際にはBEMに近い）を対象にしているため、@applyを広範囲に使用します。しかし、ここで次の懸念が出てきます。

理由2: @applyは互換性がなく、非標準（大部分は不要）

Tailwind CSSのファンはここで多くの人がつまずいて、何度も何度も議論し続けるので、できるだけ分かりやすく明確に説明したいと思います。

1. CSSファイルの@apply mt-3は、Tailwind CSSを使用している場合にのみ機能します。つまり、ビルドプロセスにTailwind CSSが存在する必要があります。ビルドプロセスからTailwind CSSを削除すると、そのCSSは機能せず、レイアウトは壊れてしまいます。
2. Tailwind CSSを使用せずにサイトの出力されたCSSを取得して使用することもできますが、通常はコードベースに散在する数百もしくは数十の小さなCSSをまとめてコンパイルしたものです（コンポーネントごとのCSSファイルを生成する場合）。それはソースコードに頼れるものではないということです。
3. そのため、Tailwind CSS用に構築されたCSSファイルは非標準（別名プロプライエタリ）であり、他のすべてのCSSフレームワークやツールとは基本的に互換性がないのは事実です。一度、Tailwind CSSに使用すると、そこから抜け出すことはできません😱
4. また、おまけとして、基本的にすべてのCSSファイルを@applyで記述することは、CSSを学習して作成していないことを意味します。つまり、あなたはTailwind CSSを作成しているのです。@apply flexと何度書いても、display: flex;と書くことと同じではありません。

多くの場合、プロジェクトで定期的にCSSフレームワークを交換する習慣がないことは理解しています。しかし、実際に私は交換をしました。クライアントのプロジェクトでFoundationからBulmaへの移行です。大量のHTMLと使用中のスタイルシートを更新する必要があるのは事実ですが、以前に作成したカスタムのスタイル定義は手間をかけずに再利用できるので安心してください。プレーンな古いCSS（またはSass）は、何があっても機能します。

@applyは一見クールに見えますが、結局は巨大な松葉杖になります。例えば、Tailwind CSSで面倒なCSS Gridを簡単に実装できます。しかし残念なことに、その場合CSS Gridを本当に理解していないかもしれません。CSS標準を知らないままです。

壮大なスキームの中で@applyが不要な理由として、3つ目の理由につながります。

理由3: Tailwind CSSのデザインシステムとトークンは、CSS変数に置き換えることができる

Tailwind CSSが最初に好まれるポイントは、優れたデザインシステムと微調整できるトークン（カラー・フォントサイズ・スペースなど）がすぐに使用できるからです。見栄えのよい結果をすぐに得られるのは簡単です。

問題は、これらすべてのトークンがJavaScriptで定義されていることです。Tailwind CSSはCSSのフレームワークですが、デザイントークンにJavaScriptを使用しています（2021年現在）。

あまり言いたくはないのですが、最近のブラウザはCSSのカスタムプロパティ（変数）と呼ばれるものをサポートしています。デザイントークンは:rootレベルで変数として定義することができ、どこでも利用できます。サイトが読み込まれている間にリアルタイムで変更したり、DOMツリーの特定の要素を上書きすることもできます。そして、それらはWebコンポーネントとの相性も抜群です。これについての詳細は後ほど説明します。

例えば、Tailwind CSSでclass="mb-8"と記述すると、margin-bottom: 2rem;のスタイルが適用されます。しかし、CSSの変数だと何ができると思いますか？ スタイルシートで:root {--spacing-8: 2rem;} を定義して、好きなところにmargin-bottom: var(--spacing-8);を記述します。文字通り、スタイルシートもJSコンポーネントもあるいはHTMLに直接style=と好きなだけ記述することができます！

レスポンシブ用のブレークポイントになると話は少し曖昧になりますが、ここでの主旨はTailwind CSSがデザインシステムに非標準のJavaScriptベースのビルドプロセスを使用しているということです。

モダンブラウザがネイティブに対応しているのは、、、

理由4: Webコンポーネントが存在することを忘れてしまう

このポイントがTailwind CSSに対する最大の問題点かもしれません。どうやらWebコンポーネントが存在しない世界で考案され、推進されたようです。Tailwind CSSのCSSは、Shadow DOMでは全く使用できません。一部の気鋭のデベロッパーは、Tailwind CSSのスタイリングの一部をビルドプロセスを通してコンポーネントにインジェクトできるソリューションを考え出しましたが、それは間違いなくハックです。

その一方、今日ではShadow DOMを介したグローバルなテーマとスタイルのすべてが連携するWebコンポーネントベースのデザインシステムを構築する方法があります。繰り返しになりますが、これらはすべてモダンブラウザに組み込まれたネイティブのテクノロジーに基づいて行うことができます。肩をすくめてReactやVueに戻る前に、Webコンポーネントは今日のHTML/CSS/JavaScript仕様の不可欠な部分であるだけでなく、ブラウザのテクノロジーのさらなる進歩の中心になりつつあることが増えていることを覚えておいてください（例えば、将来的にフォームコントロールの高度なカスタマイズがどのように機能するかなど）。

このポイントにおいてのTailwind CSSは、BootstrapやFoundationやまたは数年前に作成されたCSSフレームワークと比べて何の役にも立ちません。私の最愛のBulmaも含まれます😢

理由5: Tailwind CSSはdivとspanタグのスープを推奨している

これは前述にも書きましたが、それだけではありません。マークアップのあらゆる場所で<div>と<span>を使用することはアンチパターンであると確信しています。

わたし達はカスタム要素（別名<whatever-you-can-dream-of>）がモダンブラウザで完全にサポートされ、有効になっている世界に住んでいます。<ui-card></ui-card>と記述できるのに、<div class="card"><div>と記述しなければならない理由は事実上ありません。そして実際に、非常に表現力のあるマークアップを記述するために要素と一緒にカスタム属性を使用することは可能です。このマークアップには非常に未来があります！

ShoelaceのWebコンポーネントライブラリを例にとってみましょう。
下記がボタンのHTMLです。

モーダルも見てましょう。

上記のコードは、JSXでもXMLでもありません。また、通常のHTMLに変換しなければならないテンプレート言語でもありません。
これはHTMLです。モダンなマークアップはこんな感じです。

Tailwind CSSのホームページの例と比較してください。

、、、🤢

HTML/CSS/JSの未来の姿がここにあります。バニラCSSでカスタムメイドのグリッドやフレックスボックスのレイアウトをすばやく簡単に記述でき、CSS変数でデザイントークンを定義し、Shoelaceのような適切に設計されたWebコンポーネントライブラリを利用することができます（もちろん、2つまたは3つを混ぜて使用することもできます）。そして、パフォーマンスを管理可能なレベルに戻すためにパージする必要のあるメガバイトのTailwindユーティリティクラスを必要とせず、見た目が素晴らしく、非常にうまく機能するWebサイトやアプリを手に入れることができます。

言い換えると、Tailwind CSSの最大のセールポイントは（ユーティリティクラスを使用したラピッドプロトタイピングの他に）魅力的なデザインシステムにありますが、そのデザインシステムを実装する方法は本当にひどいものです！ デフォルトでWebコンポーネントと互換性がなく、CSS変数を最小限に活用するだけで、関連するスコープスタイルのカスタム要素や属性を推奨していません。

ここで疑問が湧いてきます。Tailwind CSSでどのようにして「モダンなWebサイトを構築」できるのでしょうか。純粋な技術的なレベルでは正直なところ、Bootstrapよりも改善されているとは思えません。また、Bootstrapは少なくともオープンソースのコンポーネントライブラリを無料で提供しています。Tailwind CSSを使用する場合、彼らは支払いをあなたに求めます。

結論: Tailwind CSSが好きなら使用すればいい。しかし、目指すべき未来であると私に納得させようとするのはやめてください

わたし達は、どんな技術でも相対的なメリットや問題点について何度も言い争うことができます。Tailwind CSSを選択することは確かにいくつかのメリットがあります。特に、ユーティリティクラスを使用してたくさんのdivタグを記述するだけで、白紙のページから派手なパンツのデザイン🩳にすばやく移行することができます。

しかし、私はTailwind CSSを1年以上使用してみて、HTML、スタイリング、コンポーネントベースのWeb開発全般に対するアプローチと比較して、長所と短所を検討した結果、Web全体としてTailwind CSSは私が望む方向性ではないと確信しています。Tailwind CSSのファンの皆さんには申し訳ないのですが、私を納得させるような説得力のある議論はありませんでした。

これがTailwind CSSが私には合わなかった理由です。YMMV🙃