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

このガイドでは、Next.js アプリケーションに Tailwind CSS v3 をインストールする方法を説明します。

参考情報: 最新の Tailwind 4 のセットアップについては、Tailwind CSS セットアップ手順を参照してください。

Tailwind v3 のインストール

Tailwind CSS とそのピア依存関係をインストールし、init コマンドを実行して tailwind.config.js と postcss.config.js の両方のファイルを生成します。

pnpm add -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p

Tailwind v3 の設定

tailwind.config.js ファイルでテンプレートパスを設定します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

グローバル CSS ファイルに Tailwind ディレクティブを追加します。

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

CSS ファイルをルートレイアウトにインポートします。

import './globals.css'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  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>
}

Turbopack との連携

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

役に立ちましたか？