こんにちは！<a>タグにhref付けなくても良いことを昨日知ったMizutani(@sirycity)です。普通に必須だと思ってた。

今回はCSSフレームワーク全般の中でtailwind.cssがいかに異質かって話と、この異質さのおかげでCSSフレームワーク不要派の人ほどtailwindがしっくり来るんじゃないか？という話をします。

CSSフレームワークとは

すごく簡単に説明すると、よく使う .class{} が予め大量に定義してある巨大なCSSファイルみたいなものです。

こういう予め出来上がっているclassを使うことで、工数が削減できるのがメリットですね。まあフレームワークってそういうもんやな。

中にはJSが付いてくるやつもありますが、だいたいCSSファイルって認識でok。

有名どころだとこんなのがあります。

• bootstrap 一番有名
• foundation たぶん二番目に有名
• Bulma たぶん三

CSSフレームワーク不要派の意見

ただ、CSSフレームワークは不要だという人、使わない人も大勢いるかと思います。実際自分の周りにも大勢いるし自分もtailwindに出会う前はそうだった。

しかもCSS初心者で導入方法がわからんとかでもなく、経験のある人でも不要派はまあまあいる。

本来なら作業効率が上がるはずのCSSフレームワーク、なぜ不要だと考える人が多いのでしょう？

使っても作業効率が上がらない

この意見が最も多かった。自分もそうでした。boostrapとか使っても全然作業早くならなかった。

しかし何故でしょう。もしCSSフレームワークの挙動を完全に理解しているならば、使ったほうが早いに決まってます。少なくともタイピング量は減る。

これには↓こういった理由があるんじゃないでしょうか。

学習コストが高い？

CSSに限ったことじゃないですがフレームワーク学習するのはそれ相応の学習コストが必要です。

でも、CSSフレームワークはバックエンドのそれと比べればはるかに学習コストは低いはず。クラス名を覚える手間は必要ですが、手間はそのくらいです。

となると、学習コストは理由の半分くらいな気がします。自分としてはむしろ、次の理由が大きいのでは？と考えます。

余計なスタイルが付き、それを調べるのにも打ち消すのにも手間がかかる

CSSフレームワークは1つのクラスに細かなプロパティがたくさん付いてきます。これらはスタイルをきれいに見せるための工夫...ではあるんですが、

それってデザイナーなら自分で最適化できるんですね。微妙な間隔をpaddingで微調整するなんて、デザイナーの腕の見せ所です。

しかし、大半のフレームワークはその微調整を勝手にやってしまう。結果、おせっかいで付いてくる微妙な調整を上書きする手間が大量発生します。

わかりやすい例として.container要素を挙げましょう。

<div class="container"></div>

一般的なcontainerの説明は割愛しますが、bootstrapにもbulmaにも該当する要素はあります。多分他のCSSフレームワークにもある。

ここで一つの悲劇が起きます。

このcontainerクラス、bootstrapは15px、bulmaは32pxのpaddingが勝手に付いてきます。

おそらく綺麗なスタイルを手軽に実装できるように、という願いが込められているのでしょう。感服いたします。デザインに精通していない人には有り難い仕様です。

しかし、この15px、32pxのpaddingが適切であるという根拠は何でしょうか？しかもこれらの数字はcontainerという名前からは類推できず、調べなければ分かりません。この数字を調べるより自分で定義してしまった方が早いし、適切な数値をスタイリングできます。

結局CSSフレームワークの短所はここに尽きます。

• 余計なスタイルが付く
• その余計なスタイルが何かを調べるのに時間がかかる
• その余計なスタイルを打ち消すのに手間がかかる

不要派ほどtailwind.cssにハマる

tailwind.cssはCSSフレームワークの一種でありながら、これら3つの問題を見事に解決します。

順番に見ていきましょう↓

余計なスタイルは付かない

tailwindは基本的には1クラス1プロパティです。containerなら横幅しか定義されません。paddingは付きません。paddingはデザイナーが必要とするものを明示的に定義すれば良いのです。

スタイルが何かを調べるのに時間がかからない

1クラス1プロパティですから、調べるのが簡単です。「このクラス名はこのプロパティ！」以上。全て公式サイトに載っています。

スタイルを打ち消す必要がない

勝手にいらないスタイルが付いて来ないので打ち消す手間もいらないです。

ついでに学習コストも低い

ここは賛否両論あるかと思います。個人的にはこんな感じ↓

• とりあえず導入するまでの学習コストは高い
• 実用レベルに達するまでの学習コストはやや高い
• 挙動を完璧に理解するまでの学習コストはかなり低い

結論

この記事の4割くらいは私自身の体験談です。筆者はフロントエンドエンジニア+デザイナーですが、bootstrapもbulmaも全く馴染めず長い間CSSフレームワーク否定派でした。

しかし、従来のCSSフレームワークの欠点と、それを克服するtailwindの存在を認識した結果tailwindがすんなりと馴染み、今ではほぼ全ての開発でtailwindを使用しています :)

tailwind.cssで個人的に好きなのが色指定のシンプルさ。他のCSSフレームワークだと色には用途を表す単語が付くことが多い... 赤だとdanger、青だとinfoとか。でもtailwindはそのまま。赤ならred、青ならblue。この方がずっと分かりやすいと思うな― #css #tailwindcss

— Mizutani@フロントエンドエンジニア (@sirycity) May 31, 2020

CSSは魔境です。taiwlindが魔境へと果敢に挑む全てのデザイナーの追い風とならんことを。上手いこと言ったつもりか。