Tailwind CSS
Tailwind CSSはユーティリティファーストのCSSフレームワークで、Next.jsと完全に互換性があります。
Tailwindのインストール
必要なTailwind CSSパッケージをインストールします:
Terminal
npm install -D tailwindcss @tailwindcss/postcss postcss
Tailwindの設定
プロジェクトのルートに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ディレクティブを追加します:
styles/globals.css
@import 'tailwindcss';
カスタムアプリファイル(pages/_app.js
)内で、globals.css
スタイルシートをインポートして、アプリケーションのすべてのルートにスタイルを適用します。
pages/_app.tsx
TypeScript
// これらのスタイルはアプリケーションのすべてのルートに適用されます
import '@/styles/globals.css'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
クラスの使用
Tailwind CSSをインストールしてグローバルスタイルを追加した後、アプリケーションでTailwindのユーティリティクラスを使用できます。
pages/index.tsx
TypeScript
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でサポートされています。