Tailwind CSSのメリット・デメリットをコーダー歴15年が語る。

今回はちょっと技術的な内容の記事になります。私はHTML/CSSコーディング歴15年の現役フロントエンドエンジニアです。先日、Tailwind CSSのスタートアップ記事を投稿しましたが、Tailwind CSS自体は使い始めて1年弱が経ちましたので、メリットとデメリットを書いてみたいと思います。

想定読者
・これからTailwind CSSを始めてみようと思っている
・HTML / CSSを使ってコーディング経験がある
・何かしらCSSフレームワークを使ったことがある

私は中学生からWebに興味を持ち始め、独学で勉強し専門学校を経て、某印刷会社のWebデザイナーとして新卒入社しました。当時はテーブルレイアウトと言われるコーディング手法が主流で、CSSバージョン2の時代でした。余白を作るだけでも、透明の画像（spacer.gif）を用意して余白を作っていたり、角丸もCSSでは表現できないので、画像を使って角丸を表現していました。（懐かしい…!!）

2社目はサービス会社のインハウスWebデザイナーとして入社し、出来ることの幅を広げながら時には映像制作をしたり、時にはフロント・バックエンドエンジニアとしてプログラミングをしたり。でも一番長いのはWebコーディングということで、広く浅くはありますがタイトルにコーダー歴15年と書かせて頂きました。

前置きはさておき、今回はTailwind CSSを使ってLPをフルコーディングしたので、私なりの観点でメリットとデメリットを書いていきたいと思います。

そもそもTailwind CSSとは？

Webサイトをコーディングする工程として、欠かすことの出来ないのはCSSです。カスケーディングスタイルシートと言って、全てのWebサイトはCSSを使ってデザイン（色やレイアウト等）を表現しています。例えば、文字色を赤くしたい、と言った場合には…

<p class="text01">赤色にしたい</p>

<style>
.text01{
    color:red;
}
</style>

かなりシンプルな例ですがこんな感じで書くことで、「赤色にしたい」の文字が赤くなります。しかし、この場合はHTMLとCSSを両方記述する必要があります。通常はHTMLに直接CSSを書かないので、別ファイルとしてstyle.css等を用意して<style>の中身を記述します。なので、HTMLを見るだけではどんなスタイルが定義されているかは分かりません。

一方、これをTailwind CSSで書いた場合は…

<p class="text-red-600">赤色にしたい</p>

これだけで済みます。600は色の濃さなので、50と100から900まで100刻みで宣言できます。数値が高ければ高いほど濃くなります。これならHTMLを見るだけで、どんなスタイルが定義されているかが一目瞭然ですね。

他にも、marginやpadding、font-sizeやdisplay等、CSSで表現出来るスタイルがほぼ全て用意されているので、CSSを記述することなくデザインを表現出来るのがTailwind CSSの特徴です。

そんなのBootstrapでも出来るじゃん！ってお思いの方いると思います。Bootstrapで構築したサイトって、如何にもBootstrap感が出ませんか？
だからBootstrapを使ってコーディングしても、コーダーは頑張ってデザインに寄せようとして独自のCSSを定義します。つまり、Bootstrapでユニークなデザインを表現しようとした場合、Bootstrapと独自のCSSを併用しなければいけないケースがほとんどで、コーディング規約のない案件にとっては、コーダーの力量に依存してしまうことが難点です。（そもそもBootstrapを使わないって言っちゃえばそれまでなのですが…）

CSS設計における3大メソッド「OOCSS」「BEM」「SMACSS」があるのは分かります。しかし、これらのメソッドを導入しようとしても、オブジェクト指向から学ばなければいけなかったり、コンテナの概念や、命名規則であったりと、ルールを理解して実装出来るまでの学習コストがどうしてもかかってしまいます。

ある程度CSSを理解していればという前提条件は必要ですが、Tailwind CSSを使えばコーダーの力量に依存しない形でコーディングが出来るので、ある程度は保守性が担保されるのではと思います。

以上のことを踏まえて、本題に入りたいと思います。

Tailwind CSSのデメリット

あえて先にデメリットから挙げたいと思います。

1) HTMLのコード量が多くなるので可読性が悪くなる
2) 共通のデザインを修正する場合に大変（大規模サイトに向いてない）
3) Tailwind CSSを知らないコーダーに引き継ぐと大変なことになる

一つずつ説明していくと、まず【1) HTMLのコード量が多くなるので可読性が悪くなる】についてです。
Tailwind CSSのお作法は簡単に言うと型の決められたインラインスタイルに過ぎないので、定義するクラスの数が多くなればなるほど、HTMLの可読性は悪くなります。実際に私がコーディングしたHTMLを見てみると…

<div class="tab w-full overflow-hidden border-t rounded-xl mb-4">
    <input class="absolute opacity-0" id="tab-01" type="checkbox" name="tabs">
    <label class="block p-5 leading-normal cursor-pointer bg-white overflow-hidden" for="tab-01"><span class="tab-title">Q. 前月分の料金が確定するのはいつですか？？</span></label>
    <div class="tab-content overflow-hidden border-l-2 border-theme-blackyellow leading-normal">
        <p class="p-5">お客さまの締め日から10日後が料金確定日の目安です。</p>
    </div>
</div>

今回制作したLPのQ&Aの一部HTMLですが、ぱっと見ではどんなスタイルになっているかは分かりづらいです。また、コード量が多くなることで、特定のHTMLを探すのにも時間がかかります。なので、ブラウザで表示される文字列で検索をかけて見つけ出すことが多くなります。

