Tailwind CSSをNext.jsにインストール

Next.jsプロジェクトでのTailwind CSSの設定。

まだプロジェクトを設定していない場合は、新しいNext.jsプロジェクトを作成することから始めます。最も一般的なアプローチは、以下を使用することです。 Create Next App.

ターミナル

npx create-next-app@latest my-project --typescript --eslint --app
cd my-project

@tailwindcss/postcssとそのピア依存関係をnpm経由でインストールします。

ターミナル

npm install tailwindcss @tailwindcss/postcss postcss

プロジェクトのルートにpostcss.config.mjsファイルを作成し、以下を追加します。 PostCSS設定に@tailwindcss/postcssプラグインを追加します。

postcss.config.mjs

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

Tailwind CSSをインポートする@importを./src/app/globals.cssに追加します。

globals.css

@import "tailwindcss";

npm run devでビルドプロセスを実行します。

ターミナル

npm run dev

Tailwindのユーティリティクラスを使用してコンテンツをスタイルします。

page.tsx

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}