Tailwind CSSとは

人気上昇、必須スキルになりつつあるCSSフレームワーク『TailwindCSS』。どんなものか知りたい、使ってみたいという方も多いのではないでしょうか。

Web制作初心者、学習をはじめて間もない方に分かりやすいようTailwindの特徴や人気の理由を紹介します。

Tailwind CSSは、オープンソースのCSSフレームワークです。ユーティリティファーストという考え方をコンセプトに設計されていることが特徴です。

このクラス設計により「一般的なCSSフレームワークより、オリジナリティの高いデザインのWebサイト及びWebアプリケーションを素早く作成することが可能」であると人気を集めています。 OpenAI/ChatGPT や Shopify などの超有名サイトでもTailwind CSSが使われていますよ。

https://tailwindcss.com/

Tailwind CSSのバージョン1.0がリリースされたのは、2019年。 CSSフレームワークとしては比較的新しいものですが、リリースから短時間で世界的に人気を獲得し話題となりました。

日本でも2020～2021年頃から利用者が爆増。『npm trends』によると、2023年にDL数がBootstrapを超えていますね。

画像元：https://npmtrends.com/bootstrap-vs-tailwindcss

そもそもCSSフレームワークって？

CSSフレームワークとは、CSSのコードがまとめられたものです。
用意されているCSSのコードファイルを読み込むんでおけば、HTMLにクラス名を書くだけでスピーディーかつ安定したWebページ・Webページに必要な構成パーツのコーディングが出来る、という事が導入する最大のメリットです。

CSSフレームワークにはBootstrapやMaterial UIなど、様々な種類があります。こうした中で、Tailwind CSSが爆発的に利用されるようになったのは、ユーティリティファーストという考え方が従来のCSSフレームワークとはクラスの構成・考え方が大きく異なるため。どのように違うのか、なぜ評価されているのか、Tailwind CSSの特徴を見ていきましょう。

Tailwind CSSの特徴“ユーティリティファースト”

ユーティリティファーストとは

Tailwind CSSの紹介では「ユーティリティファーストのCSSフレームワーク」であると表現されます。ここで言われているユーティリティファースト（Utility First）は、実用性・使いやすさを優先して制作する、という考え方です。

これだけだと、抽象的すぎて何のことかよくわからないですよね。具体的には、素のCSSを書かずにTailwind CSSが提供しているクラスのみを使用してスタイリングしていくという方法になります。このTailwind CSSが用意しているクラスは、ユーティリティクラス(Utility class)と呼ばれています。

コーディング比較

下記のような簡単なボタンのコーディングを例に、コードを見比べてみましょう。

CSSフレームワークを使わない（素のCSSを書く）場合
Bootstrapを使う場合
Tailwind CSSのユーティリティクラスを使う場合

スタイリング例 »

①CSSフレームワークを使わない場合

CSSフレームワークを使わない場合、自分で素のCSSを書きますよね。大抵の場合は、CSSクラスを作成して、そのクラスをセレクタにスタイル指定を書いていくでしょう。

青いボタンなら、例えば、こんなコーディングで表現します。

css

.mybtn{
    display: inline-block;
    color: #FFFFFF;
    vertical-align: middle;
    background-color: #007bff;
    padding: 0.375rem 0.75rem;
    border: none;
    border-radius: 0.25rem;
}

html

<button type="button" class="mybtn">
    ボタン
</button>

②従来型フレームワーク（Bootstrap）の場合

Bootstrapを使う場合は、ボタンデザイン共通の基本スタイルを設定する“btn”クラスを使いますね。

ベースを作る“btn”クラスに、配色を決める“btn-primary”クラスなどを追加します。こうすることで、ボタンデザインのバリエーションを作っていく考え方です。

html

<button type="button" class="btn btn-primary">
    ボタン
</button>

file

“btn”クラスのように、パーツごとに共通のスタイルを抜き出してまとめたものをUIコンポーネント、コンポーネントベースのCSSクラスなどと表現することもあります。こうしたクラス設計はスッキリしていて分かりやすく、何度も同じスタイル指定を書かなくて済みます。

ただし、予め用意されているデザイン以外には対応しにくいのがデメリット。別のCSSクラスを加えたり、自分でCSSを書いたりして、スタイル指定を上書きしていくことになります。不要なスタイルを打ち消すために、本来は必要ないCSSを書く場面もあるでしょう。

③Tailwind CSSの場合

Tailwindでは、BootstrapなどのCSS フレームワークとは異なり、UIコンポーネントのベースとなるクラスは提供されていません。

スタイリングには背景色やpaddingなど、CSSのプロパティ単位で定義されたクラス（ユーティリティクラス）を使います。

html

