Tailwind CSS超入門 - 何が良い? 導入は難しい? という疑問に答えます【Web制作初心者向け】
人気上昇、必須スキルになりつつあるCSSフレームワーク『TailwindCSS』。
どんなものか知りたい、使ってみたいという方も多いのではないでしょうか。
とは言え、公式は日本語非対応。入門記事を探しても“Tailwindの初心者向け”であって、JSフレームワークなどに詳しくないと用語が多くてが難しめな印象でした。ですので、Web制作初心者、学習をはじめて間もない方に分かりやすいようTailwindの特徴や人気の理由を紹介します。初心者の方でも試しやすい、CDNでの導入方法も解説します。
Tailwind CSSについて知ろう
Tailwind CSSとは
Tailwind CSSは、オープンソースのCSSフレームワークです。
ユーティリティファーストという考え方をコンセプトに設計されており、一般的なCSSフレームワークよりもオリジナリティの高いデザインのWebサイト及びWebアプリケーションを素早く作成可能なことがウリ。
Tailwind CSSのバージョン1.0がリリースされたのは、2019年とCSSフレームワークとしては比較的最近。ですが、リリースから短時間で世界的に人気を獲得し、日本でも2020～2021年頃から利用者が爆増しています。
2023年にDL数がBootstrapを超えていますね。
OpenAI/ChatGPT や Shopify などの超有名サイトでもTailwind CSSが使われています。
そもそもCSSフレームワークって？
CSSフレームワークとは、CSSのコードがまとめられたものです。
用意されているCSSのコードファイルを読み込むんでおけば、HTMLにクラス名を書くだけでスピーディーかつ安定したWebページ・Webページに必要な構成パーツのコーディングが出来る、というのが導入するメリット。
BootstrapやMaterial UIなど、CSSフレームワークがいくつもあります。そんな中でTailwind CSSが爆発的に利用されるようになったのは、従来のCSSフレームワークとはクラスの構成・考え方が大きく異なっているため。
ユーティリティファーストと称される、このTailwind 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 class="mybtn" type="button">
ボタン
</button>
Bootstrapの場合
Bootstrapを使う場合は、ボタンデザイン共通の基本的なスタイルを設定するベースとなる“btn”クラスを使います。それに加え、配色を決める“btn-primary”クラスなどを追加することで、ボタンデザインのバリエーションを作っていく考え方です。
html
<button class="btn btn-primary" type="button">
ボタン
</button>
“btn”クラスのように、パーツごとに共通のスタイルを抜き出してまとめたものをUIコンポーネント、コンポーネントベースのCSSクラスなどと表現することもあります。こうしたクラス設計はスッキリしていて分かりやすく、何度も同じスタイル指定を書かなくて済みます。
ただし、予め用意されているデザイン以外には対応しにくいのがデメリット。別のCSSクラスを加えたり、自分でCSSを書いたりして、スタイル指定を上書きしていくことになります。不要なスタイルを打ち消すために、本来は必要ないCSSを書く場面もあるでしょう、
Tailwind CSSの場合
Tailwindでは、BootstrapなどのCSS フレームワークとは異なり、UIコンポーネントのベースとなるクラスは提供されていません。
スタイリングには背景色やpaddingなど、それぞれCSSのプロパティ単位で定義されたクラス（ユーティリティクラス）を使います。インラインCSSを書くような感覚で、class属性にユーティリティクラスを書いていくイメージです。
html
<button class="bg-blue-500 text-white align-middle px-3 py-1.5 rounded" type="button">
ボタン
</button>
自分でCSSを書かなくても良いというフレームワークのメリットと、イチから自分でCSSを書く柔軟性・自由度、両方の良いところを取り入れたような形です。
いやいや、毎回これは長いし面倒！と思うかもしれません。
Tailwindにコンポーネント系のクラスは存在しませんが、自分で@applyという機能を使ってクラスを作ることは出来ます。まずはユーティリティクラスを使ってコーディングを進め、必要に応じて自分でクラスを作る、という事もできます。
Tailwind CSSのメリット・デメリット
ここまで特徴を見てきたTailwind CSS。
メリットとデメリット、それぞれの要点を簡単に紹介します。
◆ Tailwind CSSのメリット
- クラス名を考える必要がない
- スピーディに開発が進められる
- 無駄なコードを減らせる
- デザインの自由度が高い
- 最低限のデザインシステムが出来る
【無駄なく、早く進められる】
コーディングするときに面倒なのが、CSSクラスの名前をつけること。命名だけではなく、ある程度デザインから共通項目を挙げてコンポーネント的クラスを作る必要も生じます。このあたり、個人的には一番嫌な作業です。
Tailwind CSSはユーティリティクラスを使うので、クラス名を考える必要はありません。とりあえずユーティリティクラスを使ってコーディングしていって、何回も使う部品があれば必要を感じたときにまとめれば良いだけ。「何に使っているか謎のクラスが大量にある」なんて状況にも陥りにくいです。 build 時に未使用のスタイルを削除する機能もあるので、無駄なく軽量なCSSを作成可能です。
【比較的柔軟にデザインに対応可能】
コンポーネントが用意されておらず、CSSを書くような感覚でユーティリティクラスを使うTailwind CSSでは、様々なデザインを表現することが可能です。
また、インラインCSSを書くような感覚とは言っても、実際にCSSを書くように1px単位で刻むわけではありません。font-sizeやmarginなどはある程度サイズが決められていますから、Tailwind CSSでコーディングすることで最低限のデザインシステムを構築することにも繋がるでしょう。
◆ Tailwind CSSのデメリット
- CSS（+JavaScript）の知識が必須
- ユーティリティクラスを覚える必要がある
- 自由度が高すぎるデザインの、厳密な再現は難しい
- クラス属性部分の記述が長く、HTMLが読みにくい
【知識が必要である】
一般的なCSSフレームワークは、例に出したBootstrapの“btn”クラスのように、ひとつのクラスを指定しておけば、ある程度デザインを整えてくれる仕組み。そこまでCSSに詳しくなくても、用意されているコードをコピペすれば「それっぽい」デザインのページが作れます。Javascriptも組み込まれているので、メニュー開閉などの動きも付きますね。
Tailwind CSSはユーティリティクラスを組み合わせて、自分で作らなくてはないません。動きを付けるためのJSも自分で作ります。「このデザインを表現するために必要な記述」が明確に分かっている必要があるわけです。最初のうちはユーティリティクラスを調べて使うことになるので、ある程度覚えるまではスピーディーさという恩恵は感じにくいかもしれません。
【クラス属性部分の記述が長い】
近年のWeb制作では、React（Next.js）や Vue などのコンポーネント指向のフレームワークが多く使われています。更にループで“繰り返し表示”することも多いですよね。HTMLでの静的コーディングのように、ページとして見えている部分のすべてを手書きするケースは少ないです。こうした場合、ユーティリティクラスを使ったコーディングでも、そこまで負担ではありません。
反対に、LPなど独立したページを.html形式でコーディングして納品する、すごくアーティスティックな（自由度が高い）デザインだ、みたいな場合には向いていないように感じます。
Tailwind CSSを使うには？
Tailwind CSS導入方法の種類
Tailwind CSSを使用する方法は、大きく分けると2種類あります。
- npm（Node Package Manager）経由でインストールする
- CDNを利用する
このうち、手軽にTailwind CSSを試すことが出来るのはCDNを使う方法です。
CDNを使う方法について、公式サイトでは以下のように言及されています。
Use the Play CDN to try Tailwind right in the browser without any build step. The Play CDN is designed for development purposes only, and is not the best choice for production.
簡単に意訳すると「Play CDNはビルド手順なしでTailwind を試すことができます。ただし、運用に最適とは言えません」というところでしょうか。
Tailwindには、未使用のスタイルを削除する機能も用意されています。CDN版ではこの機能が使えずフルで読み込むことになるので、CSSファイル容量が実用に不向きなほど大きく、重くなってしまいます。そのほかカスタマイズ性の問題もあって、実用には適さないという判断になるわけです。
ただ、初めてTailwindを使う・どうコーディングを進めるか知りたいという場合は、npm（とNode.js）での環境構築やビルドする操作が必要ない分、CDNが手軽。コマンド操作などで沼ること無く、サクッとTailwindの基本を押さえることが出来ます。
ですので、はじめのうちはCDN版で試してみると良いでしょう。
Tailwind CSS v3のCDN版を使ってみよう
CDNでTailwindを読み込む
新規ファイルを作成します。
下記URLから、Get started > Play CDNのタブを開きます。
“1.Add the Play CDN script to your HTML”にあるコードを丸ごとコピー。
URL:https://tailwindcss.com/docs/installation/play-cdn
新しく作ったファイルに貼り付けて、index.htmlとして保存します。
ブラウザで開いて、表示を確認してみましょう。
Tailwind CSSのクラスが使われている、H1要素をチェックすると分かりやすいです。
CSSが効いてますね！
CDN版のTailwind CSSが導入出来ました。
クラスを調べて、文字色を変えてみる
自分でもTailwind CSSのクラスを追加してみましょう。
先程コピー・アンド・ペーストして作ったHTMLファイルで、H1の文字色を変更します。
使用可能な主要クラスは、公式サイト（Docs）の左サイドバーから確認できます。
スクロールダウンして調べたい項目を探すか、検索バーで使いたいCSSプロパティなどを入れると出てきます。
今回は文字色を変えたいので、colorと入力してみます。
Typography > Text Color のページが開きます。
ページの中間あたりにジャンプした方は、上までスクロールアップしてください。下図、赤で補足を入れた一覧表示が確認できるはずです。
URL:https://tailwindcss.com/docs/text-color
この一覧表示の中から、H1に適用したい色のクラス名をコピー。
作成中のファイル（index.html）を開いて、必要箇所に貼り付けます。
上書き保存して、ブラウザ表示を確認。
選んだ文字色に変更されていれば、上手くいっています。
このように、適用したいスタイルのクラス名をどんどん追加していくのがTailwind CSSの基本です。インラインでスタイル指定を書く感覚で、クラスを追加していくイメージですね。
使用するユーティリティクラス（クラス名）は大変多いです。
最初から全て覚えるのは大変ですから、まずは今回行ったように“使いたいスタイルのクラス名を探せる”ことを第一で進めましょう。何回か書いていると、よく使うものは自然に覚えますし、「このCSSならクラス名こうじゃない？」と書けるようにもなってくるので大丈夫です。
いちいち検索して探すのが面倒！という方は、チートシートなどを活用しても良いですね。
https://umeshmk.github.io/Tailwindcss-cheatsheet/
次の記事では、Tailwind CSSを使ったレイアウト作成、レスポンシブデザインのための設定方法を紹介します。
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
5月5日まで