はじめに

Twitterで一部話題になっていた、TailwindCSSが負債になるという意見に対しての反論記事です。

このmizchiさんという方の一人の意見であればなんとも思わなかったのですが、これに賛同する多数の意見が見られたため、TailwindCSSをよく使ってる自分から反論の意見を書いてみます。

私個人は、TailwindCSSは「CSS設計が面倒と感じる人のための、『いい感じ』にスタイリングしてくれるフレームワーク」だと思っています。

TailwindCSSとはどういうものなのかはここでは省略しますが、詳しくは公式サイトをご覧ください。

クラス名を考えなくていいから『いい感じ』

TailwindCSSはユーティリティーファースト、つまりあらかじめ細かく分けられたCSSクラスが用意されています。
例えばwidthだと

.w-0 {width: 0px:}
.w-px {width: 1px;}
.w-0.5 {width: 0.125rem;} /* 2px */
.w-1 {width: 0.25rem;} /* 4px */
.w-1.5 {width: 0.375rem;} /* 6px */
.w-2 {width: 0.5rem;} /* 8px */
.w-2.5 {width: 0.625rem;} /* 10px */
.w-3 {width: 0.75rem;}/* 12px */

みたいな感じで、細かくクラスが分かれています、これらを組み合わせてスタイリングをしていきます。使いたいユーティリティークラスを直接classに挿入します。

公式サイトより

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

よく使いまわすようなスタイル、例えばボタンや入力フォームなどのパーツは、VueやReactを使っていればコンポーネント化して使いまわすことを勧めます。ボタンの例だと、

export default function Button {
    return (
         <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
          Button
        </button>
    )
}

TailwindCSSを親の仇のように憎んでいる人は、この見栄えの悪さだと思います。1class対1プロパティという考えだと確かに気持ち悪く感じますね。

しかし、一つ一つのクラスはそれぞれ一つの意味しか基本持ちません。なので読み取るときは一つ一つのクラス名から何を意味しているのかわかれば難しいことはありません。TailwindCSSのクラス名はすべてわかりやすいように命名されています。「うわ、なんかクラスがたくさんあってわかんない」と思考を停止しないで、一つ一つ読み取ってあげてください。

例えばこのボタンだったら、「bg-blue-500だから背景青で、hover:bg-blue-700だからhoverするともう少し濃くなって、テキストは白で・・・」と読み取れます。

直接書き込むので、わざわざクラス名を書き込まなくて済む、尚かつそのスタイルが何をあらわしているのか、そのコンポーネントだけを見ればわざわざ別のファイルを開かなくても済む。レスポンシブもhoverやfocusもダークモード対応も、全部直接書き込むことによって実現できます。これはめんどくさがりにとってはめちゃくちゃ利点だと思います。「このボタンのスタイルなんだっけ」と思ったら、そのボタンのコンポーネントを読むだけで済みます。

じゃあTailwindCSSも使わず直接cssプロパティを書き込めばよくないかと思いますが、TailwindCSSのほうが記述量が少なくて済み、可読性も上がります。なので直接cssプロパティを書くよりも断じてTailwindCSSを使ったほうがいいです。

調整が『いい感じ』

TailwidCSSはrem単位で調整されています。remとはhtmlの文字サイズを基準とするサイズで、特にhtmlの文字サイズを設定しなければ1rem=16pxです。Webデザインの世界では8の倍数ルールでデザインをするので、スタイルを組むのにすごく『いい感じ』にしてくれます。
例えばこのボタン

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

もう少し横方向広げたいなと思ったら、

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-5 rounded">
  Button
</button>

このボタンの上下にちょっとマージンとってほしいと思ったら

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-5 my-2 rounded">
  Button
</button>

みたいな感じで、この数字をちょこっと動かすとうまい感じに幅を調整できます。値を1増やすと1pxでは少ししか変化はありませんが、これだと1増やすと0.25rem増えるので、見た目に少し変化ができ調整が簡単にしやすいです。

