arrow一覧に戻る

2021.06.17

TailwindCSSって何?なんで流行ってるの?

はじめに

この記事はTailwindCSSが最近流行ってるけどなんで流行ってるの?という疑問をいただいた、フロントエンドエンジニア歴3年ほどの人間が調べてわかったことをまとめた記事です。以下のようなことがわかります。

  • TailwindCSSとは一体なんなのか?
  • CSS設計とは違うの?Bootstrapなどとの違いは?
  • どんな背景があって流行るようになってきているのか考察
  • Design Systemとの相性は?

TailwindCSSとは一体なんなのか?

ものすごくざっくりまとめるとユーティリティクラスの詰め合わせのライブラリと表現できるのかなと思いました。

以下のTailwindCSSの公式ドキュメントに書いてあることについて軽くまとめます。

https://tailwindcss.com/docs/utility-first

まずはコードを見てみる

まずTailwindを使わない普通のHTMLのコードは以下のようなコードが一般的かと思います。

Before

<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>

これがTailwindCSSを使うと以下のように書くことができるようになります。

After

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-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-gray-500">You have a new message!</p>
  </div>
</div>

どうでしょうか?TailwindCSSに慣れていない人がみるとギョッとするのではないでしょうか?

Beforeのコードで、chat-notificationと書かれていたクラスが、

p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4

という複数のクラスに変わっています。

p-6 というのは padding: 1.5rem のみが定義されたクラスです。その他のクラスも基本的にはプロパティが1~3個だけ定義されたクラスになっています。

このようにTailwindCSSでは、スタイリングを全て、ユーティリティクラスによって表現します。

CSSの勉強をしたことがある人だと、このようなページ上の意味を持たないクラス名をつけるのはアンチパターンとして最初に習ったのではないでしょうか?

しかし、TailwindCSSの公式ドキュメントではこの書き方に対して以下のようなメリットが挙げられています。

メリット

  • クラス名を考えなくて良い CSS設計の規則が導入されているプロジェクトだと一つのクラス名を考えるのに数分とられてしまうのも珍しいことではありません。TailwindCSSではその必要がなくなります。
  • CSSのファイルがむやみに増えない 従来の方法だと新しい機能やコンポーネントを追加するたびにどんどんCSSファイルが増えていくことになります。TailwindCSSではCSSを新たに書く必要がないため、CSSファイルの数が膨大になり、管理が大変になるといったことが起きません。
  • 安全に変更が可能になる、HTMLファイルに変更が閉じられるので影響範囲が増えない 例えば「paddingがデザインと少しずれていたので直したら、別の場所のレイアウトが壊れた」なんていう経験は誰しも一度はあるのではないでしょうか? TailwindCSSであればHTMLに対して直接スタイリングの定義を行うため、上記のような問題は発生しません。CSSはグローバルであり、HTMLはローカルなためです。

メリットはわかったけどそれって、インラインスタイルでコードを書くのとなにが違うの?と思った人もいると思います。その問いに対して、以下のように回答しています。

インラインスタイルと何が違うの?

  • レスポンシブが可能 インラインスタイルではレスポンシブを行うことができません。しかし、Tailwindにはレスポンシブユーティリティが用意されており、レスポンシブを行うことができます。例えば、sm:text-left というclassをHTMLに書くと、画面幅がmin-width: 640px の際にtext-align: left が適用されます。
  • ホバー、フォーカスの状態に対するスタイルが当てられる これもインラインスタイルでは表現ができない項目ですが、TailwindCSSなら表現できます。例えば、hover:text-left というclassをHTMLに書くとhover時にtext-align: leftが適用されます。(こんなクラスを書くことはあまりありませんが…)
  • インラインスタイルはマジックナンバー化してしまう。tailwindCSSならそれが起きない。 例えばインラインスタイルでcolor: red というスタイルをHTMLにいくつか定義し、あとから一部だけその値を変えたいとなった場合に、一つ一つ変更して問題ないか?を確認する必要があります。 しかし、TailwindCSSであれば、クラス定義に適用される値が、設定ファイルにまとまっているため、その設定ファイルを変更するだけで、適切に変更することが可能になります。

ユーティリファーストのアプローチを用いると保守が可能なのか?という懸念があると思います。

それに対しては以下のように回答しています。

保守できるの?

  • VueやReactといったライブラリを用いていれば、コンポーネント化することで解決できる。 TaiwindCSS自体、コンポーネント化されることを前提として作られているライブラリであることがこの回答から読み取れます。
  • @applay という機能を使うとTailwindのクラスをまとめたクラスを作ることも可能。
.btn {
    @apply py-2 px-4 font-semibold rounded-lg shadow-md;
  }
  .btn-green {
    @apply text-white bg-green-500 hover:bg-green-700;
  }

CSS設計とは違うの?Bootstrapなどとの違いは?

ここまで読んだ方であればなんとなくお気づきかと思いますが、CSS設計と言われる命名規則とは全く真逆の手法を取っています。

例えばBEMではHTMLに対して、UIに紐づくクラス名をつけるのが一般的です。例えばBEMでは、メニューのタイトルに対してのクラス名はmenu__title のようになります。こうすることで、そのCSSが「どこの何に対して、適用されるのか?」がわかりスコープが明確化し、CSSが膨大になっても保守しやすくなります。

UIの構造に依存する形でCSSを書いていたと言い換えても良いかもしれません。Bootstrapを始めとしたUIライブラリでもUIの構造をCSSの命名に用いています。

