17370845950

使用响应式前缀结合字体类实现多设备适配，例如sm:text-sm md:text-lg lg:text-xl，使文本在不同屏幕尺寸下自动调整大小，提升可读性与视觉层次。

在 Tailwind CSS 中实现响应式字体大小，主要通过内置的响应式前缀来控制不同屏幕尺寸下的字体样式。Tailwind 提供了从 xs 到 2xl 甚至更大的字体类，并结合断点前缀实现响应式设计。

响应式断点前缀

Tailwind 使用以下断点前缀来适配不同设备：

text-sm, text-base, text-lg, text-xl, text-2xl, ... 定义字体大小 sm: — 应用于最小宽度为 640px 的设备（小型及以上）md: — 应用于最小宽度为 768px 的设备（中型及以上）lg: — 应用于最小宽度为 1024px 的设备（大屏及以上）xl: — 应用于最小宽度为 1280px 的设备2xl: — 应用于最小宽度为 1536px 的设备

使用示例：根据不同屏幕设置字体大小

例如，希望在手机上显示较小字体，在桌面端显示较大字体：

上面代码含义：

手机（默认）：text-sm平板及以上（≥768px）：text-lg桌面大屏（≥1024px）：text-xl

实际应用场景

常见于标题或关键文案，比如首页主标题：

欢迎来到我们的平台

这样字体会随着屏幕变大而逐步增大，提升可读性和视觉层次。

自定义字体大小（可选）

如果默认字体阶梯不够用，可以在 tailwind.config.js 中扩展字体配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      fontSize: {
        '3xl': '2rem',
        '4xl': '2.5rem',
        '5xl': '3rem',
      }
    }
  }
}

之后就可以像正常使用一样：text-3xl 等类名。

基本上就这些。Tailwind 的响应式字体系统简洁高效，只需组合断点前缀和字体类就能实现流畅的适配效果。