在 Tailwind CSS 中使用 calc() 函数

问题描述

在开发响应式布局时，经常需要动态计算元素的尺寸。一个常见场景是：有一个固定高度的导航栏，需要让内容区域的高度填充剩余的可视空间。

例如，有这样的 HTML 结构：

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

.navBar 设置了高度为 h-7（对应 Tailwind 中的 1.75rem），现在需要让 .content-container 的高度为 100vh - 1.75rem。

解决方案

1. 使用 Tailwind 的任意值语法（推荐）

Tailwind 支持使用方括号语法添加任意 CSS 值：

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

或者使用下划线替代空格：

<div class="h-[calc(100vh_-_1.75rem)]"></div>

2. 使用 theme() 函数引用主题值

可以在自定义 CSS 中使用 theme() 函数引用 Tailwind 的配置值：

.content-container {
  height: calc(100vh - theme('spacing.7'));
}

3. 动态计算与 CSS 变量结合

对于需要动态计算的场景，可以使用 CSS 变量：

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

或者在全局 CSS 中定义：

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

然后在模板中使用：

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

Tailwind v4 的高级用法

在 Tailwind CSS v4 中，可以使用 @utility 指令创建可重用的工具类：

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

这样就能使用类似 h-screen-minus-7 的类名：

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

同样适用于宽度计算：

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

注意事项

• 在任意值语法中避免使用空格，使用下划线 _ 替代
• 考虑到不同视口单位的表现差异，可以考虑使用 100dvh、100lvh 或 100svh 替代 100vh
• 动态计算时，确保使用的单位一致（rem、px 等）

实际应用示例

<div class="flex flex-col h-screen">
  <div class="h-7 bg-gray-200">导航栏</div>
  <div class="h-[calc(100vh-1.75rem)] bg-gray-100">
    <!-- 内容区域 -->
  </div>
</div>

或者使用更灵活的方案：

<div class="flex flex-col h-screen">
  <div class="h-7 bg-gray-200">导航栏</div>
  <div class="flex-1 bg-gray-100">
    <!-- 内容区域自动填充剩余空间 -->
  </div>
</div>

总结

在 Tailwind CSS 中使用 calc() 函数有多种方法，从简单的任意值语法到创建可重用的工具类。选择哪种方法取决于项目的具体需求：

• 简单场景：使用 h-[calc(100vh-1.75rem)]
• 需要引用主题值：使用 theme('spacing.7')
• 需要动态计算：结合 CSS 变量
• 项目中使用频繁：在 Tailwind v4 中创建 @utility 工具类

这些方法都能有效地解决动态尺寸计算的问题，让布局更加灵活和响应式。