ホームページ > 記事 > ウェブフロントエンド > Tailwind CSS を使用して OS Next.js をセットアップする方法
Tailwind CSS を使用して Next.js をセットアップするには、次の手順に従います。
Next.js プロジェクトをまだ作成していない場合は、create-next-app を使用して作成できます。
npx create-next-app@latest my-next-app cd my-next-app
Next.js プロジェクト内に、Tailwind CSS を必要な依存関係とともにインストールします。
npm install -D tailwindcss postcss autoprefixer
tailwind.config.js ファイルと postcss.config.js ファイルを生成して、Tailwind CSS を初期化します。
npx tailwindcss init -p
これにより、プロジェクトのルートに tailwind.config.js ファイルと postcss.config.js ファイルが作成されます。
tailwind.config.js の内容を次の設定に置き換えて、関連ファイルで Tailwind を有効にします。
/** @type {import('tailwindcss').Config} */ module.exports = { content: [ './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', ], theme: { extend: {}, }, plugins: [], }
プロジェクトで、./styles/globals.css ファイルを開くか作成し、次の行を追加して Tailwind のベース、コンポーネント、ユーティリティをインポートします。
@tailwind base; @tailwind components; @tailwind utilities;
次に、開発サーバーを起動して、Tailwind CSS の動作を確認します。
npm run dev
これで、Next.js プロジェクトが Tailwind CSS でセットアップされるはずです。コンポーネント内で Tailwind ユーティリティ クラスを使用して、コンポーネントのスタイルを設定できます。
Next.js ページ (pages/index.js) での Tailwind CSS の使用例を次に示します。
export default function Home() { return ( <div className="min-h-screen bg-gray-100 flex items-center justify-center"> <h1 className="text-4xl font-bold text-blue-600"> Welcome to Next.js with Tailwind CSS! </h1> </div> ); }
このセットアップにより、Tailwind のユーティリティファースト CSS フレームワークを使用して Next.js アプリケーションの構築を開始できるようになります!
以上がTailwind CSS を使用して OS Next.js をセットアップする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。