Tailwind CSSを推奨しない理由

Tailwind CSSはウェブ開発者の間で非常に人気のあるCSSフレームワークです。グラフィックデザインの知識がなくても、スペーシング、カラー、サイズの標準化を解決してくれます。さらに、少しでも整理整頓が苦手な場合、ユーティリティ（Utility-First Fundamentals）を組み合わせて大きな構造を構築する作業方法を強制されます。これに加えて、理解しやすく検索機能も完璧なドキュメントがあります。過去にはいくつかのプロジェクトで利用し、ユーザーインターフェースを迅速に構築するのに役立ちました。しかし、それにもかかわらず、あらゆるコンテキストで推奨できるツールではありません。中規模または大規模プロジェクトでTailwind CSSを使用する前に、なぜ再考すべきなのか、私の見解と理由を説明します。お願いしたいのは、オープンマインド、自己批判、そして学ぶ意欲です。 数十のクラスを学ぶ必要がある Tailwindには数千のユーティリティクラスがあります。ドキュメントは非常に優れており、エディタのオートコンプリートも大いに役立ちますが、基本クラスをいくつか習得する必要があります。おそらく、最初はブラウザタブを開きっぱなしで、検索ボックスを絶えず使いながら開発することになるでしょう。各クラスを適用する最適な方法を理解するのに時間を費やします。最初は遅いプロセスです。さらに、Tailwindのクラスと混在する独自のクラスを作成した場合、難易度は増します。 構造とデザインの分離を壊す Tailwind CSSは巨大なユーティリティライブラリであり、特定のジョブを持つアトミッククラスです。@applyでクラスをグループ化しない限り、HTMLに数十個のクラスを含めることになります。これは、構造とデザイン、またはHTMLとCSSを分離するという古典的なルールを破ります。HTMLが肥大化し、可読性が低下し、再利用性が失われます。ただし、この点は最も反論が多い批判なので、立ち止まる価値があります。Tailwindの作成者であるAdam Wathanは、防御の基礎となるテキストを書き、彼の議論は良いものです。関心の分離は消えるのではなく、方向が変わります。「セマンティック」CSSでは、CSSはHTMLに依存します。HTMLを再スタイルすることはできますが、CSSは再利用できません。ユーティリティでは、HTMLはCSSに依存します。CSSは再利用可能ですが、HTMLは自己再スタイルしません。どちらの場合も結合は存在し、矢印の方向が変わるだけです。コンポーネントの世界では、ReactやVueがすでにロジック、マークアップ、スタイルを同じファイルに入れているため、この議論は成り立ちます。そこでは、ファイルタイプによる分離はすでにあなたによって壊されています。しかし、サーバーレンダリングされたプロジェクトで、テンプレートとクラシックCSSを使用する場合、分離は依然として完全に理にかなっています。これは普遍的な法則ではなく、アーキテクチャに依存する決定です。 名前が一貫していない その命名は常に一貫しているわけではなく、時には不透明で混乱を招きがちです。配置クラスを見てみましょう。items-center、justify-center、text-center、place-content-centerの違いは何でしょうか？名前は直感的ではなく、明確なパターンに従っていません。興味のある方のために説明すると、items-centerはflexコンテナ内のアイテムを中央揃えし、justify-centerはメイン軸に沿って中央揃えし、text-centerはテキストを中央揃えし、place-content-centerはグリッド内のコンテンツを中央揃えします。一貫性を求めて名前を変更してみましょう：flex-align-items-center、flex-justify-content-center、text-align-center、grid-place-items-center。違いがわかりますか？他にも例があります：justify-centerなのにitems-center（align-centerではない）；borderは1pxですがborder-2は2pxです。積み重なる小さな摩擦です。 デザインシステムは思っているほど強制されない Tailwindの大きな利点の一つは、そのスペーシングとカラーのスケールが、一貫性を強制することです。それは真実ですが、ただし、任意の値という落とし穴があります。w-[347px]、text-[#1a2b3c]、またはp-[5.5rem]を、何も警告なしに書くことができます。これらはシステムを壊すエスケープハッチです。同じプロジェクトでsky-400とblue-400を使用することを妨げるものはありません。一貫性は依然としてフレームワークではなく、あなたの規律にかかっています。システムはあなたを助けますが、あなた自身から救ってくれるわけではありません。 CSS学習の良い入り口ではない Tailwindは、スタイリングをすでにマスターしている場合、使いやすいです。しかし、CSSの経験が少ない人にとっては、学習しているという誤った感覚を生み出します。それは、コードをきれいに保つ努力を取り除く、ミニマリストなCSSの書き方であるかのように伝えます。これほど多くの事前構築済みクラスを使用すると、開発者がCSSを真にマスターする能力が妨げられます。クラス名を付ける時間を節約しても、フレームワークを最も効率的な方法で使用することを学ぶ時間で失います。一方で、Tailwindを深く掘り下げると、プラットフォームの基本を学ぶことから離れていきます。pt-4は、padding-top: 1remに精神的に変換することを強制します。CSSではなく、抽象化における流暢さを獲得します。私の学生や同僚には、Tailwindを学ぶ前にCSSを学ぶことをお勧めします。そして、すでに経験豊富な開発者であれば、フレームワークを必要としないかもしれません。 読みにくい インディゴの背景、白いテキスト、セミボールドフォント、丸みを帯びた角、ホバー、フォーカスを持つボタンを例に示します。まずバニラCSSで。カラーとスペーシングの変数、およびホバーとフォーカス用のネスト（現在すべてのブラウザで互換性があります）を使用する自由をいただきます。 :root { --color-white: #fff; --color-black: #000; --color-indigo: #4f46e5; --color-indigo-hover: #4338ca; --gap-s: 0.5rem; --gap-m: 1rem; } .button { padding: var(--gap-s) var(--gap-m); background-color: var(--color-indigo); color: var(--color-white); font-weight: 700; border-radius: var(--gap-s); &:hover, &:focus { background-color: var(--color-indigo-hover); } } 次にTailwind CSSで@applyを使用します。 .button { @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg hover:bg-indigo-700 focus:bg-indigo-700; } バニラCSSは自己説明的ですが、Tailwindではドキュメントを確認する必要があります。bg-indigo-500の色は何ですか？rounded-lgはどのくらい丸いですか？bg-indigo-700はbg-indigo-500より暗いですか？最初のスニペットは保守が容易で、新しい開発者にとって学習曲線は低く、CSSはモジュール化される傾向があります。バニラCSSでは確かに多くの労力を費やしますが、それは最初だけです。その後、変数、カスケード、命名を完全に制御できます。興味深い詳細です。上記の例では@applyを使用しており、Adam Wathan自身も@applyは「基本的に人々を騙すためだけに存在する」と認め、もしTailwindをゼロから始めたら含めなかっただろうと述べています。つまり、通常のクラスの可読性を回復するためのルートは、Tailwindの哲学と矛盾します。そして、@applyを使用しない場合、HTMLでクラスのスープを飲み込むことになります。 HTMLは優先順位について嘘をつく Tailwindが「カスケードを無視する」と聞いたことがあるかもしれません。それは不正確な言い方です。なぜなら、本当の問題はより微妙で興味深いからです。スタイルシート内の位置に基づいてどのセレクタが勝つかを制御できることは、あらゆるアーキテクチャの基本です。経験の浅いウェブデザイナーがよく犯す間違いは、HTML内のクラスの順序が勝者を決定すると信じることです。しかし、そうではありません。このコードを見てください。 <p class="color-red color-green">I am some text</p> これは何色ですか？わかりません。CSSカスケードを見る必要があります。 .color-green { color: green; } .color-red { color: red; } これで赤になります。なぜなら、.color-redが後で定義されているからです。ここまでは通常のCSSです。Tailwindの問題は、クラスの順序を変更しても、この曖昧さを解決できないことです。見てみましょう。 <p class="text-red-500 text-green-500">I am some text</p> 緑が勝つと思うかもしれません。属性の最後に来るので。しかし、そうではありません、赤になります。勝つのは、HTMLに書かれた順序ではなく、Tailwindが最終的なスタイルシートでそれらのクラスを生成する順序によって決まります。マークアップはあなたに嘘をつきます。HTMLを読むだけでは結果を知ることはできません。そして、その順序はコンパイラによって制御されるため、クラスの順序を変更しても修正できません。あなたは!importantを使うか、競合するユーティリティを避けるかのどちらかになります。これはリーキーアブストラクションと呼ばれるものです。それは約束します