Tailwind结合 H5 rem/vw 的配置方案

「把 Tailwind 的设计系统，真正落地到 H5 适配」。

# 一、H5 适配的三种主流方案（先定方向）

方案	核心单位	是否需要 JS	是否推荐
rem + JS	rem	✅	⚠️ 老方案
vw / vh	vw	❌	✅ 主流
vw + rem 混合	vw + rem	❌	⭐ 企业级

📌 结论（直接给你）：

👉 Tailwind + vw + rem（混合）是当前最稳的 H5 方案

# 二、为什么不用纯 rem 了？

# rem 的问题

依赖 JS 注入
首屏抖动
iframe / webview 有坑
和 Tailwind 默认 rem 冲突

📌 但 rem 仍然有价值：

字号
间距
圆角

# 三、推荐方案架构（重点）

# 👉 设计稿假设

设计宽度：375px

# 👉 单位策略

用途	单位
布局宽高	vw
字体	rem
间距 / 圆角	rem
最大宽度	px

# 四、Tailwind 的核心配置（关键）

# 1️⃣ 设置 root font-size（不需要 JS）

/* main.css */
html {
  font-size: 16px;
}

1
2
3
4

# 2️⃣ 修改 spacing / fontSize 使用 rem + vw

// tailwind.config.js
export default {
  theme: {
    extend: {
      spacing: {
        // 设计稿 375 → 1vw = 3.75px
        4: '1.067vw',   // 4px
        8: '2.133vw',   // 8px
        12: '3.2vw',
        16: '4.267vw'
      },
      fontSize: {
        sm: '0.875rem',
        base: '1rem',
        lg: '1.125rem'
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

📌 注意

不要覆盖默认 spacing
只 extend 你需要的

# 五、更优雅方案：使用 clamp（强烈推荐）

# 核心思想

字体 & 间距 小屏用 vw，大屏锁死

# 1️⃣ clamp 字号

fontSize: {
  base: 'clamp(14px, 3.7vw, 16px)',
  lg: 'clamp(16px, 4vw, 18px)'
}

1
2
3
4

# 2️⃣ clamp 间距

spacing: {
  4: 'clamp(4px, 1.067vw, 8px)',
  8: 'clamp(8px, 2.133vw, 16px)'
}

1
2
3
4

📌 这是现在大厂 H5 的默认解法

# 六、vw 布局类（插件方式，最干净）

# 写一个 vw 工具类插件

// plugins/vw.js
import plugin from 'tailwindcss/plugin'

export default plugin(({ addUtilities }) => {
  addUtilities({
    '.vw-full': { width: '100vw' },
    '.vh-full': { height: '100vh' },
    '.vw-safe': {
      paddingLeft: 'env(safe-area-inset-left)',
      paddingRight: 'env(safe-area-inset-right)'
    }
  })
})

1
2
3
4
5
6
7
8
9
10
11
12
13

# 七、Vue / H5 页面实战示例

<template>
  <div class="vw-full min-h-screen bg-gray-50">
    <header class="p-4 text-lg font-bold">
      标题
    </header>

    <section class="px-4 space-y-4">
      <div class="p-4 bg-white rounded-xl shadow-card">
        内容卡片
      </div>
    </section>
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13

📌 特点：

布局自动随屏幕变化
字体不炸
iPad / 横屏可控

# 八、最大宽度限制（非常重要）

<div class="max-w-[480px] mx-auto"></div>

📌 防止 iPad / 大屏 H5 失控

# 九、常见坑 & 底层解释

# 1️⃣ vw 在横屏变大

✅ 解决：

@media (orientation: landscape) {
  html {
    font-size: 14px;
  }
}

1
2
3
4
5

# 2️⃣ Tailwind 默认 rem 和 vw 冲突？

不会：

Tailwind 只是生成 CSS
单位完全由你定义

# 3️⃣ 为什么不用 PostCSS px → vw？

❌ 会影响第三方组件 ❌ debug 困难

📌 Tailwind 本身就是设计系统，不需要二次转换

# 十、完整推荐配置模板（你可直接用）

export default {
  content: ['./index.html', './src/**/*.{vue,js,ts}'],
  theme: {
    extend: {
      fontSize: {
        base: 'clamp(14px, 3.7vw, 16px)',
        lg: 'clamp(16px, 4vw, 18px)'
      },
      spacing: {
        4: 'clamp(4px, 1.067vw, 8px)',
        8: 'clamp(8px, 2.133vw, 16px)',
        12: 'clamp(12px, 3.2vw, 24px)'
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

上次更新: 2025/12/26, 01:42:33

← Tailwind 底层生成机制 & purge 原理 H5 Tailwind preset→