Tailwind CSS

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

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スタイルシートをインポートして、アプリケーションのすべてのルートにスタイルを適用します。

// これらのスタイルはアプリケーションのすべてのルートに適用されます
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でサポートされています。