<button type="button" class="bg-blue-500 text-white rounded align-middle px-3 py-1.5 ">
    ボタン
</button>

インラインCSSを書く感覚で、class属性にユーティリティクラスを書いていくイメージです。

file

自分でCSSを書かなくても良い、CSSフレームワークのメリット。イチから自分でCSSを書いたような、柔軟性・自由度。その両方の、良いところを取り入れたような形です。

いやいや、毎回これは長いし面倒！と思うかもしれません。 Tailwindにコンポーネント系のクラスは存在しませんが、自分で@applyという機能を使ってクラスを作ることは出来ます。 まずはユーティリティクラスを使ってコーディングを進め、必要に応じて自分でクラスを作る、という事もできます。

画像元：https://tailwindcss.com/docs/reusing-styles

Tailwind CSSのメリット・デメリット

ここまで特徴を見てきたTailwind CSS。メリットとデメリット、それぞれの要点を簡単に紹介します。

Tailwind CSSのメリット

クラス名を考える必要がない
スピーディに開発が進められる
無駄なコードを減らせる
デザインの自由度が高い
最低限のデザインシステムが出来る

◇ 無駄なく、早く進められる

コーディングするときに面倒なのが、CSSクラスの名前をつけること。ある程度デザインから共通項目を挙げて、コンポーネント的なクラスを設計していく必要も生じます。クラス設計、他の人にも分かりやすいクラス名を考えるなど、構想段階で時間がかかりますよね。

Tailwind CSSはユーティリティクラスを使うので、クラス名を考える必要はありません。 とりあえずユーティリティクラスを使ってコーディングしていって、何回も使う部品があれば必要を感じたときにまとめれば良いだけ。「何に使っているか謎のクラスが大量にある」なんて状況にも陥りにくいです。また、build 時に未使用のスタイルを削除する機能もあるので、無駄なく軽量なCSSを作成可能です。

◇ 比較的柔軟に、幅広いデザインに対応可能

Tailwind CSSでは、コンポーネントが用意されていません。 CSSを書くような感覚でユーティリティクラスを組み合わせるため、様々なデザインを表現することが可能です。

また、インラインCSSを書くような感覚とは言っても、実際にCSSを書くように1px単位で刻むわけではありません。 font-sizeやmarginなどはある程度サイズが決められていますから、Tailwind CSSでコーディングすることで最低限のデザインシステムを構築することにも繋がるでしょう。

画像元：https://tailwindcss.com/docs/font-size

Tailwind CSSのデメリット

CSS（+JavaScript）の知識が必須
ユーティリティクラスを覚える必要がある
自由度が高すぎるデザインの、厳密な再現は難しい
クラス属性部分の記述が長く、HTMLが読みにくい

◇ コーディングの知識が必要である

一般的なCSSフレームワークは、例に出したBootstrapの“btn”クラスのように、ひとつのクラスを指定しておけば、ある程度デザインを整えてくれる仕組み。そこまでCSSに詳しくなくても、用意されているコードをコピペすれば「それっぽい」デザインのページが作れます。 Javascriptも組み込まれているので、メニュー開閉などの動きも付きますね。

Tailwind CSSはユーティリティクラスを組み合わせて、自分で作らなくてはないません。動きを付けるためのJSも自分で作ります。「このデザインを表現するために必要な記述」が明確に分かっている必要があるわけです。

また、最初のうちはユーティリティクラスを調べて使うことになります。ある程度覚えるまでは、コーディング速度での恩恵は感じにくいかもしれません。

◇ クラス属性部分の記述が長くなる

Tailwind CSSは“1プロパティ＝1クラス”が基本のため、各要素のclass属性に書き入れるクラスは非常に多くなります。レスポンシブな指定も加えていくと、公式サイトのデモコードのようになります。スッキリしていて見やすい、とは言い難いですよね。このあたり、好き嫌いが分かれる原因でもあります。

file

ただし、近年のWeb制作では、React（Next.js）や Vue などのコンポーネント指向のフレームワークが多く使われています。更に、ループで“繰り返し表示”することも多いですよね。HTMLでの静的コーディングのように、ページとして見えているアイテム、すべてを手打ちしているケースは少ないのです。

こうした場合、実際に要素にクラスを入れていくのは1回のみ。そこまで負担ではありません。 Tailwind CSSがエンジニア（フロントエンドエンジニア）からの人気が高いのも、このためでしょう。

反対に、以下のようなコーディングには向いていないように感じます。

LPなど独立したページを.html形式でコーディングして納品する
アーティスティックな（自由度が高い）デザインのページを作る

ともあれ、実際に使ってみないと特徴や「自分に合うか」はわかりません。次回からはTailwind CSSを導入して、実際にユーティリティクラスを書いてみましょう！

レッスン一覧へ