dev TailwindCSS

Tailwind CLI install ガイド - 最速セットアップ手順と実践例

Tailwind CLI を使った最速セットアップ方法を4ステップで解説。npm インストールから HTML 実装まで、実際のコマンド実行結果とブラウザ表示を交えて初心者にも分かりやすく説明します。watch モードによる自動ビルドや、よくある失敗例も網羅した実践的なガイドです。

読者がこの記事から得られる知識

この記事では、Tailwind CLI install（インストール）の手順をゼロから始めるために必要な知識と手順をすべて網羅しています。

この記事を読むと、以下の知識が得られます:

  • Tailwind CLI を使った最速セットアップ手順（4ステップ）
  • npm によるパッケージインストールと開発依存関係の設定方法
  • エントリーポイントとなる CSS ファイルの作成と @import の使い方
  • ビルドプロセスの起動方法と --watch モードによる自動再ビルドの仕組み
  • HTML で Tailwind のユーティリティクラスを使用する方法
  • 使用したクラスだけが CSS に含まれる最適化の仕組み
  • ブラウザでの動作確認方法と Live Server の活用
  • 初学者が陥りやすい失敗パターンとその回避方法

実際のコマンド実行結果とブラウザ表示結果を交えて解説しているため、記事に沿って進めれば確実に Tailwind CSS の開発環境を構築できます。

今回ハンズオンした内容

このセクションでは、Tailwind CSS 公式ドキュメント（https://tailwindcss.com/docs/installation/tailwind-cli）を参照しながら、Tailwind CSS 導入の最速セットアップ手順を実際に実行した結果を示します。CSS フレームワークのインストール方法から watch モードによる自動ビルドまで、各ステップで実行するコマンドの意味と意図を解説した後、実際の実行結果とその解説を記載しています。

プロジェクトのファイル構造は以下の通りです:

プロジェクト/
├── src/
│   ├── input.css      (Tailwind のエントリーポイント)
│   ├── output.css     (ビルドされた CSS)
│   └── index.html     (HTML ファイル)
├── node_modules/      (npm パッケージ)
└── package.json       (プロジェクト設定)

Tailwind CSSのセットアップは以下の4ステップで完了します:

  1. Tailwind CSSパッケージのインストール
  2. エントリーポイントとなるCSSファイルの作成
  3. ビルドプロセスの起動と自動監視の設定
  4. HTMLでのTailwindクラス使用と動作確認

それでは順番に見ていきましょう。

01. Install Tailwind CSS

このステップでは、npm パッケージ インストールにより Tailwind CSS を使用するための基盤となるパッケージをインストールします。

実行するコマンド

npm install -D tailwindcss @tailwindcss/cli

コマンドの意味

  • npm install: npmパッケージをインストールする
  • -D: devDependencies（開発時のみ使用する依存関係）として記録する
  • tailwindcss: Tailwind CSS本体
  • @tailwindcss/cli: コマンドラインからTailwindを実行するためのCLIツール

コマンドを実行する意図

Tailwind CSSを使用するための基盤を整える。ビルド時にHTMLやJSファイルをスキャンしてCSSを生成するため、本体とCLIツールの両方が必要。本番環境では生成済みの output.css だけがあればよいため、-D オプションで開発依存関係として扱う。

実行結果

$ npm install -D tailwindcss @tailwindcss/cli

added 27 packages in 4s

6 packages are looking for funding
  run `npm fund` for details

$ cat package.json 
{
  "devDependencies": {
    "@tailwindcss/cli": "^4.1.18",
    "tailwindcss": "^4.1.18"
  }
}

実行結果の解説

  • added 27 packages in 4s: Tailwind本体とその依存パッケージ合計27個がインストールされた。4秒で完了。
  • package.json の devDependencies に両方のパッケージが記録された。これにより、他の開発者が npm install を実行すれば同じ環境を再現できる。
  • バージョン ^4.1.18: キャレット記号（^）により、マイナーバージョンとパッチバージョンの自動更新が許可される（例: 4.1.19や4.2.0は自動取得されるが、5.0.0は取得されない）。

これで、意図していた通り devDependencies への記録が確認でき、Tailwind CSSを使用するための基盤が整いました。

02. Import Tailwind in your CSS

このステップでは、Tailwindのビルドプロセスの起点となるCSSファイルを作成します。

実行するコマンドと操作

mkdir src
touch src/input.css

その後、エディタで src/input.css を開き、以下を記述して保存:

@import "tailwindcss";

コマンドと操作の意味

  • mkdir src: src ディレクトリを作成
  • touch src/input.css: 空の input.css ファイルを作成
  • エディタでファイルを開く: VSCode、Vim、Nano など任意のテキストエディタで src/input.css を開く
  • @import "tailwindcss"; を記述: CSS標準の @import 構文でTailwindを読み込む
  • ファイルを保存: 編集内容をディスクに書き込む

