React 19 × Tailwind CSS 4 × Vite 環境構築完全ガイド（2025春）

icon
タマネギ

React 19 × Tailwind CSS 4 × Vite 環境構築完全ガイド（2025春）

投稿日: 2025年03月23日

Tips
学習振り返り
要約
  • 2025年春の最新バージョンReact 19、Tailwind CSS v4、Viteを使ったウェブアプリ開発環境の構築方法を解説。
  • ShiftBプログラミングスクールの第6章に合わせており、create-react-appよりViteを推奨。
  • VSCodeの拡張機能やTailwind CSSの導入手順、サンプルコードの作成方法が含まれている。

この記事では、2025年春🌸最新バージョンの React 19 と Tailwind CSS v4、そして高速ビルドツール Vite を組み合わせた「ウェブアプリの開発環境構築」について解説します。

React/Next.js 特化型のプログラミングスクール「 ShiftB 」の第6章「React実践演習」に対応した内容になります。ShiftB の公式テキストでは、書籍「これからはじめるReact実践入門」との互換性のために create-react-app コマンドがお勧めされていますが、create-react-app は既にメンテナンスも減っており（たぶん React20 がリリースされる頃には廃止されそうな状況で）React 公式でも Vite が推奨されている現状です。もし、これから学習をはじめるといった状況なら、中長期的な視点から Vite の利用をおすすめします。

なお、この記事で解説する環境構築ができてしまえば、create-react-app も Vite も、ほぼ同じように「開発サーバの起動」や「ビルド」の操作が可能です（書籍「これからはじめるReact実践入門」を参照する場合の読み替えもほとんど必要ありません）。

また、CSSフレームワークに関して、ぶべさんも書かれているように TailwindCSS をお勧めします。特に 第8章 からの Next.js との相性も非常に良いです（Next.jsの公式テンプレートやチュートリアルには TailwindCSS が使われています）。

準備

VSCode の拡張機能として次の3つをインストールしておきましょう。

  • Tailwind CSS IntelliSense ...TailwindCSSを使うときにクラス名を入力補助してくれる便利な拡張機能です。何を書けばいいか迷ったときに候補を表示してくれます。

  • ESLint ...コードの間違いを見つけてくれる便利ツールです。変数の未使用や文法ミスなど、初心者がよくやるミスを教えてくれます。

  • Prettier - Code formatter ...コードを自動的に整形してくれるツールです。インデントや改行が整い、読みやすく間違いに気づきやすいコードになります。

Vite による環境構築とアプリ起動

Windows を基準にした説明です。Macを使っている場合は、生成AIで「Mac用の手順・説明に変換して」のようなプロンプトを使って読み替えをしてください。

いまから simple-blog という名前で Reactアプリのプロジェクトフォルダ を作成していきます。適当な場所（例えば C:\Users\xxxx\Documents\JavaScriptProjects）で PowerShell を開いて、次のようにコマンドを実行してください。

npm create vite@latest simple-blog -- --template react

プロジェクトフォルダの名前（ここでは simple-blog ）に大文字を含まないようにしましょう。

やや長いコマンドですが、1行で実行してください。これで simple-blog というフォルダが作成され、アプリ開発に必要なファイルが作成されるので、そこに移動して VSCode を起動します（VSCode起動後は PowerShell を閉じてしまってOKです）。

cd simple-blog
code .

まずは、プロジェクトフォルダ内の package.json で要求されているライブラリ（パッケージ）をプロジェクトにインストールします。VSCode で Ctrl+j でターミナルを起動して、以下のコマンドを実行してください。

npm i

プロジェクトフォルダに node_modules というフォルダが作成され、そこにライブラリのダウンロードとインストールが行われます。完了したら、次のコマンドで開発サーバを起動してください。

npm run dev

create-react-app で構築した環境では npm start コマンドで開発サーバを起動しましたが、Vite では npm run dev コマンドで開発サーバを起動します（第8章から利用する Next.js でも npm run dev コマンドを使うので、こちらで慣れておきましょう）。

