Next.js Tailwind CSS

Next.js プロジェクトで Tailwind CSS を使用することは非常に人気のある選択肢です。ユーティリティファーストな方法で CSS を記述できるため、クラス名に直接スタイルを適用でき、スタイルの記述がより簡潔で直感的になります。

Tailwind CSS チュートリアル：https://www.example.com/tailwindcss/tailwindcss-tutorial.html

Tailwind CSS 公式サイト：https://tailwindcss.com/

GitHub アドレス：https://github.com/tailwindlabs/tailwindcss

Tailwind CSS は強力な CSS フレームワークです。ユーティリティファーストのアプローチにより、スタイルの記述がより簡潔かつモジュール化されます。従来のクラスベースの CSS フレームワークとは異なり、Tailwind は一連の低レベルなユーティリティクラスを提供します。これらのクラスは HTML 要素で直接使用でき、カスタムデザインを迅速かつ柔軟に構築できます。

以下は、Next.js プロジェクトで Tailwind CSS を使用するための詳細な手順です。

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

ゼロから新しい Next.js プロジェクトを作成する場合は、create-react-app を使用できます。既存の React プロジェクトがある場合は、プロジェクト作成の手順をスキップできます。

新しい Next.js プロジェクトの作成：

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

作成時に Tailwind CSS をインストールするかどうかが求められます。「はい」を選択できます：

...
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
...

Tailwind CSS をインストールする

プロジェクトディレクトリで次のコマンドを実行して、Tailwind CSS と必要な依存関係をインストールできます：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

これにより、tailwind.config.ts ファイルと postcss.config.mjs ファイルが作成されます。

2. Tailwind CSS を設定する

Tailwind 設定ファイル tailwind.config.ts で、Tailwind クラス名を使用するファイルのパスを追加します。

通常、デフォルトですべて設定されているため、変更する必要はありません：

例

import type { Config } from "tailwindcss";

export default {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}", // app ディレクトリが追加されていることに注意してください。
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
},
},
},
plugins: [],
} satisfies Config;

postcss.config.mjs ファイルを変更する必要はありません。

3. Tailwind の基本スタイルを追加する

Tailwind CSS のディレクティブをアプリケーションのグローバルスタイルシートに追加します。Tailwind はこれらのディレクティブを使用して、生成されたスタイルを注入します。

プロジェクト内で app/globals.css ファイルを開き、次の内容を追加して、Tailwind の基本スタイル、コンポーネントスタイル、ユーティリティスタイルを含めます：

/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

ルートレイアウト app/layout.tsx で globals.css スタイルシートをインポートし、スタイルをアプリ内のすべてのルートに適用します：

例

// app/layout.tsx
// これらのスタイルはアプリ内のすべてのルートに適用されます
import './globals.css'

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html>
<body>{children}</body>
</html>
)
}

4. Tailwind CSS を使ってスタイルを記述する

Tailwind CSS をインストールしてグローバルスタイルを追加した後、アプリで Tailwind のユーティリティクラスを使用できます：

app/page.tsx ファイルコード：

// app/page.tsx
export default function Home() {
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
<div className="bg-white p-8 rounded-lg shadow-lg">
<h1 className="text-2xl font-bold text-gray-900">Hello, サンプル!</h1>
<p className="mt-4 text-gray-600">初心者向けチュートリアル、学ぶのは技術だけでなく、夢でもあります！</p>
<button className="mt-6 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
クリックして試す
</button>
</div>
</div>
);
}

実行：

npm run dev

次にブラウザを開いて http://localhost:3000 にアクセスすると、Tailwind CSS スタイルを使用したシンプルな React アプリが表示されます。

上記の手順により、Next.js プロジェクトに Tailwind CSS を正常に統合し、それを使用してスタイルを記述できました。Tailwind CSS のユーティリティクラス名を使用すると、スタイルコードを簡潔かつモジュール化した状態に保ちながら、コンポーネントにすばやくスタイルを追加できます。

その他の拡張