Tailwind CSS Created: 2026/05/07 Updated: 2026/05/23

TypeScript環境にTailwind CSS v4を導入する：Bun・Next.js両対応セットアップ

TypeScript環境でTailwind CSS v4を使うためのセットアップ方法を解説します。Bun + ViteとNext.jsの両方に対応し、インストールからCSS読み込み、動作確認までを順番に進めます。

#Bun #TypeScript #Tailwind CSS #環境構築 #Next.js #Tailwind CSS v4

シリーズ：Tailwind CSS v4 入門

v3→v4 変更点まとめ

TS + Next.js / Bun セットアップ

@theme でデザイントークン管理

レスポンシブ・ダークモード実践

動的クラスと @source inline()

コンポーネント設計パターン集

前回は v4 の「何が変わったか」を概念レベルで整理しました。今回はいよいよ手を動かすフェーズです。

取り上げるのは現場でよく使われる2つの構成です。 Next.js （React ベースの Web フレームワーク）と Bun （TypeScript をそのまま実行できる高速ランタイム）の2パターンを並べて解説します。どちらを選ぶべきかの判断材料も最初に整理してあるので、まずそこから読んでみてください。

🎯 この記事のゴール

Next.js または Bun の環境に Tailwind CSS v4 をセットアップし、カスタムカラーを定義してブラウザに反映できる状態にします。セットアップが終わった時点でのファイル構成まで把握するのがゴールです。

Next.js と Bun、どちらを選ぶか

どちらも TypeScript と Tailwind CSS v4 を組み合わせて使えます。ただしユースケースが異なるため、プロジェクトの目的に合わせて選んでください。

観点	Next.js	Bun
主な用途	フロントエンド・フルスタック Web アプリ	API サーバー・CLIツール・スクリプト
レンダリング	SSR / SSG / CSR（React）	CSR（Bun 単体には HTML テンプレートなし）
Tailwind との統合	✓ 公式が @tailwindcss/vite や PostCSS 経由で対応	✓ Vite または PostCSS 経由で対応
セットアップの複雑さ	create-next-app で雛形あり（楽）	ゼロから自分で構成する（柔軟）
UIライブラリとの相性	最高（React エコシステム全体）	限定的（HTML を直接書くか別途 JSX を組む）
こんな人に向いている	Web サイト・管理画面・フルスタックアプリを作りたい	API サーバーを Tailwind 付きで開発したい、Bun 環境が手元にある

前提条件を確認する

作業を始める前に、必要なツールがインストールされているか確認してください。

N Next.js

Node.js（v18 以上）と npm / pnpm が必要です。

bash

node -v
#v20.11.0   ← v18 以上であればOK

npm -v
#10.2.4

Node.js が入っていない場合は nodejs.org からインストールしてください。

B Bun

Bun v1.1 以上が必要です。

bash

bun --version
# 1.1.38   ← v1.1 以上であればOK

Bun が入っていない場合は次のコマンドでインストールできます。

bash

curl -fsSL https://bun.sh/install | bash

Windows の場合は公式ドキュメントの Windows 向け手順を参照してください。

ステップ① プロジェクトを作成する

N Next.js

create-next-app を使うと、TypeScript・ESLint・App Router の設定が済んだ雛形プロジェクトを一発で作れます。

bash

npx create-next-app@latest my-tw4-app --typescript

✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … No   ← ここは No にする
✔ Would you like your code inside a `src/` directory? … Yes
✔ Would you like to use App Router? … Yes
✔ Would you like to use Turbopack for next dev? … Yes
✔ Would you like to customize the import alias? … No

cd my-tw4-app

⚠️ Tailwind CSS の質問は「No」を選ぶ

create-next-app の Tailwind CSS オプションは v3 をセットアップします。v4 を使いたい場合はここで「No」を選び、次のステップで手動インストールします。

B Bun

Bun にはフロントエンド向けの雛形が複数用意されています。今回は Vite + React + TypeScript の組み合わせを使います（Tailwind CSS は後でインストール）。

bash

bun create vite my-tw4-app --template react-ts

✔ Scaffolding project in ./my-tw4-app...

cd my-tw4-app
bun install

💡 React を使わない構成も可能

「APIサーバーやHTMLを直接書く構成で Tailwind だけ使いたい」という場合は、bun init でゼロから始め、後述の CSS インポートと PostCSS の設定だけ追加すれば動きます。この記事では React + Vite を使ったフロントエンド構成を例にします。

