Menu

Tailwind CSS

Tailwind CSSはユーティリティファーストのCSSフレームワークで、Next.jsと完全に互換性があります。

Tailwindのインストール

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

Terminal
npm install -D tailwindcss @tailwindcss/postcss postcss

Tailwindの設定

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

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

Tailwind v4以降、デフォルトでは設定は必要ありません。Tailwindを設定する必要がある場合は、グローバルCSSファイルを設定するための公式ドキュメントに従ってください。

既存のTailwind v3プロジェクトをお持ちの場合は、アップグレードCLIとガイドも用意されています。

スタイルのインポート

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

app/globals.css
@import 'tailwindcss';

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

app/layout.tsx
TypeScript
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>
  )
}

クラスの使用

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