Tailwind CSSを導入する

はじめに

Tailwind CSSは、ユーティリティクラスを使ってスタイルを簡潔に記述できるCSSフレームワークです。Next.jsと組み合わせて使うことで、開発効率を大きく向上させることができます。ここでは、Next.js（App Router構成）にTailwind CSSを導入する手順を紹介します。

1. 必要なパッケージをインストール

ターミナルで以下のコマンドを実行して、Tailwind CSSとその依存パッケージをインストールします：

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

2. Tailwindの設定ファイルを編集

tailwind.config.js を以下のように編集して、appディレクトリなどを対象にTailwindを適用できるようにします。

1/** @type {import('tailwindcss').Config} */
2module.exports = {
3  content: [
4    './app/**/*.{js,ts,jsx,tsx}',
5    './components/**/*.{js,ts,jsx,tsx}',
6  ],
7  theme: {
8    extend: {},
9  },
10  plugins: [],
11}
12

3. グローバルCSSにTailwindを読み込む

app/globals.css（またはプロジェクトのCSSファイル）に以下の3行を追加します：

1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4

4. 使用確認

app/page.tsx に以下のようにTailwindのクラスを使って、ちゃんとスタイルが適用されているか確認してみましょう：

1export default function Page() {
2  return (
3    <div className="flex items-center justify-center h-screen bg-gray-100">
4      <h1 className="text-3xl font-bold text-blue-600">Tailwind CSSが使えるようになりました！</h1>
5    </div>
6  );
7}
8

まとめ

• Tailwind CSSとPostCSSをインストール
• tailwind.config.js を編集して対象を指定
• globals.css にTailwindの3つのディレクティブを追加
• ページでクラスを使って表示を確認