Tailwind CSS

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

Tailwindのインストール

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

npm install -D tailwindcss @tailwindcss/postcss postcss

Tailwindの設定

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

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

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

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

スタイルのインポート

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

@import 'tailwindcss';

カスタムアプリファイル (pages/_app.js) 内で、globals.cssスタイルシートをインポートして、アプリケーションのすべてのルートにスタイルを適用します。

// These styles apply to every route in the application
import '@/styles/globals.css'
import type { AppProps } from 'next/app'
 
export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

クラスの使用

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