今回の記事では、Tailwind CSS v4系を CLI 経由で初めてインストールする手順をまとめてみました。v3系よりも、よりシンプルで導入しやすい内容になっているので、是非ご自身の PC でチャレンジしてくださいませ(=ﾟωﾟ)ﾉ
✅ 事前準備
Tailwind CSS の CLI ツールをインストールする前にご自身の PC に Node.js をインストールしておいてください。Node.js をインストールしたらターミナルを立ち上げて、以下のコマンドを実行してください。
npm -v
実行後、インストール済みの npm バージョンが表示されたら準備 OK です！
Windows の PowerShell に注意
Windows の PowerShell で上記のコマンドを実行するとエラーになる場合があります。ターミナルをご利用の際は、コマンドプロンプトや Git bash 等のターミナルを使用してください。
✅ セットアップ手順
それでは、Tailwind CSS v4 導入の手順を説明していきます。
1. プロジェクトフォルダを作成して移動
ターミナルを起動して、mkdir コマンド でプロジェクトフォルダを作成してみましょう。ディスクトップ等お好きな場所で構いません。フォルダ作成後、cd コマンド で作成したフォルダの場所に移動して VSCode 等のエディタでプロジェクトフォルダを開いておいてください。
コマンドでは以下のように実行すると良いでしょう。
mkdir my-tailwind-project
cd my-tailwind-project
code .
2. Tailwind CSS と CLI ツールをインストール
それでは、npm 経由で Tailwind CSS をインストールしましょう。以下のコマンドを実行します。
npm install tailwindcss @tailwindcss/cli
すると、Tailwind CSS 関連のパッケージがインストールされ、以下のようなフォルダ構造になっていればオッケーです。
.
├── node_modules
├── package-lock.json
└── package.json
3. 入力用 CSS ファイルを作成し、Tailwind をインポート
プロジェクトフォルダ内に src/input.css を作成して入力用の CSS ファイルを作成します。以下のようなフォルダ構造になります。
.
├── node_modules
├── src
└── input.css // ← CSS ファイルを新規作成
├── package-lock.json
└── package.json
CSS ファイルを作成したら、作成した src/input.css に以下を記述します。この１行で、Tailwind のスタイルが読み込まれます。
@import "tailwindcss";
4. CLI でビルド＆監視モードを実行
以下のコマンドを実行して、常時ソースファイル内のクラスをスキャンして CSS を生成してくれます。
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
コマンド内の詳細は以下の通りです
-
-iCSS のスタイル入力ファイルを指定（今回はsrc/input.css） -
-oCSS のスタイル出力ファイルを指定（今回はsrc/output.css） -
--watchファイル変更を常時監視してビルドする
5. HTML に出力 CSS を読み込み、ブラウザで表示
Web ブラウザで表示する HTML ファイル src/index.html を作成してみましょう。以下のようなフォルダ構造になります。
.
├── node_modules
├── src
└── index.html // ← HTML ファイルを作成
└── input.css
├── package-lock.json
└── package.json
そして、作成した HTML ファイルに以下のコードをコピペして上書き保存してみましょう。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
すると、自動的に CSS ファイルがビルドされて Tailwind CSS のスタイルが適用された src/output.css ファイルが生成されているはずです。
ここで、実際にどのような Web ページができているか、VSCode の LiveServer 等を使用して実際にブラウザで確認してみてください。LiveServer で確認する際は、src/index.html ファイルを選択してから LiveServer を起動しましょう。うまくいけば Tailwind のクラスが適用されたスタイルで Web ページが表示されていると思います。
✅ まとめ
以前の v3 系のインストール設定と比べると、Tailwind v4 の CLI からの導入は手順がシンプルになって分かりやすいです。...といっても、やっぱり手軽に始めるのであれば、CDN で Tailwind やるよな～と思っています('ω')
少しでも皆さんのお役に立てば幸いです。それではﾉｼ