Next.jsにおける、globals.cssのデフォルトコードを解説

スタイル
スポンサーリンク

npx create-next-appで新しくプロジェクトを作成したい際、**globals.css**ファイルは下記のようなコードになっています。

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

今回の記事では、このコードをについて解説します。

Tailwind CSSの基本

Tailwind CSSは、ユーティリティファーストのCSSフレームワークで、クラス名を組み合わせることで迅速にスタイルを適用できます。

以下のコードは、Tailwind CSSの基本的な構成を示しています。

@tailwind base; /* 基本的なスタイルをインポート */
@tailwind components; /* コンポーネントレベルのスタイルをインポート */
@tailwind utilities; /* ユーティリティクラスをインポート */

これらのディレクティブにより、Tailwindの全てのスタイリング機能が利用可能になります。

カスタムプロパティの定義

CSSのカスタムプロパティ（変数）を使用することで、テーマの色を一元管理できます。:root セレクタを使用して、ライトモードのデフォルトカラーを定義します。

:root {
  --foreground-rgb: 0, 0, 0; /* テキスト色：黒 */
  --background-start-rgb: 214, 219, 220; /* 背景グラデーション開始色：明るいグレー */
  --background-end-rgb: 255, 255, 255; /* 背景グラデーション終了色：白 */
}

ダークモードのスタイル適用

ユーザーがダークモードを好む場合に適用されるスタイルを、メディアクエリを使って定義します。

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255; /* テキスト色：白 */
    --background-start-rgb: 0, 0, 0; /* 背景グラデーション開始色：黒 */
    --background-end-rgb: 0, 0, 0; /* 背景グラデーション終了色：黒 */
  }
}

このメディアクエリは、システムの設定に基づいて自動的にダークモードのスタイルを適用します。

body 要素のスタイリング

最後に、body 要素に対して、定義したカスタムプロパティを使用してスタイリングを適用します。

body {
  color: rgb(var(--foreground-rgb)); /* カスタムプロパティを使用してテキスト色を設定 */
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb)); /* カスタムプロパティを使用して背景グラデーションを設定 */
}

このスタイルにより、body 要素のテキスト色と背景色が、ライトモードとダークモードで適切に切り替わります。

まとめ

/* Tailwind CSSの基本スタイルをインポートします */
@tailwind base;

/* Tailwind CSSのコンポーネントスタイルをインポートします */
@tailwind components;

/* Tailwind CSSのユーティリティクラスをインポートします */
@tailwind utilities;

/* ルート要素（:root）に対して、ライトモード時のカラースキームを定義します */
:root {
  --foreground-rgb: 0, 0, 0; /* テキストの色（黒） */
  --background-start-rgb: 214, 219, 220; /* 背景グラデーションの開始色（明るいグレー） */
  --background-end-rgb: 255, 255, 255; /* 背景グラデーションの終了色（白） */
}

/* ユーザーがダークモードを好む場合に適用されるカラースキームを定義します */
@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255; /* テキストの色（白） */
    --background-start-rgb: 0, 0, 0; /* 背景グラデーションの開始色（黒） */
    --background-end-rgb: 0, 0, 0; /* 背景グラデーションの終了色（黒） */
  }
}

/* body要素にスタイルを適用します */
body {
  color: rgb(var(--foreground-rgb)); /* テキストの色をカスタムプロパティから設定 */
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb)); /* 背景に線形グラデーションを適用 */
}

このコードは、ユーザーのシステム設定に応じて自動的にテーマが切り替わるため、ユーザーエクスペリエンスを向上させることができます。

上記のコードを参考に、あなたのプロジェクトにも実装してみてください。

おまけ

Next.jsにおけるpage.tsxの初期コードをHello Worldだけ残すと、下記のような画面になると思います。

このデフォルトスタイルをなくし、綺麗な真っ白の画面を表示するためのコードでは下記のようにするのがおすすめです。

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
  }
}

body {
  color: rgb(var(--foreground-rgb));
}

開発の参考になれば幸いです。

スポンサーリンク