Tailwind CSS ホームページ
  1. インストール
  2. Next.js で Tailwind CSS をインストールする

  1. プロジェクトを作成する

    まだ Next.js プロジェクトをセットアップしていない場合は、新しいプロジェクトを作成することから始めます。最も一般的な方法は、 Create Next App を使用することです.

    ターミナル
    npx create-next-app@latest my-project --typescript --eslintcd my-project

  2. Tailwind CSS をインストールする

    npm 経由で tailwindcss とその依存関係をインストールし、init コマンドを実行して tailwind.config.js と postcss.config.js の両方を生成します。

    ターミナル
    npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p

  3. テンプレートパスを設定する

    tailwind.config.js ファイルにすべてのテンプレートファイルへのパスを追加します。

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./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: [],
}

  4. CSS に Tailwind ディレクティブを追加する

    globals.css ファイルに、各 Tailwind レイヤーの @tailwind ディレクティブを追加します。 globals.css ファイル。

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

  5. ビルドプロセスを開始する

    npm run dev でビルドプロセスを実行します。

    ターミナル
    npm run dev

  6. プロジェクトで Tailwind を使い始める

    Tailwind のユーティリティクラスを使用してコンテンツのスタイルを設定します。

    index.tsx
    export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}