Tailwind CSS
Tailwind CSSは、Next.jsと完全に互換性のあるユーティリティファーストのCSSフレームワークです。
Tailwindのインストール
必要なTailwind CSSパッケージをインストールします:
Terminal
npm install -D tailwindcss @tailwindcss/postcss postcss
Tailwindの設定
プロジェクトのrootにpostcss.config.mjs
ファイルを作成し、PostCSSの設定に@tailwindcss/postcss
プラグインを追加します:
postcss.config.mjs
/** @type {import('tailwindcss').Config} */
export default {
plugins: {
'@tailwindcss/postcss': {},
},
}
Tailwind v4から、デフォルトで設定は不要です。Tailwindを設定する必要がある場合は、グローバルCSSファイルの設定について公式ドキュメントを参照してください。
既存のTailwind v3プロジェクトがある場合は、アップグレードCLIとガイドもあります。
スタイルのインポート
Tailwindが生成したスタイルを注入するために使用するTailwind CSSディレクティブを、アプリケーションのグローバルスタイルシートに追加します。例えば:
app/globals.css
@import 'tailwindcss';
Root レイアウト(app/layout.tsx
)内で、globals.css
スタイルシートをインポートし、アプリケーション内のすべてのルートにスタイルを適用します。
- TypeScript
- JavaScript
app/layout.tsx
import type { Metadata } from 'next'
// これらのスタイルはアプリケーション内のすべてのルートに適用されます
import './globals.css'
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
app/layout.js
// これらのスタイルはアプリケーション内のすべてのルートに適用されます
import './globals.css'
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
クラスの使用
Tailwind CSSをインストールし、グローバルスタイルを追加した後、アプリケーションでTailwindのユーティリティクラスを使用できます。
- TypeScript
- JavaScript
app/page.tsx
export default function Page() {
return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}
app/page.js
export default function Page() {
return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}
Turbopackとの使用
Next.js 13.1以降、Tailwind CSSとPostCSSはTurbopackでサポートされています。