Tailwind CSSでタグのベーススタイルを設定する方法

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

今回は、Tailwind CSSでタグのベーススタイルを設定する方法をご紹介します。

実現したいこと

冒頭、実現したいことを整理します。

例えば、サイト内のh1タグのスタイルをすべて共通にしたい場合、カスタムクラスを用意するという手があります。

@layer components {
  .heading-1 {
    @apply font-body text-2xl
  }
}

<h1 class="heading-1">文字には「font-body text-2xl」が適用される</h1>

しかし、このアプローチの方法ですと、毎回クラスを呼び出す必要があったり、そもそもこのクラスの存在自体を周知する必要が生じます。

そこで、従来のCSSのようにクラスを使用せずにタグに対して直接スタイルを記述して、クラス指定なしスタイリングできるようにしたいです。

h1 {
  @apply font-body text-2xl
}

<h1>文字には「font-body text-2xl」が適用される</h1>

@layer baseでベーススタイルを設定できる

タグのベーススタイルを設定したい場合、Tailwind CSSを読み込んでいるCSSファイルに@layer baseカスケードレイヤーを追加すると設定ができます。

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

@layer base {
  h1 {
    @apply font-body text-2xl
  }
}

これでクラス指定なしスタイリングが可能になりました。

さいごに

今回は、Tailwind CSSでタグのベーススタイルを設定する方法をご紹介しました。

Tailwind CSSを使っている方の一助となれば幸いです。

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