React 19 × Tailwind CSS 4 × Vite 環境構築完全ガイド（2025春）｜ShiftBブログ

アプリの起動が確認できたら、VSCodeのターミナルから Ctrl+C を入力して開発サーバを停止しておいてください。

Tailwind CSS の導入

CSSフレームワークとして Tailwind CSS v4 を導入していきます。開発サーバが停止している状態で、VSCodeのターミナルから以下のコマンドを実行してください。-D は、開発だけに使用するライブラリとしてインストールするためのオプションです。

npm i -D tailwindcss @tailwindcss/vite prettier prettier-plugin-tailwindcss tailwind-merge

インストールが完了したら、各種設定ファイルを書き換え、追加をしていきます。

eslint.config.js の書き換え

プロジェクトフォルダの eslint.config.js を、次のように書き換えてください。これは、未使用変数 (no-unused-vars) を「エラー」ではなく「警告」の扱いに変更するためのものです。

変更前

// ...略...
rules: {
  ...js.configs.recommended.rules,
  ...reactHooks.configs.recommended.rules,
  "no-unused-vars": ["error", { varsIgnorePattern: "^[A-Z_]" }],
  "react-refresh/only-export-components": [
    "warn",
    { allowConstantExport: true },
  ],
},
// ...略...

変更後

// ...略...
rules: {
  ...js.configs.recommended.rules,
  ...reactHooks.configs.recommended.rules,
  "no-unused-vars": "warn", // 書き換え
  "react-refresh/only-export-components": [
    "warn",
    { allowConstantExport: true },
  ],
},
// ...略...

vite.config.ts の書き換え

vite.config.ts を次の内容に、丸ごと書き換えてください。ここでは、Tailwind CSS のプラグインの追加のほか、3000番ポートでサーバを起動するような設定、サーバ起動時にブラウザが自動起動するよう設定をしています。

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
  server: {
    port: 3000,
    strictPort: false,
    open: true,
  },
});

.prettierrc の追加

プロジェクトフォルダのトップレベルに .prettierrc というファイルを作成し、以下の内容を記述して保存してください。

{
  "semi": true,
  "plugins": ["prettier-plugin-tailwindcss"]
}

この設定により、Tailwindのユーティリティクラスの並べ替えを自動的にしてくれるようになります。

index.css の書き換え

TailwindCSS を適用するために src/index.css を以下の内容に書き換えて保存してください （元々記述されている内容はすべて削除してください）。

@import "tailwindcss";

App.css の削除

Tailwind環境では使用しないので src/App.css を削除します。

以上の各種設定を確実に反映させるために、ここで VSCode を再起動しておきます。

App.jsx の書き換えと動作確認

TailwindCSS を使って画面をデザインできるようになっていることを確認するために src/App.css を以下の内容に書き換え、保存してください。

import { useState } from "react";

// ユーティリティクラスを複数行に分割しつつ、重複や競合を整理してくれる関数
import { twMerge } from "tailwind-merge";

function App() {
  const [count, setCount] = useState(0);
  const countUp = () => setCount(count + 1);
  return (
    // text-center: テキストを中央揃えにする
    <div className="text-center">
      {/* 
        mb-2: 下側のマージンを0.5rem (8px)に設定
        text-2xl: フォントサイズを1.5rem (24px)に設定
        font-bold: フォントの太さを太字に設定
      */}
      <h1 className="mb-2 text-2xl font-bold">Counter</h1>
      <p>{count}</p>
      <button
        className={twMerge(
          // rounded-md: 角を丸くする (border-radius: 0.375rem)
          // px-3: 左右のパディングを0.75rem (12px)に設定
          // py-1: 上下のパディングを0.25rem (4px)に設定
          "rounded-md px-3 py-1",

          // bg-indigo-500: 背景色をインディゴ色のカラーパレット500に設定
          // text-white: テキスト色を白に設定
          "bg-indigo-500 text-white",

          // hover:bg-indigo-500/75: ホバー時に背景色を75%の透明度のインディゴ500に変更
          "hover:bg-indigo-500/75",

          // hover:cursor-pointer: ホバー時にカーソルをポインター（手の形）に変更
          "hover:cursor-pointer",
        )}
        onClick={countUp}
      >
        カウントアップ
      </button>
    </div>
  );
}

