記事内に広告が含まれています。

Next.js での Tailwind CSS 利用方法（サンプルあり）

タイトルの通り、Next.js アプリケーションで Tailwind CSS を利用する方法を紹介します。

CLI によるアプリケーション作成

まずは、npx コマンドで Next.js アプリケーションを作成します。次のコマンドを実行し、アプリケーション作成を進めましょう。

npx create-next-app@latest --ts

プロンプトで選択肢が提示されるので、下記を参考に入力を進めます。なお、Tailwind CSS の追加は、下記４行目の選択肢で "Yes" を選択することで行うことができます。

C:\Users\Administrator>npx create-next-app@latest --ts
√ What is your project named? ... nextjs-tailwind-demo
√ Would you like to use ESLint with this project? ... No / Yes
√ Would you like to use Tailwind CSS with this project? ... No / Yes
√ Would you like to use `src/` directory with this project? ... No / Yes
√ Use App Router (recommended)? ... No / Yes
√ Would you like to customize the default import alias? ... No / Yes

Tailwind CSS コンポーネントの配置

ここでは、Tailwind に収録されている Button コンポーネントをページ上に配置し、動作を確認します。

app\page.tsx を開き、main タグ配下に、button タグを用意し、ClassName プロパティ経由で Tailwind CSS のスタイリングを適用します。

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        Button
      </button>
    </main>
  )
}

実行結果

次のコマンドでアプリケーションを実行します。

npm run dev

画面中央にボタンが表示されていることが分かります。また、マウスホバーすることで、ボタンの背景色が変わります。

サンプルアプリケーションのダウンロードと実行

↓ サンプルアプリケーションのダウンロードはこちらです。

nextjs-tailwind-demoダウンロード

zip ファイルを解凍後、次のコマンドを実行し、アプリケーションを起動します。

npm run dev

アプリケーションの動作は、http://localhost:3000/ を開くことで確認することができます。

-React