Tailwind CSSの導入方法を知る

Tailwind CSSの導入方法を学びます。
本格的に使うにはnpm経由のインストールなど環境構築が必要ですが、練習用であればCDNの利用がおすすめ。環境構築なし、誇張無く“秒”でTailwind CSSを試すことが出来ますよ。

• Tailwind CSS導入方法の種類
• 本格導入ならnpm
• 手軽に試せるのはCDN版
• Tailwind CSS（v3）CDN版の導入
• 1.CDNでTailwindを読み込む
• 2.クラスを調べて、文字色を変えてみる

Tailwind CSS導入方法の種類

Tailwind CSSを使用する方法は、大きく分けると2種類あります。

• npm（Node Package Manager）経由でインストールする
• CDNを利用する

本格導入ならnpm

TailwindCSSを本格的に導入する場合は、ターミナルからコマンドを使ってインストールする必要があります。
ローカル環境で使い場合は、事前にnode.jsやnmpのインストールも必要になります。

Tailwind CSSは、RailsやLaravelなど、Webアプリケーションフレームワークとセットで使われることが多い存在。こうしたフレームワークの開発環境が整っている、開発のためにコマンド操作を行っているという場合は、導入の労力はかかりません（組み合わせるフレームワークによって、インストール手順・コマンドに若干違いがあります）。

反対に、純HTMLページのサイトで、Tailwind CSSを使うケースはあまりありません。
環境構築から始めるのも大変ですので、初めて試す練習用ならCDN版を使うと良いでしょう。

手軽に試せるのは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.

引用元：https://tailwindcss.com/docs/installation/play-cdn

簡単に意訳すると「Play CDNはビルド手順なしでTailwind を試すことができます。ただし、運用に最適とは言えません」といった内容。

例えば、Tailwind CSSには未使用のスタイルを削除する機能が意されています。
CDN版ではこの機能が使えずフルで読み込むことになるので、CSSファイル容量が実用に不向きなほど大きく、重くなってしまいます。そのほかのカスタマイズ性の問題もあって、実用には適さないという判断になるわけです。

そのかわり、CDN版はコードを1行貼り付ければすぐ使えます。
npm（とNode.js）での環境構築やビルドする操作が必要なく、手軽。
「基本的なクラスの使い方をサクッと学びたい」「試して、導入するか決めたい」という場面に向いています。

本講座でも、このCDN版の方を使って、Tailwind CSSの基礎を学んでいきます。

Tailwind CSS（v3）CDN版の導入

1.CDNでTailwindを読み込む

新規ファイルを作成します。

下記URLからPlay CDNタブの“1.Add the Play CDN script to your HTML”を見てください。
CDN版の導入に必要なのは6行目のscriptタグ1行だけですが、適用を確認しやすいようコードを丸ごとコピーしちゃいましょう。

URL:https://tailwindcss.com/docs/installation/play-cdn

コピーしたコードを、新しく作ったファイルに貼り付け。
index.htmlとして保存します。

ブラウザで開いて、表示を確認してみましょう。
Tailwind CSSのクラスが使われている、H1要素をチェックすると分かりやすいです。

CSSが効いてますね！
CDN版のTailwind CSSが導入出来ました。

2.クラスを調べて、文字色を変えてみる

自分でもTailwind CSSのクラスを追加してみましょう。
先程コピー・アンド・ペーストして作ったHTMLファイルで、H1の文字色を変更します。

使用可能な主要クラスは、公式サイト（Docs）の左サイドバーから確認できます。
スクロールダウンして調べたい項目を探すか、検索バーで使いたいCSSプロパティなどを入れると出てきます。

今回は文字色を変えたいので、colorと入力してみます。

Typography > Text Color のページが開きます。
ページの中間あたりにジャンプした方は、最上部までスクロールアップしてください。
下図、赤で補足を入れた一覧表示が確認できるはずです。

URL:https://tailwindcss.com/docs/text-color

一覧表示を見ながら、好きな色のクラス名をコピーしてください。
作成中のファイル（index.html）を開いて、h1要素のclass属性に貼り付けます。

上書き保存して、ブラウザ表示を確認。
選んだ文字色に変更されていれば、上手くいっています。

このように、適用したいスタイルのクラス名をどんどん追加していくのがTailwind CSSの基本。
インラインでスタイル指定を書く感覚で、クラスを追加していくイメージです。

使用するユーティリティクラス（クラス名）は大変多いです。
最初から全て覚えるのは大変ですから、まずは今回行ったように“使いたいスタイルのクラス名を探せる”ことを第一で進めましょう。何回か書いていると、よく使うものは自然に覚えますし、「このCSSならクラス名こうじゃない？」と書けるようにもなってくるので大丈夫です。

いちいち検索して探すのが面倒！という方は、チートシートなどを活用しても良いですね。

次のレッスンから、Tailwind CSSを使ってレイアウト作成を行っていきます。