メインコンテンツまでスキップ

Tailwind CSS

Tailwind CSSは、Next.jsと非常に相性の良いユーティリティファーストのCSSフレームワークです。

Tailwindのインストール​

Tailwind CSSパッケージをインストールし、initコマンドを実行してtailwind.config.jsとpostcss.config.jsファイルを生成します：

Terminal
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Tailwindの設定​

Tailwind設定ファイル内で、Tailwindクラス名を使用するファイルへのパスを追加します：

tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // `app`ディレクトリの追加に注意してください。
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',

    // `src`ディレクトリを使用する場合：
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

postcss.config.jsを変更する必要はありません。

スタイルのインポート​

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

app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

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

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