︙

Tailwind CSS

Tailwind CSS は、ユーティリティ最優先の CSS フレームワークで、特に Next.js と非常によく機能します。

Installing Tailwind

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

Terminal

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

Configuring Tailwind

tailwind.config.jsの中に、Tailwind CSS クラス名を使用するファイルに paths を追加します:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',

    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

Importing Styles

アプリケーションのGlobal stylesheetに、例えば、Tailwind が生成した styles を注入するために使うTailwind CSS のディレクティブを追加してください。例：

app/globals.css

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

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

app/layout.tsx

import type { Metadata } from 'next'

// These styles apply to every route in the application
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>
  )
}

app/layout.js

// These styles apply to every route in the application
import './globals.css'

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Using Classes

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

app/page.tsx

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

app/page.js

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

Usage with Turbopack

Next.js 13.1 時点で、“Tailwind CSS と“PostCSS はTurbopack でサポートされています。