Tailwind CSSの@applyを使用してUtility classをまとめた独自Classを定義する方法

Tailwind CSS スタイリング フロントエンド

こんにちは。エキサイトでデザイナーをしている齋藤です。

今回はTailwind CSSの@applyを使用してUtility classをまとめたClassを独自に定義をする方法をご紹介します。

なぜUtility classをまとめたいのか

前提として、Utility classをまとめたいシーンについて整理をします。

Tailwind CSSは用意されたUtility classを使用することで、CSSを記述することなくスタイリングできる代物ですが、都度対象となるHTML要素に対してUtility classを記述する必要があるため、再利用性には欠けます。

したがって、ボタンなどのサイト全体で共通したスタイルでかつ、繰り返し使われるような汎用的なUIパーツの場合、同じスタイリングを何度もしなければならないことになってしまい、手間がかかってしまいます。

また、変更が生じた際に一つ一つ修正が必要になり保守性が低い上、漏れが生じやすいため、UIの一貫性も担保しにくい開発になってしまいます。

その際、繰り返し使われるようなパーツ用のUtility classをまとめたClassを定義したいという動機が生まれます。

<button class="px-6 py-5  gap-1.5 flex w-fit items-center justify-center rounded text-color-text-primary transition hover:bg-gray-100 focus:outline-none focus:ring focus:ring-blue-500">
  ボタン
</button>

<!-- ↓ Utility classをまとめた独自Classでスタイリングできるようにしたい ↓ -->

<button class="c-button c-buttton--lg">
  ボタン
</button>

このような場合には、Tailwind CSSの@apply機能を使用することで、Utility classをまとめた独自Classを定義することができます。

Utility classをまとめた独自Classを定義する方法

独自Classを定義する場所

@applyを使用して独自Classを定義する場合は、Tailwind CSSを読み込んでいるinput.cssやmain.cssに記述をします。

その際、@layer componentsカスケードレイヤー内に記述をすることで、Tailwind CSSがUtility classをまとめた独自Classを認識できます。

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

@layer components {
 /* ここに記述をしていく */
}

@applyを使用して独自Classを定義する方法

@layer components内に記述をしていきます。

Class名は自由に決定することができますが、既存のUtility classと重複する可能性は否定できませんので、接頭辞をつけて明確に区分ができるようにすることで重複する可能性を回避します。また、接頭辞をつけることで呼び出しているHTMLでも一目でUtility classと独自Classを見分けることができるのでコードの可読性も担保しやすくなると考えます。

先述の通り、Utility classをまとめた独自Classを定義したくなるようなスタイルは、ボタンなどの汎用的なUIパーツであり、汎用的なUIパーツはデザインパターンが一つではないことも多々あることから、個人的にはClass名設計にはBEM + 接頭辞を用いることが良いのではないかと考えています。

Classを作成したら、その中に先頭に@applyをつけた上で、CSSプロパティの代わりにTailwind CSSのUtility classを記述していきます。

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

@layer components {
  .c-button {
    @apply flex w-fit items-center justify-center rounded text-color-text-primary transition hover:bg-gray-100 focus:outline-none focus:ring focus:ring-blue-500;
  }

  .c-button--lg {
    @apply gap-1.5 px-6 py-5
  }
  ...
}

独自Classを呼び出す場合は通常のCSSと同様です。

<button class="c-button c-buttton--lg">
  ボタン
</button>

さいごに

今回は、Tailwind CSSの@applyを使用してUtility classをまとめたClassを独自に定義をする方法をご紹介しました。

Tailwind CSSを使っている、これから使いたいという方の一助となれば幸いです。

ご精読ありがとうございました。