色も大体の色が100～900で100単位ずつで用意されているので、「濃い赤」「薄い赤」を色コードでなく数字で
text-red-300 text-red-700 と表せるので『いい感じ』です。細かい色をカスタマイズしたい場合はtailwind.config.jsで調整できます。

またCSS Grid,Flexboxもめちゃくちゃ便利です。
例えば「スマホではこの画像は2列で表示したいけど、タブレット以上のサイズでは4列で表示したい」みたいなケースでは、

<div class="grid grid-cols-2 md:grid-cols-4">
 <img src="img/image1.jpg"/>
 <img src="img/image2.jpg"/>
 <img src="img/image3.jpg"/>
 <img src="img/image4.jpg"/>
</div>

というように直感的に書けます。自分はgirdはとてもすごい機能だと思いますが、素のCSSだと「これってどう書くんだっけ」みたいなことが多いのでTailwindCSSで楽してます。デフォルトで6行12列までのgridの分割が用意されているので、これをうまく組み合わせれば好きなところにコンテンツを置けます。

それとTailwindCSSにはJITモードというものがあり、

<p class="my-[18px]">
    Hello World
</p>

など直接単位を書き込めます。remで調整するのが難しい場合などは活用するのもありです。これも『いい感じ』に使える点です。

CSSが無くならない限り使えるから『いい感じ』

これは最初の「TailwindCSSは負債になる」への意見へのアンサーですが、TailwindCSSはそれぞれの中身はほぼ一行のCSSです。BootStrapのようにJavaScriptに依存しているわけでもなく、Railsのようなすごく複雑なコードが組み込まれているわけでもありません。わからない部分と言えば不要なCSSプロパティを削除してくれる機能ぐらいです。CSSに関しては読めば全部わかります。

全部直接スタイル書き込むので、「命名被ってスタイル崩れた」なんてことはありえません。

たとえTailwindCSSのメンテが放置されても、移行したければ中身はCSSなので一つ一つそのままstyleを書けば何ら問題はありません。

またBootStrapやBulmaのようなできあがっているデザインを使うものでもありません。それらと比較するのはナンセンスです。

負債になるとしたら、@applyを多用することです。あるクラスを作ってTailwindCSSの記述を一まとめにしてくれるものです。ごく一部で使うのであればいいと思いますが、多用すると結局普通のCSSと何も変わりありません。命名の負担が増えます。

TailwindCSSの欠点はクラス名が長くなることですが、1対1にほぼ対応しているので通常のCSSで書くこととやってることは全く同じです。要はタグに書き込むか別ファイルにするかの違いです

こう記述するか

公式サイトより

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

こう記述するかの違いです。

公式サイトより

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

TailwindCSSが負債になるならCSSの理解が足りないかそもそも他のところに負債になる原因があると思います。

CSSをちゃんと理解しましょう

自分がTailwindCSSを勧める以上に伝えたいことは、CSSをちゃんと理解しましょうということです。CSSの理解がなければTailwindCSSもCSS in JSもBootStrapもChakra UIありません。理解すれば別にどれを使おうが自由です。BEMを使うのも大いにありです。

TailwindCSSはCSSを書きやすくしたものであるだけなので、TailwindCSSが使えるからと言ってすごいデザインが作れるというものではないです。ただ書きやすくなるだけです。CSSのちゃんとした理解が要求されます。

またいちいちボタンやヘッダーやフォーム書くのめんどくさいという方は、Tailwind UIなどのUIコンポーネントライブラリがあるので、それらを活用して自分でコードを調整するというのもありです。

またクラス全部覚えられないという方、安心してください。自分も全部は覚えてないです。VS Codeでは拡張機能があるのでうまく活用し、公式のドキュメントにわかりやすく一覧で載っているので、それをよく見て使いたいクラスをもってきています。

今のCSSはほんとにやれることが昔よりもかなり増えているので、一度最新のCSSの機能をコリスなりYouTubeなりで絶対に学習することを勧めます。

自分の意見としては、TailwindCSSは10年後には別のものに置き換わって無くなっている可能性はあるが、TailwindCSSが負債でプロジェクトが難航するなどのことはないと思います。