はじめに
「ネットの記事通りにやったのに、なぜか動かない…」
「エラーメッセージが不親切で、次に何をすればいいか分からない…」
Tailwind CSSの環境構築で、そんな風に感じたこと、割とあると思います。
特にTailwind CSSの場合、原文（公式ドキュメント）が英語であるため、どうしてもそう思うことが少なくないはず。
この記事では、よくあるチュートリアルが省略しがちな「なぜそうなるのか？」という仕組みと、初心者が必ずと言っていいほど直面する「よくあるエラーとその解決策」に焦点を当てて環境構築について１から解説していきます。
Tailwind CSS v3を使った環境構築
最新技術というのは確かに魅力的です。しかし、環境構築でつまずかないためには、広く使われ、情報も豊富な安定バージョンを選ぶのが賢明です。ここでは、最も安定しているTailwind CSS v3を使った構築手順を紹介します。
なお、環境構築にあたってはnode.jsが必須です。まだ持っていない場合、こちらからインストールできます。msiファイルをダブルクリックして実行後、「OK」を押しましょう。
ステップ1： プロジェクトの初期化
ターミナルでプロジェクトフォルダに移動し、package.jsonを作成します。
npm init -yステップ2： 必要なパッケージをまとめてインストール
Tailwind v3を動かすために必要な、3つのパッケージ（本体、PostCSS、Autoprefixer）を一度にインストールします。バージョンを固定することで、将来的な仕様変更によるエラーを防ぎます。
npm install -D tailwindcss@3.4.13 postcss autoprefixerステップ3： 設定ファイルを一括生成
以下の-pフラグを付けたコマンドを実行します。これにより、tailwind.config.jsとpostcss.config.jsの2つの設定ファイルが一度に作成されます。
npx tailwindcss init -pステップ4： tailwind.config.jsの設定
Tailwindがどのファイルを見に行けばいいか、監視対象のファイルを指定します。ルートフォルダにあるtailwind.config.jsを開いて、以下のように書き換えましょう。
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{html,js}", // srcフォルダ内のHTMLとJSファイルを監視
],
theme: {
extend: {},
},
plugins: [],
};ステップ5： input.cssの作成
ルートフォルダにsrcフォルダがあると思います。その中のinput.cssというファイルを開き、以下のように書き換えましょう。何やらエラーが出てくると思いますが、無視して大丈夫です。
/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
これで準備完了です！ターミナルで以下を実行しましょう：
npm run start「npm run start」が上手くいかない場合、「npm run dev」だと上手くいくことがあります
すると、表示された「localhost:○○」にブラウザでアクセスすると、以下のように表示されるはずです。（エラーが出た場合は後述）：
これは、src内のApp.jsを書き換えることで変更することができます。試しに以下のようにApp.jsを書き直し、再度このディレクトリ内でnpm run startを実行してみましょう：
import React from 'react';
function App() {
return (
<div className="bg-slate-100 min-h-screen flex flex-col items-center justify-center font-sans p-4">
{/* メインのカードコンテナ */}
<div className="bg-white shadow-lg rounded-xl p-8 max-w-md w-full text-center">
{/* ヘッダー */}
<h1 className="text-4xl font-bold text-sky-600 mb-2">
Tailwind CSS
</h1>
{/* サブタイトル */}
<p className="text-gray-500 mb-6">
環境構築が完了しました！
</p>
{/* 区切り線 */}
<hr className="my-6" />
{/* メインコンテンツ */}
<div className="text-left">
<p className="text-gray-700 mb-4">
このコンポーネントは、以下のTailwindユーティリティクラスを使用してスタイリングされています。
</p>
<ul className="list-disc list-inside bg-slate-50 p-4 rounded-lg">
<li>コンテナ: <code className="text-sm bg-slate-200 px-1 rounded">bg-white</code>, <code className="text-sm bg-slate-200 px-1 rounded">shadow-lg</code></li>
<li>ヘッダー: <code className="text-sm bg-slate-200 px-1 rounded">text-4xl</code>, <code className="text-sm bg-slate-200 px-1 rounded">font-bold</code>, <code className="text-sm bg-slate-200 px-1 rounded">text-sky-600</code></li>
<li>ボタン: <code className="text-sm bg-slate-200 px-1 rounded">bg-sky-500</code>, <code className="text-sm bg-slate-200 px-1 rounded">hover:bg-sky-700</code></li>
</ul>
</div>
{/* ボタン */}
<button className="mt-8 w-full bg-sky-500 hover:bg-sky-700 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105">
ホバー効果を試す
</button>
</div>
</div>
);
}
export default App;
以下のように表示されていれば、成功です：
ハマりどころ徹底解説：エラーが出たらここを読め
上記の手順通りに進めても、PC環境によってはエラーが出ることがあります。しかし、原因さえ分かっていれば何も怖くありません。
エラー1：「’tailwindcss’ は、内部コマンドまたは外部コマンド…として認識されていません。」
- 原因: 「ONスイッチ (
tailwindcss.cmd) 」が設置されていない、最も根深い問題です。npm installの最終工程が、PC環境の何らかの要因（セキュリティソフト、権限など）で失敗しています。 - 解決策A（修復）:
npm rebuildコマンドを実行し、スイッチの再設置を試みます。 - 解決策B（迂回）:
package.jsonのスクリプトを、以下のコマンドに書き換えます：
"scripts": { "dev": "npx -p tailwindcss tailwindcss -i ./src/input.css -o ./dist/output.css --watch" },エラー2：「It looks like you’re trying to use tailwindcss directly as a PostCSS plugin…」
- 原因: これは、最新のv4などをインストールした際に、v3時代の古い設定（
postcss.config.js）を適用しようとした場合に起こる、バージョンの不整合エラーです。 - 解決策: 落ち着いてエラーメッセージを読みましょう。「
@tailwindcss/postcssをインストールして、設定ファイルを更新してね」と書いてあります。npm install -D @tailwindcss/postcssを実行。postcss.config.js（ルートディレクトリにある）の中身をtailwindcss: {}から'@tailwindcss/postcss': {}に書き換えます。
まとめ
Tailwind CSSの環境構築は、一見すると複雑です。しかし、その裏側にある「パッケージを配達し、ONスイッチを設置する」というシンプルな仕組みさえ理解してしまえば、どんなエラーが出ても冷静に対処できるようになります。
