🚀 Vite × React × TypeScript × Tailwind CSS を Vercel にデプロイする手順

📦 プロジェクト構成

• フロントエンド: React (v19)
• バンドラ: Vite
• 言語: TypeScript
• スタイリング: Tailwind CSS
• ルーティング: React Router v7
• デプロイ先: Vercel

---

🔧 セットアップ手順

1. プロジェクト作成

npm create vite@latest my-app -- --template react-ts
cd my-app

2. パッケージインストール

npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3. tailwind.config.js 設定

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

4. index.css に Tailwind を読み込む

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

📁 ディレクトリ構成

my-app/
├── public/
├── src/
│   ├── pages/
│   │   └── Home.tsx
│   ├── routes/
│   │   └── AppRoutes.tsx
│   ├── App.tsx
│   └── main.tsx
├── index.html
├── tailwind.config.js
└── package.json

🧩 ソースコード

🟢 src/pages/Home.tsx

const Home = () => {
  return (
    <div className="text-center mt-10">
      <h1 className="text-3xl font-bold">ようこそ！</h1>
      <p className="mt-4">これはReact + Vite + Tailwind CSSのテンプレートです。</p>
    </div>
  );
};

export default Home;

🟢 src/routes/AppRoutes.tsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "../pages/Home";

const AppRoutes = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
};

export default AppRoutes;

🟢 src/App.tsx

import AppRoutes from "./routes/AppRoutes";

const App = () => {
  return <AppRoutes />;
};

export default App;

🟢 src/main.tsx

import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <App />
);

🧼 Vercelデプロイ時にエラーが出た場合の対応

ビルド時に @rollup/rollup-linux-x64-gnu のエラーが出る場合：

rm -rf node_modules package-lock.json
npm install

※ PowerShellの場合は：

Remove-Item -Recurse -Force node_modules, package-lock.json
npm install

🚀 Vercelでデプロイする

1.Vercel公式サイト にアクセスしてGitHub連携

2.このプロジェクトのリポジトリを選択

3.ビルドコマンド: npm run build

4.Output Directory:dist

5.デプロイ完了！

✅ 補足

• vite.config.ts は @vitejs/plugin-react を使って自動構成されるため編集不要

• TailwindのJITが有効なので高速リロード可能

• .env による環境変数管理もVercelと相性良し