Next.js
Tailwind CSS

Next.jsでTailwind CSSを導入する

Next.jsプロジェクトにTailwind CSSを導入する方法をステップバイステップで説明します

Next.jsは、Reactベースのフレームワークで、サーバーサイドレンダリングや静的サイト生成に対応しています。Tailwind CSSは、ユーティリティファーストのCSSフレームワークで、クラスを使ってスタイルを直接HTMLに書き込むことができます。このガイドでは、Next.jsプロジェクトにTailwind CSSを導入する方法をステップバイステップで説明します。

#1. Next.jsプロジェクトの作成

まず、Next.jsのプロジェクトを作成します。Node.jsとnpm（またはyarn）がインストールされていることを確認してください。

npx create-next-app my-nextjs-tailwind-project
cd my-nextjs-tailwind-project

#2. Tailwind CSSのインストール

次に、Tailwind CSSをNext.jsプロジェクトにインストールします。PostCSSとAutoprefixerも必要ですので、一緒にインストールします。

npm install tailwindcss postcss autoprefixer

Tailwind CSSの設定ファイルとPostCSSの設定ファイルを生成します。

npx tailwindcss init -p

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

#3. Tailwind CSSの設定

tailwind.config.jsファイルを編集して、Tailwind CSSを適用するファイルを指定します。

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

次に、Tailwind CSSを使用するためのCSSファイルを作成します。stylesディレクトリ内にglobals.cssファイルを作成し、以下の内容を追加します。

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

#4. Tailwind CSSの使用

pages/_app.jsファイルを編集して、グローバルCSSファイルをインポートします。

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

これで、Tailwind CSSがNext.jsプロジェクト全体で使用できるようになります。

#5. カスタムCSSの追加

Tailwind CSSのユーティリティクラスを使って、簡単にスタイルを適用できます。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-500">
        Hello, Tailwind CSS with Next.js!
      </h1>
    </div>
  )
}

#6. まとめ

以上で、Next.jsプロジェクトにTailwind CSSを導入する方法の基本的な手順が完了です。Tailwind CSSを使って、迅速かつ効率的に美しいデザインを作成できるようになりました。さらに詳細な情報やカスタマイズについては、Tailwind CSSの公式ドキュメントおよびNext.jsの公式ドキュメントを参照してください。

タグ一覧