calc() の Tailwind CSS での活用方法

問題点

Tailwind CSS でレイアウトを構築する際、固定高さの要素（ナビゲーションバーなど）を考慮した動的な高さの計算が必要になることがあります。

例えば、以下のような構造の場合：

<div class="container h-screen w-screen">
  <div class="navBar h-7"></div>
  <div class="content-container"></div>
</div>

ナビゲーションバー（.navBar）の高さが h-7（1.75rem）の場合、コンテンツエリア（.content-container）の高さを 100vh - h-7 に設定したいというニーズがあります。

解決方法

1. 任意の値（Arbitrary Values）を使用する方法

Tailwind CSS では角括弧記法を使用して、直接 CSS の calc() 関数を記述できます：

<div class="h-[calc(100vh-1.75rem)]"></div>

注意点

Tailwind のクラス名ではスペースを使用できないため、以下のいずれかの方法で対応します：

• スペースを完全に省略する
• アンダースコア _ でスペースを代替する

<!-- スペースを省略 -->
<div class="h-[calc(100vh-1.75rem)]"></div>

<!-- アンダースコアで代替 -->
<div class="h-[calc(100vh_-_1.75rem)]"></div>

2. Tailwind のテーマ値を参照する方法

theme() 関数を使用すると、設定された値（spacing, colors, breakpoints など）を参照できます：

/* カスタムCSSファイルで */
.content-container {
  height: calc(100vh - theme('spacing.7'));
}

または JS フレームワークを使用している場合：

<div class="h-[calc(100vh-theme(spacing.7))]"></div>

3. CSS 変数を活用する方法

動的な値が必要な場合、CSS 変数を組み合わせる方法が効果的です：

<div class="h-[calc(100vh-var(--navbar-height))]" style="--navbar-height: 1.75rem;"></div>

またはグローバルに定義：

:root {
  --navbar-height: 1.75rem;
}

<div class="h-[calc(100vh-var(--navbar-height))]"></div>

4. Tailwind CSS v4 での @utility ディレクティブ（推奨）

Tailwind CSS v4 では、再利用可能なユーティリティを作成する方法が導入されました：

@utility h-screen-minus-* {
  height: calc(100vh - var(--spacing) * --value(integer));
}

これにより、以下のように使用できます：

<div class="h-screen-minus-7">100vh - h-7</div>
<div class="h-screen-minus-14">100vh - h-14</div>

同様に幅の場合：

@utility w-screen-minus-* {
  width: calc(100vw - var(--spacing) * --value(integer));
}

メリット

• 一貫したサイズ設定が可能
• コンパイル後のCSSが効率的
• 複数のユースケースに対応可能

実践的な使用例

基本的なレイアウト

<div class="flex flex-col h-screen">
  <header class="h-16 bg-gray-800 text-white p-4">
    ヘッダー
  </header>
  <main class="flex-1 overflow-auto p-4">
    メインコンテンツ
  </main>
  <footer class="h-12 bg-gray-800 text-white p-4">
    フッター
  </footer>
</div>

動的な高さ計算

<div class="h-screen">
  <div class="navBar h-7 bg-blue-500"></div>
  <div class="content-container h-[calc(100vh-theme(spacing.7))] overflow-auto">
    コンテンツエリア
  </div>
</div>

複雑な計算例

<div class="w-[calc(100%_+_theme(spacing.8))]">
  幅を100% + 2remに設定
</div>

<div class="h-[calc(50vh-theme(spacing.4)_+_10px)]">
  複雑な高さ計算
</div>

ベストプラクティス

1. 一貫性を保つ: プロジェクト全体で同じ方法を使用する
2. カスタムユーティリティを作成: 頻繁に使用する計算には @utility ディレクティブを使用
3. CSS変数を活用: 動的な値やテーマの一貫性が必要な場合
4. レスポンシブ対応: 必要に応じてレスポンシブバリアントを追加

@utility h-screen-minus-* {
  height: calc(100vh - var(--spacing) * --value(integer));
  
  @media (min-width: theme('screens.md')) {
    height: calc(100dvh - var(--spacing) * --value(integer));
  }
}

ブラウザ互換性

calc() 関数はすべてのモダンブラウザでサポートされています。ただし、以下の点に注意してください：

• モバイルブラウザでの vh 単位の扱い（100dvh の使用を検討）
• 古いブラウザでは calc() 内での CSS 変数使用に制限がある場合あり

Tailwind CSS の calc() 活用は、柔軟なレイアウト作成を可能にし、デザインシステムの一貫性を保ちながら動的なサイズ調整を実現する強力な方法です。