TailwindCSS：text-[]にCSS変数を使う際の注意点と解決方法

TailwindCSSでCSS変数を使用する際、text-[var(--custom-variable)]のような記法で思わぬ問題に遭遇することがあります。この記事では、その問題の原因と効果的な解決方法を解説します。

問題の概要

TailwindCSSで以下のような記述をした場合：

<div class="text-[var(--custom-size)]">テキスト</div>

この記述は期待通りに動作しない可能性があります。なぜなら、Tailwindのtext-[]記法は自動的にcolorプロパティとして解釈される傾向があるためです。

なぜこの問題が発生するのか

TailwindCSSのtext-[]記法は、以下のような優先順位で解釈されます：

1. 色の値として解釈 – text-[#ff0000]、text-[red]など
2. font-sizeとline-heightの解釈 – text-[16px/1.5]など

CSS変数を使用した場合、Tailwindは変数の内容を事前に判断できないため、予期しない動作をする可能性があります。

解決方法

1. プロパティを明示的に指定する

最も確実な方法は、設定したいCSSプロパティを明示的に指定することです：

<!-- font-sizeを設定したい場合 -->
<div class="[font-size:var(--custom-size)]">テキスト</div>

<!-- line-heightを設定したい場合 -->
<div class="[line-height:var(--custom-height)]">テキスト</div>

<!-- 複数のプロパティを同時に設定 -->
<div class="[font-size:var(--custom-size)] [line-height:var(--custom-height)]">
  テキスト
</div>

2. Tailwindの設定ファイルで定義する

tailwind.config.jsでCSS変数を定義し、Tailwindのクラス名として使用する方法：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontSize: {
        'custom-sm': 'var(--text-sm)',
        'custom-md': 'var(--text-md)',
        'custom-lg': 'var(--text-lg)',
      },
      lineHeight: {
        'custom-tight': 'var(--line-height-tight)',
        'custom-normal': 'var(--line-height-normal)',
      }
    }
  }
}

使用例：

<div class="text-custom-md leading-custom-normal">テキスト</div>

まとめ

TailwindCSSでCSS変数を使用する際は、text-[]記法の制限を理解し、適切な方法を選択することが重要です。プロジェクトの要件に応じて、最適な解決方法を選択してください。

明示的なプロパティ指定やTailwindの設定ファイルでの定義など、複数の選択肢があることを覚えておけば、柔軟で保守性の高いスタイリングが可能になります。