Tailwind CSS

このガイドでは、Tailwind CSS v3を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

Tailwind v3の設定

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ディレクティブを追加します。

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

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

import '@/styles/globals.css'
 
export default function MyApp({ Component, pageProps }) {
  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でサポートされています。

役に立ちましたか？