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

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'

const config: Config = {
  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: [],
}
export default config

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

スタイルのインポート​

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

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

Root レイアウト（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から、TurbopackとのサポートとしてTailwind CSSとPostCSSが導入されました。