export default App;

npm run dev で開発サーバを起動し、以下のようにページのデザインが設定できていることを確認してください。

React 19 × Tailwind CSS 4 × Vite 環境構築完全ガイド（2025春）｜ShiftBブログ

TailwindCSSを使った画面デザインの例

Tailwindを使って、以下のような画面をつくるためのサンプルを添付します。

React 19 × Tailwind CSS 4 × Vite 環境構築完全ガイド（2025春）｜ShiftBブログ

以下のコードはあくまで Tailwindのユーティリティクラス（px-3 や flex など）を知ってもらうためのサンプルです。ShiftBの第6章の【課題1】記事一覧ページの作成 で要求されていることの解答ではありません。【課題1】では配列操作関数 map の利用や、コンポーネント作成が要求されている点に注意してください。

// ユーティリティクラスを複数行に分割しつつ、重複や競合を整理してくれる関数
import { twMerge } from "tailwind-merge";

function App() {
  return (
    <div>
      {/* ヘッダ部。背景色を「濃紺」、上下 (y方向) のパディング (Padding) を 4 に設定 */}
      <header className="bg-slate-800 py-4">
        <div
          className={twMerge(
            // 左右 (x方向) のマージン (Margin) を 2 に設定。
            // 画面幅が md（768px以上）のときはマージンを 4 に変更
            "mx-2 md:mx-4",
            // 子要素 (＝「Blog」と「お問い合わせ」) を横並びに配置し、
            // 上下中央揃え、両端に寄せてレイアウトする
            "flex items-center justify-between",
            // 文字色を「白」、文字を lg サイズ、太字に設定
            "text-lg font-bold text-white",
          )}
        >
          <h1>Blog</h1>
          <div>お問い合わせ</div>
        </div>
      </header>

      {/* 本文。横のマージンを2に設定。md以上では中央寄せ。最大幅を 3xl に制限 */}
      <main className="mx-2 max-w-3xl py-6 md:mx-auto">
        {/* 枠線をつける。内側の左右余白を 6、上下余白を 4 に設定*/}
        <div className="border border-gray-500 px-6 py-4">
          {/* 日付とタグの横並び。下方向 (Bottom) のマージンを 1 に設定 */}
          <div className="mb-1 flex items-center justify-between">
            {/* 文字色を「グレー」に設定 */}
            <div className="text-gray-500">2025/03/23</div>

            {/* タグを横並び・右寄せ・アイテム間に横の間隔 */}
            <div
              className={twMerge(
                "flex justify-end gap-x-2",
                // 子要素すべてにパディング（上下・左右）を適用
                "*:px-2 *:py-1",
                // 子要素すべてに文字サイズと青系の文字色を適用
                "*:text-sm *:text-blue-700",
                // 子要素すべてに青系の枠線を適用
                "*:border *:border-blue-700",
                // 子要素すべてに角丸を適用
                "*:rounded-md",
              )}
            >
              <div>React</div>
              <div>TypeScript</div>
            </div>
          </div>

          {/* タイトル。下に少し余白、やや大きめの見出し */}
          <h2 className="mb-3 text-2xl">タイトル</h2>

          {/* 本文の段落。3行までに切り詰める（省略表示） */}
          <div className="line-clamp-3">
            <p>
              本文です。本文です。
              <br />
              本文です。本文です。本文です。
              <br />
              本文です。本文です。本文です。本文です。
              <br />
              本文です。本文です。本文です。本文です。本文です。
              <br />
            </p>
          </div>
        </div>
      </main>
    </div>
  );
}

export default App;

関連記事

Tailwind CSS v4 に対応した記事です。

シェア！

Threads
icon
タマネギ
プロフィールを見る
Loading...
記事一覧に戻る
Threads
0