一方でTailwindCSSでは、UIの構造を一切CSSに持ち込みません。今までのCSS設計のアプローチと全く真逆といっても良いかもしれません。CSSにUIの定義をするのではなく、HTMLに対して直接スタイリングを行ってしまおうという思想だと自分は感じました。

なんで流行ってるのか考察

CSSはグローバルスコープであるがゆえに崩壊しやすく、様々な手法が発明されてきました。

一方でそのCSSに対してスコープを作るライブラリが近年スタンダードになってきています。Vueなどは標準でその機能を持っていますし、Reactもライブラリを用いることでCSSにスコープを持たせることが可能です。

その結果、命名規約に沿ったクラス名を考えるコストに対して、得られる恩恵が少なくなってきています。コンポーネントを作れば自ずとその中にCSSのスコープが閉じられるためです。

TailwindCSSではCSSのクラス名を考える必要が一切ないため、時代の流れにあっているのかもしれません。共通化させたい色や、大きさといったCSSのプロパティの値もTailwindCSSを用いることで安全につくることが可能です。

また、ReactやVueといったライブラリが台頭していること自体がTailwindCSSの流行を後押ししているとも感じました。

これらのライブラリの台頭によって、コンポーネントをファイルで分けることが当たり前になりました。 一般的なCSSの命名規則では、UIの構造をCSSのクラス名に持たせていましたが、VueやReactによってCSSがUIの情報を持っている必要性がなくなったのではないか?と考えました。

ファイルの区分で明確にコンポーネントの区分がわかるようになったことで、TailwindCSSのHTMLに直接スタイルを書くという手法が可能になったのではないでしょうか?

この項を書くにあたり、以下の記事を参考にしています。気になる方は読んでみてください。

https://qiita.com/rmlabo/items/08bd9ab2d3794a6a6f46

TailwindCSSのデメリット

以下の記事が参考になります。

https://coliss.com/articles/build-websites/operation/css/why-tailwind-css-is-not-for-me.html

ざっくりとまとめると、次のようなことが挙げられています。

  • @apply はTailwindCSSがビルドプロセスにある場合にのみ利用可能、使うとtailwindCSSから抜け出せなくなる
  • Theme機能はCSSの機能で代用可能
  • Web標準が提唱している方向性と合致していない。例えば、Webコンポーネントとの相性が悪い。将来性が微妙なのでは?

また、

  • TailwindCSSのクラス名を覚えることに初期学習コストがかかること
  • 一般的なCSSを書いてきた人からすると、ユーティリティクラスのみでスタイリングすることへの抵抗感がかなり強いこと

もデメリットとして挙げられます。

Design Systemと相性がいいの?

TailwindCSS自体がDesign Systemを提供しています。

https://tailwindui.com/

またTailwind自体、Design Systemとの相性は良さそうだと感じました。

  • themeというデザイントークンを表現できる機能がある
  • 開発者目線だと極力生のCSSを書かないというルールを導入することでデザイントークンの適用漏れを防げる。

一方で、HTML/CSSのみでDesign Systemを作りたいケースには向いていないと感じました。クラス名とコンポーネント名の一致をとることができなくなるためです。 例えば、最初のコード例であげた、 chat-notification というクラスをp-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4 に置き換えた場合です。

<!-- before -->
<div class="chat-notification">
<!-- 省略 -->
</div>

<!-- after -->
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
<!-- 省略 -->
</div>

前者であれば、「どこまでがchat-notificaition というコンポーネントなのか」がHTMLから読み取ることが可能です。 しかし、後者になってしまうと、どこまでがなんのコンポーネントなのか?という情報をHTMLのみから読み取ることができなくなってしまいます。そうなると保守や改修が難しくなってしまうため、HTML/CSSしか使えないというケースにおいては、TailwindCSSは向いていないと考えます。

まとめ

TailwindCSSはReactやVueといったフレームワークを用いて開発を行うのであれば、かなり有用なCSSフレームワークだと感じました。

一方で、それらを用いずに、HTML/CSSのみでコーディングをする必要があるようなケースでは採用することは難しいと感じます。

そもそもビルドを行わないとTailwindCSSが動かないという要因もありますが、HTML/CSSのみだと、UIの構造の情報を持たせる箇所としてCSSのクラス名を使う必要があるからです。

ReactやVueを使っている人でプロジェクトに導入するCSSフレームワークを悩んでいる場合は選択肢の一つとしてかなり有力な候補に挙げられると思います。

参考

https://tailwindcss.com/docs/utility-first

https://qiita.com/rmlabo/items/08bd9ab2d3794a6a6f46

https://yuheiy.hatenablog.com/entry/2020/05/25/021342

https://adamwathan.me/css-utility-classes-and-separation-of-concerns/

https://coliss.com/articles/build-websites/operation/css/why-tailwind-css-is-not-for-me.html

この記事を書いた人

田所 舜 フロントエンドエンジニア

新卒でオンライン学習サービスのフロントエンドエンジニアを経験。新規マッチングサービスのフロントエンド、5年以上続くサービスのシステムのフルリプレイスを経験。その後受託開発ではサーバーサイドおよびインフラも経験し、2020年3月にFixelに入社。Fixelでは主にフロントエンド開発やコーディングを担当。

Contact

どのようなお悩みでも
まずはお気軽に
ご相談ください

arrow

Careers

柔軟で先進的な思考を持った
デザイナーやエンジニア、
コンサルタントを募集しています

arrow

Copyright© Fixel Inc. All rights reserved.