コマンドと操作を実行する意図

Tailwindのビルドプロセスの起点（エントリーポイント）となるCSSファイルを作成する。touch コマンドで空ファイルを作成した後、エディタで開いて @import "tailwindcss"; を記述することで、ビルド時にTailwindのベーススタイルとユーティリティクラスが展開される。この1行がなければTailwindは機能しないため、必ずファイルを編集して記述する必要がある。また、カスタムCSSもこのファイルに追記できる。

実行結果

$ mkdir src

$ touch src/input.css

$ cat src/input.css
@import "tailwindcss";

実行結果の解説

  • src ディレクトリが正常に作成された。このディレクトリ内に入力CSS、出力CSS、HTMLファイルをまとめて管理する。
  • touch コマンドで空の input.css ファイルが作成された。
  • cat コマンドでファイル内容を確認すると、@import "tailwindcss"; が記述されている。これは touch コマンド実行後にエディタでファイルを開き、手動で入力して保存した結果である。
  • この1行により、次のビルドステップでTailwindのすべての機能が利用可能になる。
  • ファイル名は任意だが、慣例的に input.css（入力）と output.css（出力）のペアで命名することが多い。

これで、意図していた通りビルドプロセスの起点となるエントリーポイントファイルの準備が完了しました。

03. Start the Tailwind CLI build process

このステップでは、Tailwind のビルドプロセスを起動し、watch モード 自動ビルドの設定を行います。

実行するコマンドと操作

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

その後、エディタで package.json を開き、scripts セクションに以下を追加して保存:

{
  "scripts": {
    "dev": "npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch"
  }
}

コマンドと操作の意味

  • npx @tailwindcss/cli: ローカルにインストールされたCLIツールを実行
  • -i ./src/input.css: 入力ファイル（input）を指定
  • -o ./src/output.css: 出力ファイル（output）を指定
  • --watch: ファイル変更を監視して自動再ビルド
  • package.json の編集: 開発用スクリプトとして登録し、次回以降 npm run dev で起動できるようにする

コマンドと操作を実行する意図

Tailwindのビルドプロセスを起動し、プロジェクト内のHTML/JSファイルをスキャンしてTailwindクラスを検出、対応するCSSを生成する。--watch モードにより、開発中はファイル変更のたびに自動で再ビルドされ、手動でコマンドを再実行する手間が省ける。また、package.json のスクリプトに登録することで、npm run dev という短いコマンドで起動できるようにする。

実行結果

$ npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
≈ tailwindcss v4.1.18

Done in 79ms
Done in 2ms
Done in 608µs
^C

$ cat package.json 
{
  "scripts": {
    "dev": "npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch"
  },
  "devDependencies": {
    "@tailwindcss/cli": "^4.1.18",
    "tailwindcss": "^4.1.18"
  }
}

実行結果の解説

  • ≈ tailwindcss v4.1.18: Tailwind CSS v4.1.18が正常に起動したことを示す。
  • Done in 79ms: 初回ビルドが79ミリ秒で完了。この時点では src/output.css にベーススタイル（Preflight）のみが生成される。
  • Done in 2ms と Done in 608µs: これはwatchモードでファイル監視が開始され、変更を検知するたびに表示される。実際に変更がない場合は非常に高速（マイクロ秒単位）。
  • ^C: Ctrl+Cでwatchモードを手動停止した。
  • package.json の scripts セクションに dev コマンドが追加された。これにより次回以降は npm run dev で起動できる。

これで、意図していた通り自動再ビルドの仕組みが構築され、開発用スクリプトも登録できました。src/output.css が生成されており、次のステップでHTMLから読み込める準備が整っています。

04. Start using Tailwind in your HTML

このステップでは、実際にTailwindクラスを使用するHTMLファイルを作成し、動作確認を行います。

実行するコマンドと操作

touch src/index.html

その後、エディタで src/index.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>

コマンドと操作の意味

  • touch src/index.html: 空の index.html ファイルを作成
  • エディタでファイルを開く: 任意のテキストエディタで src/index.html を開く
  • HTMLの記述: 基本的なHTML構造とTailwindクラスを記述
  • <link href="./output.css" rel="stylesheet">: ビルド済みのCSSファイルを読み込む
  • class="text-3xl font-bold underline": Tailwindのユーティリティクラスを使用
  • ファイルを保存: 編集内容をディスクに書き込む

コマンドと操作を実行する意図

実際にTailwindクラスを使用するHTMLファイルを作成し、動作確認を行う。HTMLにTailwindクラスを記述することで、watchモードが自動的にそのクラスを検出し、対応するCSSを output.css に追加する。これにより、「使用したクラスだけがCSSに含まれる」というTailwindの最適化の仕組みを体験できる。

実行結果

