Tailwind CSS

このガイドでは、Next.jsアプリケーションにTailwind CSS v3をインストールする方法について説明します。

補足： 最新のTailwind 4セットアップについては、Tailwind CSSセットアップ手順を参照してください。

Tailwind v3のインストール

Tailwind CSSとそのピア依存関係をインストールしてから、initコマンドを実行してtailwind.config.jsとpostcss.config.jsファイルを生成します：

pnpm add -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p

npm install -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p

yarn add -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p

bun add -D tailwindcss@^3 postcss autoprefixer
bunx tailwindcss init -p

Tailwind v3の設定

tailwind.config.jsファイルでテンプレートパスを設定します：

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

グローバルCSSファイルにTailwindディレクティブを追加します：

styles/globals.css

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

pages/_app.jsファイルでCSSファイルをインポートします：

pages/_app.js

import '@/styles/globals.css'
 
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

クラスの使用

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

pages/index.tsx

TypeScript

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