Next.jsプロジェクトでTailwind CSSを使用する方法

Next.jsプロジェクトのセットアップ:
- ターミナルを開き、新しいNext.jsプロジェクトを作成します。以下のコマンドを実行します。
```
npx create-next-app my-project
```
- プロジェクトのディレクトリに移動します。
```
cd my-project
```
Tailwind CSSのインストール:
- ターミナルで以下のコマンドを実行して、Tailwind CSSをインストールします。
```
npm install tailwindcss
```
Tailwind CSSの設定:
- プロジェクトのルートディレクトリにtailwind.config.jsという名前のファイルを作成します。
```
touch tailwind.config.js
```
- tailwind.config.jsファイルを開き、以下の内容を追加します。
```
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
 extend: {},
},
variants: {
 extend: {},
},
plugins: [],
}
```
  この設定ファイルでは、必要に応じてTailwind CSSの様々なオプションをカスタマイズすることができます。
Tailwind CSSのスタイルシートのインポート:
- Next.jsでは、グローバルなスタイルシートを_app.jsファイルでインポートすることができます。_app.jsファイルを開き、以下のように編集します。
```
import 'tailwindcss/tailwind.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
```
  これにより、Tailwind CSSのスタイルが全てのページで利用可能になります。

コーディング例:

Tailwind CSSのクラスを使用して、簡単なスタイルを適用する例を示します。

import React from 'react'
function HomePage() {
return (
 <div className="bg-blue-500 text-white p-4">
   <h1 className="text-3xl font-bold">Welcome to my website!</h1>
   <p className="mt-2">This is a sample Next.js project with Tailwind CSS.</p>
   <button className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 mt-4">
     Click me
   </button>
 </div>
)
}
export default HomePage

この例では、背景色を青色に設定し、テキストを白色に設定しています。さらに、タイトルには太字のスタイルが適用され、ボタンにはマウスオーバー時に色が変わる効果があります。

以上が、Next.jsプロジェクトでTailwind CSSを使用する方法の概要です。これにより、シンプルで簡単なスタイルの適用が可能になります。コーディング例も含まれているので、参考にしてください。