導入
このチュートリアルでは、TailwindCSS と組み合わせて Next.js をインストールし、さまざまなフロントエンド プロジェクトの初期セットアップを作成する方法を説明します。.
Next.jsは、多くの便利な機能を備えたReactJSフロントエンドフレームワークです。静的サイトジェネレーターとして機能するだけでなく、様々なソースからデータを取得して動的なコンテンツを表示するための高度な戦略も備えています。.
TailwindCSSは、CSSクラス名の適用に関数型ファーストのアプローチを採用したCSSフレームワークです。命名規則を気にすることなく、モダンなレイアウトやデザインを効率的に作成できます。.
前提条件
- MacOS、Windows、Linux搭載システム
- 最新バージョンの Node.js と npm がインストールされています。
ステップ1 – Next.jsをインストールする
Next.js は自動または手動でインストールできます。.
- 自動的に：
npx create-next-app my-project [--use-npm]
- 手動:
mkdir ~/my-project && cd ~/my-project
npm install next react react-domNext.js をインストールしたら、新しいファイル ~/my-project/package.json を編集し、次のように「script」セクションを追加します。
{
"dependencies": {
<your_dependencies>
},
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}ステップ2 – TailwindCSSをインストールする
TailwindCSSはPostCSSをプリプロセッサとして、AutoPrefixを追加の依存関係として使用します。これはオプションですが、Tailwindはこれらのプラグインを使用する際に便利な機能を提供するため、推奨されます。例えば、@apply、@theme、theme()などの非標準キーワードをカスタムCSSファイルで使用できます。.
cd ~/my-project
npm install -D tailwindcss postcss autoprefixerその後、TailwindCSS の設定ファイルを作成します。
npx tailwindcss init -p
これにより、tailwind.config.js と postcss.config.js が作成されます。.
ステップ3 – Next.jsを構成する
アプリケーションのルートを定義するには、アプリケーションディレクトリにJavaScriptファイルを追加するだけです。このチュートリアルでは、動的に生成されないページに焦点を当てます。これは、多くの場合、動的なデータを使用してルートを生成する必要があるためです。例えば、IDに基づいてルートを作成するなどです。これを実現する方法については、Next.jsのドキュメントに優れたガイドがあります（メニューが「Use Application Router」に設定されていることを確認してください）。.
ページを追加する
ページを作成するには、「app」というサブディレクトリが必要です。app内には、以下の2つのファイルが必要です。
| ファイル | 説明 |
|---|---|
| アプリ/レイアウト.tsx | このファイルには、メイン ページとすべてのサブページを含むすべてのページに自動的に適用されるレイアウトに関する情報が含まれています。. |
| アプリ/ページ.tsx | これにはメインページのコンテンツが含まれます。. |
さらに、必要な数だけサブディレクトリを追加できます。page.tsx ファイルを含む各サブディレクトリは、アプリケーションのサブページを表します。.
このチュートリアルでは、次の例を使用します。
app/
├── layout.tsx # layout of main page and all subpages
├── page.tsx # content main page
└── example-subpage/
├── layout.tsx # additional layout requirements for example-subpage
└── page.tsx # content example-subpageこの例では 2 つのページが生成されます。
http://<ip-address>:3000 # main page
http://<ip-address>:3000/example-subpage # subpageNext.js を手動でインストールした場合は、アプリケーション ファイル ディレクトリを作成します。
mkdir ~/my-project/app
これで、ページにコンテンツを追加できます。
- ホームページ
nano ~/my-project/app/page.tsx
このコンテンツをホームページに使用します:
// ~/my-project/app/page.tsx
export default function Page() {
return <h1 className="text-white text-3xl font-bold pl-5">Welcome to Next.js and TailwindCSS</h1>
}- サブページ
サブページ用の新しいサブディレクトリを追加し、page.tsx を作成します。
mkdir ~/my-project/app/example-subpage
nano ~/my-project/app/example-subpage/page.tsxサブページには次のコンテンツを使用します:
// ~/my-project/app/example-subpage/page.tsx
export default function Page () {
return (
<>
<div className="flex flex-col place-content-center items-center col-span-1 pr-3">
<div className="border-2 rounded-full p-0.5 border-gray-600 mb-2">
<img
className="rounded-full w-100 h-100"
src="https://picsum.photos/100/100"
alt="random image from unsplash"
/>
</div>
</div>
<div className="col-span-5 pr-3">
<h2 className="text-white text-3xl font-semibold pl-4 mb-3">Welcome to Next.js and TailwindCSS</h2>
<span className="text-gray-500 text-lg font-bold block pl-4 mb-3">Bringing both frameworks together</span>
<p className="text-white pl-4 leading-7">
Cats are believed to be the only mammals who don't taste sweetness. Cats are nearsighted, but their peripheral
vision and night vision are much better than that of humans. Cats are supposed to have 18 toes (five toes on
each front paw; four toes on each back paw). Cats can jump up to six times their length.
</p>
</div>
</>
)
}レイアウトを追加する（TailwindCSS）
ページのコンテンツが完成したので、ページを表示するレイアウトを追加できます。.
- ホームページとすべてのサブページの一般的なレイアウト
前述のように、app/layout.js で定義されたレイアウトは、メイン ページとすべてのサブページに自動的に適用されます。.
TailwindCSS を含めるには、次の 2 つのオプションのいずれかを選択します。
- 代替案1: JavaScript経由
これは、追加のスタイルシートを記述せずに TailwindCSS を追加する便利な方法です。.
nano ~/my-project/app/layout.tsx
このコンテンツを使用する:
// ~/my-project/app/layout.tsx
import 'tailwindcss/tailwind.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<>
<html lang="en">
<head>
<title>Next.js and TailwindCSS</title>
<link rel="icon" href="/favicon.ico"/>
</head>
<body className="min-h-screen bg-gradient-to-tr from-midnight-100 via-midnight-200 to-midnight-300 flex flex-col justify-center">{children}</body>
</html>
</>
)
}- 代替案2: CSS経由
もう1つの選択肢は、CSSを使ってTailwindスタイルを追加することです。これを実現するには、グローバルスタイルシートをapp/layout.tsxファイルにインポートします。.
app/layout.tsx を作成します。
nano ~/my-project/app/layout.tsx
このコンテンツを使用する:
// ~/my-project/app/layout.tsx
import './globals.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<>
<html lang="en">
<head>
<title>Next.js and TailwindCSS</title>
<link rel="icon" href="/favicon.ico"/>
</head>
<body className="min-h-screen bg-gradient-to-tr from-midnight-100 via-midnight-200 to-midnight-300 flex flex-col justify-center">{children}</body>
</html>
</>
)
}グローバルシート app/global.css を作成します。
/* ~/my-project/app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;残念ながら、Tailwind では、ビルド時に生成されたスタイル (Tailwind の構成に基づく) をスタイルシートに挿入する以外に、@tailwind ディレクティブの機能について詳細な説明は提供されていません。.
- サブページのカスタムレイアウト
各サブページには独自のレイアウトファイルがあります。追加のレイアウトが必要な場合は、サブページレイアウトファイルに直接保存するか、専用のディレクトリに保存してサブページレイアウトファイルにインポートすることができます。追加のレイアウト仕様を専用ディレクトリに保存しておくと、複数のサブページでレイアウトを再利用しやすくなります。そのため、複数のサブページで同じレイアウトが必要な場合に適しています。.
追加のレイアウト用のディレクトリを作成します。
mkdir ~/my-project/components
追加のレイアウトを作成します。
nano ~/my-project/components/FancyCard.jsこのコンテンツを追加します:
// ~/my-project/components/FancyCard.js
'use client'
import React from 'react'
const FancyCard = ({ children }) => {
return (
<div className="max-w-xl mx-auto">
<div className="p-8 bg-midnight-200 shadow-xl rounded-3xl border-4 border-gray-600">
<div className="grid grid-cols-6 gap-0 divide-x divide-gray-600">
{children}
</div>
</div>
</div>
)
}
export default FancyCard次に、サブページ用の layout.tsx ファイルを作成し、追加のレイアウト仕様を適用します。
nano ~/my-project/app/example-subpage/layout.tsx
// ~/my-project/app/example-subpage/layout.tsx
import FancyCard from '../../components/FancyCard'
export default function Layout({ children }) {
return <FancyCard>{children}</FancyCard>
}前述の通り、必要に応じてコンポーネントにレイアウトを追加し、そのレイアウトを使用する各サブページのlayout.tsxファイルにそれらを記述することができます（上記の例を参照）。レイアウトを一度だけ使用する予定の場合は、そのサブページのlayout.tsxファイルに直接追加することもできます。.
ステップ4 – TailwindCSSを設定する
最後のステップは、Tailwind と PostCSS の構成ファイルをカスタマイズすることです。.
npx tailwindcss init -p を実行すると、すでに 2 つの構成ファイルが作成されています。
- テールウィンド.config.js
- postcss.config.js
PostCSS をプリプロセッサとして使用する場合は、ベンダー プレフィックスの追加、グローバル CSS リセットの追加、@font-face ルールの作成などの追加機能に postcss.config.js を使用できます。.
TailwindCSSのもう一つの優れた機能は、デフォルトのテーマを簡単にカスタマイズできることです。tailwind.config.jsのテーマプロパティを変更することで、カスタムブレークポイント、カラー、フォント、さらには間隔、境界線の半径、ボックスの影といったより詳細な設定など、カスタマイズが可能です。カラーキーを変更することで、既存のテーマに独自のカスタムカラーパレットを追加できます。
nano ~/my-project/tailwind.config.js
次のコンテンツを追加します。
// ~/my-project/tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
colors: {
...defaultTheme.colors,
'white': '#ffffff',
'black': '#242424',
'midnight': {
'100': '#03060a',
'200': '#001a40',
'300': '#060b17',
// add more color variants if you want to
},
'gray': {
'500': '#6b7280',
'600': '#4b5563',
},
'purple': {
'500': '#6d28d9',
},
// add more colors if you want to
},
},
plugins: [],
}さらに、デフォルトのカラースキームを拡張することで、Tailwind のデフォルトのカラーパレットを引き続き使用できます。定義済みの color とそのバリアントである bg-{color}-{variant} を使用して、複数のアプリケーションクラスに独自の色を適用できるようになったことに注目してください。例えば、次のようになります。
<div className="bg-midnight-300">
...
</div>ステップ5 – アプリを起動する
すべての設定が完了したら、プログラムを実行して結果を確認します。
- プライベート IP (localhost) 経由でアクセスするには:
npm run dev- パブリック IP 経由でアクセスするには:
npm run dev -- -H 0.0.0.0
両方のページを Web ブラウザで開きます。
http://<ip-address>:3000http
://<ip-address>:3000/example-subpage次のようになります。
結果
Tailwind を CSS フレームワークとして使用する Next.js アプリケーションを正常に起動しました。.
CSSフレームワークを初めて使用すると、多くの議論が生じます。そして、よくあるように普遍的なルールはありません。中には、CSSフレームワークは読みにくくて乱雑だ、インラインスタイルと変わらない、関心の分離に違反している、といった意見もあります。個人的には、これらの点はすべて反論の余地があると考えています。両方の意見を理解するために、以下の2つの記事を読むことをお勧めします。そうすれば、このフレームワークが次のプロジェクトに適しているかどうかを判断できるでしょう。.