続いて【2) 共通のデザインを修正する場合に大変（大規模サイトに向いてない）】についてです。
デメリットの(1)に付随する内容でもあるのですが、同じデザインで複数のページをTailwind CSSを使って実装されていることを想像すれば分かると思いますが、デザインを修正する場合は全てのHTMLファイルを修正する必要があります。同じスタイルでも、クラスの順番が違えば文字列置換も出来ません。

大抵の場合は共通のテーマファイルなどにTailwind CSSを実装しているケースが多いと思うので、静的なHTMLを複製して使うケースは稀かとは思いますが、いずれにしても大規模なサイトでTailwind CSSを採用するのは不向きであると思います。

ただ、Tailwind CSSはコンポーネント化を想定しており、VueやReactなどのコンポーネントベースでサイトを構築する場合は、この限りではないかもしれません。その代わりちゃんとコーディング規約をしっかりと定める必要はありそうですが…

最後に【3) Tailwind CSSを知らないコーダーに引き継ぐと大変なことになる】についてです。これはベトナムのコーダーさんにお願いしていた時に実際にあった話なのですが、「既存ページはこれです。このデザインを追加してください。」っていう状態で渡すと、Tailwind CSSのクラスを無理やり別のCSSでセレクタを上書きしようとしたり、独自のCSSを追加したりとオレオレCSSの無法地帯になります。ちゃんとコーディング仕様を伝えましょうねっ。コードレビューしっかりしましょうねって話なんですけど…

Tailwind CSSのメリット

後味はよい方がいいので、メリットは後半にしました。

1) デザインを実装することに集中出来る
2) レスポンシブコーディングが簡単に出来る
3) いろんな手間を自動化出来る

まず【1) デザインを実装することに集中出来る】についてです。
どういうことかと言うと、普通にCSSでコーディングしている場合に、「クラスの命名」「セレクタの詳細度」「再利用性」「保守性」「拡張性」等々…デザイン以外に考えなくてはならないことが多々あります。Tailwind CSSを使えばこれらのことをすっ飛ばしてデザインを実装することに集中出来るというメリットがあります。ある程度公式ドキュメントを読めば、直ぐに実装作業に取り掛かれるので非常にとっかかりやすいです。

続いて【2) レスポンシブコーディングが簡単に出来る】についてです。
Tailwind CSSは、一般的なデバイスの解像度に合わせてデフォルトで4つのブレークポイントが用意されています。

/* Small (sm) */
@media (min-width: 640px) { /* ... */ }

/* Medium (md) */
@media (min-width: 768px) { /* ... */ }

/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }

/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }

メディアクエリを定義する必要がないので、HTMLのクラスにmd:とかlg:を付けた後に通常のTailwind CSSのクラスを書けば、そのウィンドウ幅に応じたスタイルが適応されるということです。もちろん、ブレークポイントをカスタマイズすることも可能ですが、スマホはsm、タブレットはmd、パソコンはlgって感じで使い分ける感じになります。

<img class="w-16 md:w-32 lg:w-48" src="...">

上記の例ですと、ウィンドウサイズが768px未満だとw-16が適応され、1024px未満だとw-32が適応され、1025px以上だとw-48が適応されます。このようにウィンドウサイズに応じて画像の幅を可変することが出来ます。

これを通常のCSSでやろうとした場合、5分かかるところを1分で済ませられる。そんなイメージで考えてもらったら分かりやすいかと思います。難点はやっぱりデメリットでも挙げたコード量が多くなることですね…

最後に【3) いろんな手間を自動化出来る】についてです。
難しい話はあまりしたくないので、あえてここまでPostCSSの話をしてきませんでしたが、Tailwind CSSはPostCSSのプラグインのひとつであるということも触れておきましょう。
PostCSSはNode.js製の「CSSツールを作るためのフレームワーク」として、300種類以上のプラグインが存在します。FacebookやGoogleも導入しているぐらい有名なフレームワークです。

Tailwind CSSはCDNも存在しますがそれだけで3MB弱あるので、通常はPostCSSでビルドして最適化されたCSSファイルを使います。何を自動化出来るかと言うと、一番有名どころで言うと「Autoprefixer」というプラグインで、サポートブラウザを指定することで、必要なベンダープリフィックスを自動で付与してくれたり、「cssnano」というプラグインではCSSのminify（圧縮・軽量化）してくれたり、「PurgeCSS」というプラグインでは未使用のスタイルを削除してくれたりと、従来のCSSコーディングでは人力でやらなければいけなかった（あるいは出来なかった）ことを自動化してくれます。

コンフィグファイルをいろいろ修正したり、CLIでnpmやyarnコマンドを叩いたりすることが多いので、これらの作業に慣れてないと若干ハードルに感じるかもしれませんが、慣れてしまえばTailwind CSSの素晴らしさに気づけると思います。

まとめ

私はTailwind CSSを使ってコーディングしたのは今回が初めてですので、まだ見え隠れするメリット・デメリットはあるかもしれません。

でもテキストコーディングで20,000ピクセルを超えるLPを15時間で完成させることが出来たのは今後の工数指標に出来ると思います。今回はモバイルファーストなので、パソコン版のデザインを変えたりするともっと時間はかかると思います。

一昔前ではアンチパターンと思われていたユーティリティーファーストのTailwind CSSがなぜ流行っているかを考えたときに、VueやReactなどのフロントエンドの技術が進歩しているからだと思います。それらの技術と組み合わせることで、フレームワークのメリットを最大限に活かせると思います。