Next.jsのglobals.cssを読み解く

create-next-appでNext.jsのプロジェクトを作成すると、globals.cssにはデフォルトで次のような記述があります。この記事では、これらの意味を読み解き、自分でカスタマイズすることができるようになります。

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

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

解説

1. Tailwind CSSに関する部分

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

この3行は、Tailwind CSSを使うための基本的な設定です。それぞれ以下のような役割があります：

1. @tailwind base: Tailwind CSSのリセットスタイル（基本のスタイル）が読み込まれます。ブラウザのデフォルトスタイルをリセットするためのものです。

2. @tailwind components: 自分で定義したコンポーネントスタイルが読み込まれます。

   ※ コンポーネントスタイルとは

   TailwindCSSでは「カード」や「ボタン」など、よく使うスタイルをまとめて一つのクラスにまとめることができます。それを「コンポーネントスタイル」といいます。コンポーネントスタイルを定義するには、@layer components{} というディレクティブを使います。

   //globals.css
   
   @layer components {
     .btn-primary {
       background-color: #3490dc;
       color: white;
       padding: 0.5rem 1rem;
       border-radius: 0.25rem;
       font-weight: bold;
       transition: background-color 0.3s;
     }
   
     .btn-primary:hover {
       background-color: #2779bd;
     }
   }
   

   これにより、簡単にボタンのスタイルを当てることができます。

   <button class="btn-primary">Click Me!</button>
   

   
   

3. @tailwind utilities: text-centerやbg-gray-500といった通常のユーティリティクラス読み込むためのものです。

2. CSS変数とテーマ切り替えに関する部分

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

ここでは、CSS変数（カスタムプロパティ）を使って、背景色と文字色を設定しています。フォアグラウンドとは、「手前にあるもの」という意味で、ここでは文字色として使われます。

• :root: ルートタグであるhtmlタグの中で、-backgroundと-foregroundというCSS変数（カスタムプロパティ）を定義しています。初期値として背景色は白、文字色は黒です。
• @media (prefers-color-scheme: dark): デバイスのOSがダークモードになっている場合に適用されるスタイルを指定します。背景色は黒、文字色は白です。

3. bodyのスタイル

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

ルート要素で定義したCSS変数をvar()を使って呼び出し、文字色と背景色を定義します。また、フォントも定義しています。

• color: var(--foreground);: 文字色をCSS変数-foregroundで設定します。
• background: var(--background);: 背景色をCSS変数-backgroundで設定します。
• font-family: Arial, Helvetica, sans-serif;: フォントファミリーを指定しています。

4. ユーティリティクラスの追加

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

• @layer utilities: これはTailwind CSSのユーティリティレイヤー（普通のクラスたち）に新しいクラスを追加しています。グローバルに使いたい場合は、tailwind.config.tsファイルでも同様に新しいクラスを定義することができますが、@layer utilities は読み込んだCSSにしか反映されないので、一部のコンポーネントにスコープを制限することができます。

• .text-balance: テキストの折り返しに関する text-wrap: balance;という新しいクラスを定義しています。例えば、

  <p class="text-balance">文章</p>
  

  とかくと、テキストがバランスよく折り返されることになります。

ぜひご参照ください！