如何在Tailwind CSS v4中使用@theme配置字体样式

1. 正确使用@theme配置包含行高、字重的自定义文本样式 #

在Tailwind v4中，要实现和v3配置一致的字体效果，需在@theme中将字号、行高、字重作为复合值定义到--text-heading-banner-title变量中，格式为{font-size}/{line-height} {font-weight}：

@theme {
  --text-heading-banner-title: 88px/100px 700;
}

配置完成后，Tailwind会自动生成text-heading-banner-title工具类，且原生支持所有响应式前缀（比如sm:text-heading-banner-title），无需额外编写自定义类。

2. 为什么之前的自定义类响应式失效 #

你之前手动编写的.text-heading-banner-title是普通CSS类，Tailwind的响应式前缀（如sm:）仅对原生工具类或通过@theme/配置文件生成的工具类生效，不会自动为手动编写的CSS类生成响应式变体，因此sm:text-heading-banner-title无法正常工作。

3. 可选：添加多断点的自定义样式 #

如果需要在不同屏幕尺寸下调整标题样式，直接在@theme中为对应断点定义变量即可：

@theme {
  --text-heading-banner-title: 88px/100px 700;
  --sm-text-heading-banner-title: 64px/72px 700;
  --md-text-heading-banner-title: 72px/80px 700;
}

之后就能直接使用sm:text-heading-banner-title、md:text-heading-banner-title这类响应式类。

内容的提问来源于stack exchange，提问作者윤효준