Tailwind CSSのセットアップ — Next.js・Viteへの導入方法 - Tailwind CSS実践ガイド

Tailwind CSS v4 から設定ファイルの仕組みが大きく変わりました。この章ではv4系（2024年以降の標準）のセットアップを中心に説明します。

学習者

ネットの記事だと tailwind.config.js を作れって書いてあるのに、最近作ったプロジェクトには無い…。どっちが正しいの？

先生

それはバージョン差だね。v4から設定方法が大きく変わって tailwind.config.js は基本不要になったんだ。古い記事はv3前提のことが多いから注意しよう。

Next.jsへの導入（v4）

create-next-app で最初から入れる

npx create-next-app@latest my-app
# "Would you like to use Tailwind CSS?" → Yes

bash

これだけで設定が完了します。

既存プロジェクトへの追加

npm install tailwindcss @tailwindcss/vite

bash

app/globals.css（または styles/globals.css）に追記します。

@import 'tailwindcss';

css

v4 では tailwind.config.js は不要で、CSS の @import だけで有効になります。

Next.jsでの最小構成

Next.js App Routerなら、基本は app/globals.css に @import "tailwindcss"; を置き、app/layout.tsx でそのCSSを読み込む構成になります。

// app/layout.tsx
import './globals.css';
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body>{children}</body>
    </html>
  );
}

tsx

Viteへの導入（v4）

npm install tailwindcss @tailwindcss/vite

bash

vite.config.ts にプラグインを追加します。

import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
 
export default defineConfig({
  plugins: [tailwindcss()],
});

src/index.css などのCSSエントリーに追記します。

@import 'tailwindcss';

css

v3系のセットアップ（参考）

v3以前では tailwind.config.js が必要でした。

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

bash

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

css

VSCode拡張：Tailwind CSS IntelliSense

Tailwindを使うなら必須の拡張機能です。

クラス名の補完
ホバーでCSSの内容をプレビュー
未知のクラスの警告

拡張機能ID: bradlc.vscode-tailwindcss

この拡張を入れると、bg- と打った時点で候補が出たり、text-blue-600 にホバーすると実際のCSS値を確認できたりします。Tailwindはクラス名を多く使うため、補完なしで書くより学習効率が大きく上がります。

ちゃんと使うためのポイント

v4は @import "tailwindcss" だけで動く（設定ファイル不要）
v3は content の設定を忘れると本番ビルドでスタイルが消える
VSCode拡張 Tailwind IntelliSense は実務では必須レベル

次の章では、Flexboxとグリッドのレイアウトユーティリティを学びます。

Tailwind CSSクイズに挑戦するこの章で学んだTailwind CSSの知識を、4択クイズでアウトプットして定着させよう