Tailwind CSS の @apply の使いどころを考える

こんにちは、 Gaji-Labo 横田です。Tailwind CSS の @apply の使いどころを考えてみます。

Tailwind CSS の @apply

Tailwind CSS の @apply は class を再利用するやり方のひとつで、 class をひとつにまとめてコンポーネント化することができます。以下は公式ドキュメントから引用したコード例です。

<!-- Before extracting a custom class -->
<button class="py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
  Save changes
</button>

<!-- After extracting a custom class -->
<button class="btn-primary">
  Save changes
</button>

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

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

@layer components の中で class 名を設定し、 @apply で指定したい class を羅列することができます。

@apply 化のメリットとデメリット

コンポーネント化できるメリットとしては、コードをある程度 DRY にできる、ボタンやリスト、ラベルといった atom 的な小さな部品をひとつの class にまとめられることで再利用がしやすくなる、バリエーションのスタイルも追加しやすくなる、hover など状態管理もしやすくなることがあげられます。タブやページネーションなど、サイト全体で共通の機能をもつコンポーネントも @apply 化に向いていると感じています。

一方で、何でも @apply でコンポーネント化してしまうと、クラス名を毎回考える必要がでてきますし、従来通りの CSS 設計と同様にスタイル変更の影響範囲などの問題もでてくる、CSS のバンドルも大きくなるため、Tailwind CSS を採用した恩恵をあまり受けなくなってきます。

公式でも使いどころについて明記していますが、使用するフレームワークや開発環境、運用を見据えた上で @apply をどう使うとバランスがいいか、柔軟に考えたいです。