$ touch src/index.html

$ cat src/index.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>

実行結果の解説

  • src/index.html が作成され、基本的なHTML構造が整った。
  • <link href="./output.css"> により、同じディレクトリ内のビルド済みCSSを読み込む設定になっている。
  • class="text-3xl font-bold underline" という3つのユーティリティクラスが記述されている。watchモードが動作していれば、このファイル保存時に自動的に output.css へクラスが追加される。

CSS生成の確認

HTMLファイル作成後、output.css を確認:

$ grep -A 2 "text-3xl\|font-bold\|underline" src/output.css
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --font-weight-bold: 700;
    --default-font-family: var(--font-sans);
--
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
--
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
--
  .underline {
    text-decoration-line: underline;
  }
}

CSS生成結果の解説

  • HTMLで使用した3つのクラスに対応するCSSが @layer utilities に自動生成された。
  • CSS変数（--text-3xl, --font-weight-bold）を使った設計になっており、テーマのカスタマイズが容易。
  • 使用していないTailwindクラス（例: text-4xl, font-semiboldなど）はCSSに含まれていない。これにより最終的なファイルサイズが最小化される。

ブラウザ表示確認

VSCodeの「Live Server」拡張機能を使用して http://127.0.0.1:5500/src/index.html でアクセス。

ブラウザでの表示結果

表示結果:

  • [正] "Hello world!" が大きなフォントサイズで表示
  • [正] 太字が適用
  • [正] 下線が適用

これで、意図していた通り「使用したクラスだけがCSSに含まれる最適化」が実際に機能していることを確認できました。すべてのTailwindクラスが正常に動作し、期待通りのスタイルが反映されています。Tailwind CSSの基本的なセットアップと動作確認が完了しました。

ハンズオンの中で私が疑問に感じた点や失敗した点

今回のハンズオンでは特に問題なく進められましたが、初学者が陥りやすい疑問や失敗パターンを以下に示します。

よくある疑問

Q1: output.css を直接編集してもいいのか？

疑問の内容:
カスタムスタイルを追加したい場合、生成された output.css を直接編集してもよいか？

解決手段:
output.css は編集しない。このファイルはビルドツールが自動生成するため、次のビルド時に上書きされて消えてしまう。

カスタムCSSを追加したい場合は、input.css に記述する:

/* input.css に書く */
@import "tailwindcss";

