ユーティリティファーストのCSSフレームワークTailwind CSSについて

CSSとはカスケードスタイルシートの略で、スタイルシートとも呼ばれます。
WEBサイトのレイアウトやデザイン部分の指定を引き受けている言語で、最近ではアニメーションなんかも書けます。
私がWEBの仕事を始めたときにはCSSは主要ブラウザがまともに対応しておらず存在しないも同然で、レイアウトはhtmlのtabelタグで行っていました。
その後少しずつブラウザの対応が追いつき、CSSが使えるようになっていくにつれてtableでのレイアウトが廃れて「フルCSS」の時代が訪れ、我々に襲いかかったのがCSSの習得です。
今考えるとCSSは簡単なんですが、当時は凄く難しく感じました。挫折してWEBをやめてしまった知り合いも居ます。
ブラウザごとにCSSの解釈が違う（というか間違ってる）為、どうやって書いてもどれかのブラウザで崩れるみたいな事が頻繁に起こり、IEのバグ対応が上手いことが職業になり得ました。

前置きが長くなりましたが、当時はCSSを覚えるという事が凄く重要だったんですね。
そして使いこなせるようになると楽しくなってきます。
そんな想いまでして習得したCSSを書かないでいい、というのが簡単に言うとフレームワークの役割です。

今ではフレームワークというのは数えきれないほどあるのですが、Twitter社（当時）が公開したBootstrapが一番有名かなと思います。
あらかじめbootstrap.cssやbootstrap.jsなどのファイルを読み込んでいれば、自分でCSSを書かなくてもhtmlタグにクラスを付けるだけでレイアウトや装飾が出来るようになっています。
例えばボタンを作る場合には、btnとbtn-primary等の2つのクラスを付けるだけで余白や角丸、色やマウスオーバー時の挙動などが備わったボタンが実装できます。

See the Pen Untitled (@bkrylxri-the-lessful) on CodePen.

Bootstrapは先ほどのボタンなら、btnには文字サイズや余白や角丸等のボタンの基本的なプロパティが指定されており、btn-primaryには色の指定がされています。
たったふたつのクラスに非常に多くのプロパティが書かれているというのが特徴です。
自分でCSSを書く際の、一般的な書き方と似ています。

対してTailwind CSSの場合は、ひとつのクラスには基本的にひとつのプロパティしか書かれていません。
となると、Bootstrapのようなボタンを実装するだけですさまじい数のクラスを付ける必要があります。
下記は一例です。

See the Pen Untitled (@bkrylxri-the-lessful) on CodePen.

F12で開く開発者ツールで見るとわかりますが、inline-flexというクラスにはdisplay: inline-flex;、h-12というクラスにはheight: 3rem;など、たしかにそれぞれひとつずつしかプロパティが書かれていません。
その為本当にクラスだらけです。

これのメリットと言えば、非常に自由度が高いという事です。
Bootstrapなどの一般的なフレームワークではある程度プロパティがまとめられたクラスが用意されている事が多く、付けるクラスは少なくて済む反面デザインパターンが固定されているので、それを変えたければ結局自分でCSSを編集する必要があります。

Tailwind CSSの場合は、インラインスタイルを書いているような自由さでプロパティをひとつずつクラスとして指定する為自由度が高く、本当に用意されているクラスだけでサイトひとつがほぼデザイン出来るというのがメリットのようです。

とはいえ、既存のフレームワークは最悪CSSをあまり理解していなくてもbtn等のクラスを付けるだけで実装出来ますが、Tailwind CSSはCSSの各プロパティを理解したところからがスタートラインですので、ゼロからの習得という意味では一般的なフレームワークよりも難易度が高そうです。
逆に、元々CSSに精通している方だとTailwind CSSの方が使いやすいかもしれません。

ただ普通はインラインスタイルは避けよと教わるところを、クラスでインラインスタイルとほぼ同じような事をするのは私は何となく違和感があります。

導入の方法はいくつかあり、ここに書かれています。
https://tailwindcss.com/docs/installation
英語なのでちょっとハードルが高いかもしれません。
ここでは一番簡単なCDNを読み込んで使う方法を掲載します。

<script src="https://cdn.tailwindcss.com"></script>

とりあえずhead内にこれを記述すれば、Tailwind CSSは使えるようになります。

各クラスは…ここにあるチートシートがあるので参考に。

Tailwind CSSチートシート

コピペで使えるボタンのコレクションもあります。

Tailwind CSSボタンコレクション

Tailwind CSSを使う場合と、通常どおり自分でCSSを書く場合ではどう違うのでしょうか。
簡単にまとめてみました。

クラス名って意外と考えるのが面倒なので、クラス名の命名から開放されるのは非常にメリットに感じます。
実装方法は適切なクラスをあてがっていくという事だけなので、複数人でひとつのサイトを作る際にルールのすり合わせ等をする必要が無い事も嬉しいですね。

一方、ソースがぐちゃぐちゃになって（いるように見えて）しまうのは私としては受け入れ難いポイントです。
フレームワークなのに、CSS習得度の低い人が触れないというのもハードルの高さを感じます。
Bootstrap等のフレームワークは、そのフレームワークさえある程度わかっていればCSSの習得度に多少差があったとしても同じチームで同じように開発できるというのがメリットのひとつだと思うんですが、Tailwind CSSはそういう事は出来ないでしょう。

開発スピードが上がるという話もありますが、これは実際使ってみないと何とも言えないと思います。
私はTailwind CSSを本格的に取り入れてはいないので、クラスを付けまくる事がCSSを書くよりも果たして本当に早いのか、という点には少し懐疑的です。
少なくともチートシート等を見なくてもすらすら出てくるレベルにならないと、スピードは上がらないでしょう。

あと大きなデメリットとして、そのままでは更新性が非常に低いというものが上げられます。
例えばBootstrapや自作CSSの場合だと、サイト内に100個あるボタンのスタイルを一括で変えたい場合などは単にCSSの.btn{}内の記述を変更すれば100個のボタンが変わりますが、Tailwind CSSは100箇所のボタンに付いているクラスを変更していかないといけません。
それを防ぐためにはReactやVueと言った別のフレームワークを用い、複数個所で使っている部分をコンポーネント化してまとめる必要があります。
なのでTailwind CSS単体での使用は、実はあんまりおすすめできないんですね。
コンポーネント化すると結局命名する事になります。
クラス名を付けなくていい話はどこ行ったんでしょうね。