Next.jsアプリケーションにTailwind CSSをインストールする方法

Tailwind CSSは、Next.jsと完全に互換性のあるユーティリティファーストのCSSフレームワークです。このガイドでは、Next.jsアプリケーションにTailwind CSSをインストールする方法を説明します。

Tailwindのインストール

必要なTailwind CSSパッケージをインストールします:

Terminal

npm install -D tailwindcss @tailwindcss/postcss postcss

補足: create-next-app CLIを使用してプロジェクトを作成する場合、Next.jsはTailwindのインストールとプロジェクトの自動設定を提案します。

Tailwindの設定

プロジェクトのルートにpostcss.config.mjsファイルを作成し、PostCSS設定に@tailwindcss/postcssプラグインを追加します:

postcss.config.mjs

/** @type {import('tailwindcss').Config} */
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

Tailwind v4以降、デフォルトでは設定は不要です。設定が必要な場合は、グローバルCSSファイルの設定について公式ドキュメントを参照してください。

既存のTailwind v3プロジェクトがある場合は、アップグレードCLIとガイドが利用可能です。

スタイルのインポート

Tailwindが生成するスタイルを注入するためのTailwind CSSディレクティブを、アプリケーションのグローバルスタイルシートに追加します。例:

app/globals.css

@import 'tailwindcss';

ルートレイアウト（app/layout.tsx）内でglobals.cssスタイルシートをインポートし、アプリケーションのすべてのルートにスタイルを適用します。

import type { Metadata } from 'next'

// これらのスタイルはアプリケーションのすべてのルートに適用されます
import './globals.css'

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

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

// これらのスタイルはアプリケーションのすべてのルートに適用されます
import './globals.css'

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

クラスの使用

Tailwind CSSをインストールし、グローバルスタイルを追加した後、アプリケーションでTailwindのユーティリティクラスを使用できます。

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

Turbopackとの連携

Next.js 13.1以降、Tailwind CSSとPostCSSはTurbopackでサポートされています。