.custom-button {
  background: linear-gradient(to right, #667eea, #764ba2);
}

Q2: HTMLファイルにクラスを追加したのにスタイルが反映されない

疑問の内容:
HTMLに class="text-xl" などを追加したのに、ブラウザで見てもスタイルが適用されない。

解決手段:
以下の原因を順番に確認する:

  1. --watch モードが起動していない
  • ターミナルで npm run dev を実行して watch モードを起動
  1. HTMLファイルがスキャン対象外のディレクトリにある
  • src/ 配下に配置されているか確認
  1. ブラウザキャッシュが残っている
  • 強制リロード（Ctrl+Shift+R / Cmd+Shift+R）を実行

Q3: npm install と npm install -D の違いは？

疑問の内容:
パッケージをインストールする際、-D オプションをつける場合とつけない場合で何が違うのか？

解決手段:
以下のように使い分ける:

  • npm install: 本番環境でも必要な依存関係（dependencies）として記録
  • npm install -D: 開発時のみ必要な依存関係（devDependencies）として記録

Tailwind CSSの場合、ビルド時にCSSを生成し、最終的には静的な output.css だけがあればよい。本番環境では Tailwind 本体は不要なため、-D オプションを使うのが正しい。

Q4: エディタでファイルを編集するとは具体的に何をすればいいのか？

疑問の内容:
「エディタでファイルを編集する」という指示があるが、touch コマンドを実行するだけでは内容が書き込まれない。具体的にどう操作すればよいのか？

解決手段:
touch コマンドは空ファイルを作成するだけで、内容は書き込まれない。以下の手順でファイルを編集する:

VSCode を使う場合:

  1. VSCode でプロジェクトフォルダを開く
  2. 左のファイルツリーから src/input.css をクリック
  3. エディタに @import "tailwindcss"; と入力
  4. Ctrl+S（または Cmd+S）で保存

コマンドラインエディタを使う場合:

# Vim を使う場合
vim src/input.css
# i キーで挿入モード、内容を入力、Esc → :wq で保存

# Nano を使う場合
nano src/input.css
# 内容を入力、Ctrl+O で保存、Ctrl+X で終了

よくある失敗

失敗例1: パスの指定ミス

失敗内容:
相対パスの指定を間違えて、ファイルが見つからないエラーが発生する。

誤った例:

# [誤] 相対パスのミス
npx @tailwindcss/cli -i input.css -o output.css --watch

エラーメッセージ:

Error: Cannot find module './input.css'

模範例:

# [正] 正しいパス指定
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

ポイント: ファイルの場所を ./ から始めて正確に指定する。

失敗例2: HTMLでのCSS読み込みパスミス

失敗内容:
HTMLファイルからCSSファイルへのパス指定を間違えて、スタイルが読み込まれない。

誤った例:

<!-- [誤] パスが間違っている -->
<link href="output.css" rel="stylesheet">

エラーメッセージ:
ブラウザの開発者ツールで 404 Not Found エラーが表示される。

模範例:

<!-- [正] 正しいパス（index.htmlとoutput.cssが同じディレクトリの場合） -->
<link href="./output.css" rel="stylesheet">

<!-- [正] または絶対パスで指定 -->
<link href="/src/output.css" rel="stylesheet">

ポイント: ファイルの相対位置を確認し、./ を使って同じディレクトリ内のファイルを指定する。

失敗例3: @import のスペルミス

失敗内容:
@import のスペルや引用符の種類を間違えて、ビルドエラーが発生する。

誤った例:

/* [誤] スペルミス */
@inport "tailwindcss";

/* [誤] 引用符の種類ミス（シングルクォート） */
@import 'tailwindcss';

エラーメッセージ:

Unexpected token
Unknown at-rule

模範例:

/* [正] 正しい記述（ダブルクォート） */
@import "tailwindcss";

ポイント: @import のスペルを正確に記述し、ダブルクォート（"）を使用する。

失敗例4: watchモードの停止忘れ

失敗内容:
--watch モードを停止せずにターミナルを放置してしまい、複数のプロセスが起動してリソースを消費する。

誤った操作:

  • ターミナルを閉じずに新しいターミナルを開いて再度 npm run dev を実行
  • 複数の watch プロセスが同時に動作

模範例:

# [正] watch モードの正しい停止方法
# ターミナルで Ctrl+C を押す
^C

# [正] プロセスが停止したことを確認
# ターミナルにプロンプト（$）が表示される

ポイント: watch モードを終了する際は必ず Ctrl+C で停止してから次の作業に移る。複数起動を避けるため、既存のプロセスを確認してから新しいコマンドを実行する。

失敗例5: ファイル編集を忘れる

失敗内容:
touch src/input.css を実行しただけで満足してしまい、エディタでファイルを開いて @import "tailwindcss"; を記述することを忘れる。

誤った操作:

# [誤] ファイル作成だけして編集していない
$ touch src/input.css
# この時点で input.css は空ファイル

結果:
ビルド時にエラーが発生するか、空の output.css が生成される。

模範例:

# [正] 正しい手順
$ touch src/input.css
$ vim src/input.css
# または VSCode などで開いて編集

# ファイル内容を確認
$ cat src/input.css
@import "tailwindcss";

ポイント: ファイルを作成したら、必ずエディタで開いて内容を記述し、cat コマンドなどで内容を確認する習慣をつける。

記載内容の翻訳

公式ドキュメントの記載内容を日本語に翻訳します。

Get started with Tailwind CSS

Tailwind CSSは、すべてのHTMLファイル、JavaScriptコンポーネント、その他のテンプレートをスキャンしてクラス名を検出し、対応するスタイルを生成して静的CSSファイルに書き出す仕組みで動作する。

高速で柔軟性があり信頼性も高く、ランタイムはゼロ。

01. Install Tailwind CSS

npmを使って tailwindcss と @tailwindcss/cli をインストールする。

npm install tailwindcss @tailwindcss/cli

02. Import Tailwind in your CSS

メインのCSSファイルに @import "tailwindcss"; というインポート文を追加する。

@import "tailwindcss";

03. Start the Tailwind CLI build process

CLIツールを実行して、ソースファイルからクラスをスキャンし、CSSをビルドする。

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

04. Start using Tailwind in your HTML

コンパイルされたCSSファイルを <head> に追加し、Tailwindのユーティリティクラスを使ってコンテンツをスタイリングする。

<!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>

今回のまとめ

ここまでお読みいただき、ありがとうございました。Tailwind CSS の基本的なセットアップから動作確認まで、実際に手を動かしながら学ぶことができましたね。

今回学習したこと:

  • Tailwind CLI を使った最速セットアップの4ステップ（npm パッケージ インストール、CSS エントリーポイント作成、watch モード 自動ビルドの起動、HTML での利用）
  • --watch モードによる自動再ビルドの仕組みと、開発効率を高める方法
  • Tailwind の「使用したクラスだけを CSS に含める」最適化の仕組みと、その実際の動作確認

Tailwind CSS 導入の基礎が身についたところで、次は実践的なレイアウトやコンポーネントの作成に挑戦してみましょう。

関連する解説記事も順次公開していきますので、ぜひご覧ください。

それでは、また別の記事でお会いしましょう。

-dev, TailwindCSS