Tailwind CSSでfont-sizeやline-heightなどの文字の構成要素がまとまったタイポグラフィトークンを定義する

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

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

今回は、Tailwind CSSで文字の主な構成要素であるfont-size、font-weight、line-height、letter-spacingをまとめたタイポグラフィトークンを定義する方法についてお話します。

CSSを用いた従来のトークン設計

純粋なCSSを用いたトークン設計はCSS変数を用いる方法が主流であると思いますが、タイポグラフィに関しては、font-sizeやline-heightなどのそれぞれのプロパティに対して変数を用意して汎化を行うため記述量は多くなりがちです。

CSSを用いたトークン設計の例（定義部分）

:root {
  --font-size-heading: 2rem;
  --font-weight-heading: 600;
  --font-spacing-heading: 0.01em;
  --font-height-heading: 1.5;
}

CSSを用いたトークン設計の例（使用部分）

.article__title {
  font-size: var(font-size-heading);
  font-weight: var(font-weight-heading);
  letter-spacing: var(font-spacing-heading);
  line-height: var(font-height-heading);
}

font-size、font-weight、line-height、letter-spacingすべてを含むトークンを定義できたら記述量も削減できる上、変数の数も最低限に収めることができるためメンテナンスコストも低減することができますが、純粋なCSSでは限界があるようです。

テキスト用のUtility Classを用意する方法も考えられますが、BEMなどのCSS設計との共存が難しく馴染みません。（BEMに基づいたclass名とUtility Classとしてのclass名が混在してしまうため）

一方、CSSを記述せずにUtility Classベースのスタイリングに振り切ったTailwind CSSでは、font-sizeやline-heightなどの文字の構成要素がまとまったタイポグラフィトークンを定義することができます。

Tailwind CSSで文字の構成要素がまとまったタイポグラフィトークンを定義する

前置きが長くなりましたが、本題です。

Tailwind CSSの設定ファイルであるtailwind.config.jsでは、Tailwind CSSが用意したUtility Classを上書きしたり拡張したりすることができます。

標準の機能で、font-sizeを定義するtheme.fontSizeセクションではfont-sizeに加えてfont-weight、line-height、letter-spacingを含めたトークンを定義することができます。

Tailwind CSSを用いたトークン設計の例（定義部分）

トークン名以下、[fontSize, { lineHeight?, letterSpacing?, fontWeight? }]の構文で記述します。今回のトークン名はheadingとします。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    fontSize: {
      'heading': ['2rem', {
        fontWeight: '600',
        lineHeight: '1.5',
        letterSpacing: '0.01em',
      }],
    }
  }
}

Tailwind CSSを用いたトークン設計の例（使用部分）

font-sizeを指定するUtility Classであるtext-*を使用して、今回独自で定義したheadingを呼び出します。

<h1 class="text-heading">...</h1>

これで、font-size、font-weight、line-height、letter-spacingを一括でスタイリングすることができるようになりました。

さいごに

今回はTailwind CSSを使用して文字の構成要素がまとまったタイポグラフィトークンを定義する方法をお話しました。

Tailwind CSSはCSS設計を頑張らなくてもスタイリングができる上、拡張性にも優れているため効率化や記述量削減にも有用であると思います。

Tailwind CSSを使用している＆これから使用する方の一助となれば幸いです。

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