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

npm install -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p

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

bun add -D tailwindcss@^3 postcss autoprefixer
bunx tailwindcss init -p

Tailwind v3の設定

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

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ディレクティブを追加します：

app/globals.css

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

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

app/layout.tsx

TypeScript

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

クラスの使用

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

app/page.tsx

TypeScript

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でサポートされています。