Tailwind CSS もバージョンを重ね、記事を書いている現在で version 3 までリリースされています。今回の記事では、Tailwind CSS v3 系のインストールの仕方について文章を書いていきたいと思います。

注意
v3系の Tailwind CSS 公式ドキュメントのインストール方法に沿って記事を解説しています。バージョンの更新によりコマンドの書き方が変わることがあるので、最新のインストール方法については公式ドキュメントをご覧ください。

あたなは、npm？CDN？どっち派？

Tailwind CSS のインストール方法として大きくわけて２種類の方法があります。npm 経由でインストールする方法、そしてもう１つは、CDN 経由でインストールする方法です。

npm 経由でインストール

npm 経由で Tailwind CSS をインストールして CSS のビルド作業を行う場合は、Tailwind CLI ツールを使用するケース もしくは Tailwind CSS を PostCSS のプラグインとして使用するケース の２通りがあります。

Tailwind CLI ツールを使用するケース

npm 経由で Tailwind CSS をインストールする場合は、個人的にですが、Tailwind CLI ツールを実行し CSS ファイルを出力する方法が一番簡単だと思います。以下のコマンドにそって Tailwind CSS のインストール、及び CLI ツールを使用しての CSS ビルド作業が可能です。

1, Tailwind CSS をインストール

npm install -D tailwindcss
npx tailwindcss init

上記のコマンドを入力すると tailwind.config.js というファイルが生成されます。

2, Tailwind CSS を適応するファイルパスの指定

tailwind.config.js を開いていみると

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

上記のようになっていると思います。ここでは、Tailwind CSS を適応するファイルへのパスを設定してあげます。そうすることで、Tailwind CSS が必要外の場所でファイルが読み込まれてしまうことを防ぎます。例えば、tailwind.config.js と同じ階層に src フォルダを作成し、その src フォルダ内の html か js ファイルを適応したい場合は以下のような設定とします。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
- content: [],
+ content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

content: [], の部分を編集したのが分かると思います。このような感じで、Tailwind CSS を適応するファイルパスを指定可能です。

3, CSS に Tailwind ディレクティブを追加

src フォルダの中に input.css を作成して、@Tailwind ディレクティブ を CSS ファイルに追加します。以下のような感じで書き込みます。

src/input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

4, Tailwind CLI を使用してビルドプロセスを実行する

以下のコマンドで CLI ツールを実行します。tailwind.config.js の content で指定したファイルをスキャンしてビルドされた CSS ファイルを出力します。

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

コマンドを見ると、だいたい予想できると思うのですが、出力される CSS のファイル名は ./dist/output.css となっています。

5, HTML に出力された CSS を読み込む

出力された CSS ファイルを HTML ファイルに読み込んで一通りの作業は完了です！今回は src フォルダに index.html を作成し、以下のようにコードを記述し保存してみてください。前回のコマンドの --watch オプションにより src フォルダ内が常に監視状態になっているため src フォルダ内でファイルを保存すると自動的に CSS ファイルを出力してくれます（監視を解除する際は「Ctrl + C」で解除してください）。これで Tailwind CSS を体験できます！

src/index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

CDN 経由でインストール

より簡単に Tailwind CSS を体験するには CDN 経由でのインストールがお勧めです！以下のように script タグ を使用して Tailwind CSS を読み込むことができます。

index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Tailwind CSS の公式プラグインを CDN 経由で使用する

Tailwind CSS の公式プラグインを使用することで、より多彩な表現が可能になります。プラグインを使用しない場合と CDN の書き方が少し異なりますのでご注意ください（以下のコード参照）。使い方に関しては Tailwind CSS の公式ドキュメントをご覧ください。

index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
</head>
<body>
  <div class="prose">
    <!-- ... -->
  </div>
</body>
</html>