ステップ② Tailwind CSS v4 をインストールする

N Next.js

Next.js は PostCSS を使うため、@tailwindcss/postcss パッケージをインストールします。

bash

npm install -D tailwindcss @tailwindcss/postcss

💡 v4 のパッケージ構成

v3 ではtailwindcss に加えてautoprefixer も必要でしたが、v4 では不要です。@tailwindcss/postcss にすべてが内包されています。

B Bun

Bun + Vite の場合は Vite プラグインを使うのが最もシンプルです。PostCSS を経由しないため設定ファイルも少なくなります。

bash

bun add -d tailwindcss @tailwindcss/vite

💡 @tailwindcss/vite とは

v4 から公式提供された Vite 専用プラグインです。PostCSS を介さず Vite のビルドパイプラインに直接組み込まれるため、差分ビルドの速度が最大限に引き出されます。Next.js の Turbopack 対応も将来的に予定されています。

ステップ③ 設定ファイルを編集する

インストールしたら、バンドラーが Tailwind CSS を使うように設定ファイルを書き換えます。

N Next.js

Next.js は PostCSS 経由で動かすため、postcss.config.mjs （またはpostcss.config.js ）を作成します。

javascript

const config = {
  plugins: {
    "@tailwindcss/postcss": {},

  },
};

export default config;

🔍 v3 からの変更点

v3 ではtailwindcss: {} とautoprefixer: {} の2つを並べていました。v4 では"@tailwindcss/postcss": {} の1行だけです。

B Bun

Bun + Vite の場合はvite.config.ts にプラグインを追加するだけです。PostCSS 設定ファイルは不要です。

typescript

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


export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),   // ← この1行を追加するだけ

  ],
});

✨ シンプルさのポイント

Next.js と比べて設定ファイルが1つ少ない（postcss.config.mjs が不要）のが Bun + Vite 構成の強みです。設定ミスが起きる箇所が減り、ビルドパイプラインも短くなります。

ステップ④ CSS ファイルに @import を書く

ここからは Next.js / Bun 共通の作業です。グローバル CSS ファイルに1行追加するだけです。

N Next.js

src/app/globals.css （create-next-app が自動生成するファイル）を開き、中身を以下に差し替えます。

css

/* v3 の記法（古い） */
@tailwind base;
@tailwind components;
@tailwind utilities;


/* v4 の記法（新しい） */
@import "tailwindcss";

src/app/layout.tsx でglobals.css が import されていることを確認してください（create-next-app ならデフォルトで記述済みです）。

tsx

import "./globals.css";  // ← これが書かれていればOK


export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body>{children}</body>
    </html>
  );
}

B Bun

Vite テンプレートで生成されるsrc/index.css を開き、中身を以下に差し替えます。

css

/* Vite テンプレートのデフォルト CSS（削除） */
:root { font-family: Inter, system-ui, Avenir, ... }
/* ...その他のスタイル ... */


/* v4 の記法（新しい） */
@import "tailwindcss";

src/main.tsx でindex.css が import されていることを確認してください。

tsx

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";  // ← これが書かれていればOK

import App from "./App.tsx";

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

ステップ⑤ @theme でカスタムカラーを定義する

セットアップが完了したら、実際に v4 の新機能「@theme 」を使ってカスタムカラーを追加してみましょう。CSS ファイルへの追記だけで完結します。

Next.js ならglobals.css 、Bun ならindex.css 、それぞれ同じ記法で書きます。以下はどちらの環境でも共通です。

css

@import "tailwindcss";

@theme {
  /* ブランドカラー（bg-brand-* / text-brand-* クラスが自動生成される） */
  --color-brand-50:  #e0f2fe;
  --color-brand-100: #bae6fd;
  --color-brand-500: #0ea5e9;
  --color-brand-700: #0369a1;
  --color-brand-900: #0c4a6e;

  /* フォントファミリー（font-sans が上書きされる） */
  --font-sans: "Noto Sans JP", ui-sans-serif, system-ui;

  /* カスタムスペーシング（p-18 / m-18 クラスが追加される） */
  --spacing-18: 4.5rem;
}

💡 命名規則がクラス名を決める

--color-brand-500 と書くとbg-brand-500 ・text-brand-500 ・border-brand-500 などのクラスが自動生成されます。--spacing-18 と書けばp-18 ・m-18 ・gap-18 が使えるようになります。JS ファイルを触る必要は一切ありません。

