Tailwind CSS を使用して OS Next.js をセットアップする方法

Tailwind CSS を使用して Next.js をセットアップするには、次の手順に従います。

ステップ 1: 新しい Next.js プロジェクトを作成する

Next.js プロジェクトをまだ作成していない場合は、create-next-app を使用して作成できます。

npx create-next-app@latest my-next-app
cd my-next-app

ステップ 2: Tailwind CSS をインストールする

Next.js プロジェクト内に、Tailwind CSS を必要な依存関係とともにインストールします。

npm install -D tailwindcss postcss autoprefixer

ステップ 3: Tailwind CSS を初期化する

tailwind.config.js ファイルと postcss.config.js ファイルを生成して、Tailwind CSS を初期化します。

npx tailwindcss init -p

これにより、プロジェクトのルートに tailwind.config.js ファイルと postcss.config.js ファイルが作成されます。

ステップ 4: tailwind.config.js を構成する

tailwind.config.js の内容を次の設定に置き換えて、関連ファイルで Tailwind を有効にします。

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

ステップ 5: Tailwind CSS を CSS ファイルに追加する

プロジェクトで、./styles/globals.css ファイルを開くか作成し、次の行を追加して Tailwind のベース、コンポーネント、ユーティリティをインポートします。

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

ステップ 6: 開発サーバーを実行する

次に、開発サーバーを起動して、Tailwind CSS の動作を確認します。

npm run dev

これで、Next.js プロジェクトが Tailwind CSS でセットアップされるはずです。コンポーネント内で Tailwind ユーティリティ クラスを使用して、コンポーネントのスタイルを設定できます。

使用例

Next.js ページ (pages/index.js) での Tailwind CSS の使用例を次に示します。

export default function Home() {
  return (
    <div classname="min-h-screen bg-gray-100 flex items-center justify-center">
      <h1 classname="text-4xl font-bold text-blue-600">
        Welcome to Next.js with Tailwind CSS!
      </h1>
    </div>
  );
}

このセットアップにより、Tailwind のユーティリティファースト CSS フレームワークを使用して Next.js アプリケーションの構築を開始できるようになります!

以上がTailwind CSS を使用して OS Next.js をセットアップする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。