ステップ⑥ 動作確認する

設定が完了したらページに Tailwind クラスを書いて、スタイルが反映されるか確認します。

N Next.js

src/app/page.tsx を以下のように書き換えます。

tsx

export default function Home() {
  return (
    <main className="flex min-h-screen items-center justify-center bg-gray-50">
      <div className="space-y-4 text-center">
        <h1 className="text-4xl font-bold text-brand-700">
          Tailwind CSS v4 動作確認
        </h1>
        <p className="text-brand-500">
          カスタムカラーが反映されていれば成功です
        </p>
        <button className="rounded-lg bg-brand-500 px-6 py-2 text-white hover:bg-brand-700">
          ボタン
        </button>
      </div>
    </main>
  );
}

開発サーバーを起動してブラウザで確認します。

bash

npm run dev
#  ▲ Next.js 15.x.x
 # - Local: http://localhost:3000

B Bun

src/App.tsx を以下のように書き換えます。

tsx

function App() {
  return (
    <main className="flex min-h-screen items-center justify-center bg-gray-50">
      <div className="space-y-4 text-center">
        <h1 className="text-4xl font-bold text-brand-700">
          Tailwind CSS v4 動作確認
        </h1>
        <p className="text-brand-500">
          カスタムカラーが反映されていれば成功です
        </p>
        <button className="rounded-lg bg-brand-500 px-6 py-2 text-white hover:bg-brand-700">
          ボタン
        </button>
      </div>
    </main>
  );
}

export default App;

開発サーバーを起動してブラウザで確認します。

bash

bun run dev
 # VITE v6.x.x  ready in 312 ms
 # ➜  Local: http://localhost:5173/

ブラウザに「Tailwind CSS v4 動作確認」という青いテキストとボタンが表示されれば成功です。

🔍 確認ポイント

text-brand-700 （見出し）とbg-brand-500 （ボタン）が青く表示されていれば、@theme で定義したカスタムカラーが正しく機能しています。ボタンにマウスを乗せてhover:bg-brand-700 が暗くなることも確認してください。

よくあるトラブルと解決策

❓ スタイルが一切反映されない

まずCSS ファイルが正しく読み込まれているか確認してください。Next.js ならlayout.tsx にimport "./globals.css" 、Bun ならmain.tsx にimport "./index.css" が書かれているか確認します。次に、開発サーバーを一度停止して再起動（npm run dev /bun run dev ）してみてください。

❓ カスタムカラー（text-brand-500 など）が効かない

@theme ブロックが@import "tailwindcss" の後に書かれているか確認してください。また、CSS 変数名のスペルミスも多いです。--color-brand-500 （color 始まり）と書いた場合はbg-brand-500 /text-brand-500 で使えます。--brand-500 （接頭辞なし）にしてしまうとクラスが生成されません。

❓ Next.js で "Cannot find module '@tailwindcss/postcss'" というエラーが出る

npm install -D tailwindcss @tailwindcss/postcss でインストールされているか確認してください。package.json のdevDependencies に両方があればOKです。ない場合は再度インストールコマンドを実行してください。

❓ Bun で "Cannot find package '@tailwindcss/vite'" というエラーが出る

bun add -d tailwindcss @tailwindcss/vite でインストールされているか確認してください。Bun の場合はnode_modules が正しく生成されているかも確認ポイントです。rm -rf node_modules && bun install でクリーンインストールを試してみてください。

❓ v3 の @tailwind base; などのディレクティブが残っていてエラーになる

v4 では@tailwind base /@tailwind components /@tailwind utilities の3行ディレクティブは廃止されています。CSS ファイルの先頭をすべて削除して、@import "tailwindcss"; の1行に置き換えてください。

第2回のまとめ

今回学んだこと

Next.js は@tailwindcss/postcss 経由でセットアップ。postcss.config.mjs を1ファイル追加する
Bun + Vite は@tailwindcss/vite プラグイン経由でセットアップ。vite.config.ts に1行追加するだけで完結し、設定ファイルが最も少ない
どちらの環境でも CSS ファイルへの@import "tailwindcss"; 1行が必須。v3 の@tailwind base; などの3行ディレクティブは廃止
@theme ブロックに CSS 変数を書くだけでカスタムクラスが自動生成される。JS ファイルに触れる必要がない
どちらもtailwind.config.js は不要。v4 の「設定ファイル廃止」が実感できる