H5 Tailwind preset

H5 Tailwind preset 本质上就是把 vw / rem / clamp / safe-area / 设计 token 👉 封装成一个“可插拔的设计系统模块”。

# 一、什么是 Tailwind preset（先定概念）

一句话：

preset = tailwind.config 的“配置模块化”

项目
 ├─ tailwind.config.js
 └─ presets/
     └─ h5.js   👈 你要做的

1
2
3
4

preset 能包含：

theme（颜色 / spacing / font）
plugins（vw / safe-area / utilities）
darkMode / screens
甚至 safelist

📌 非常适合：

多个 H5 项目
中后台 + H5 共用设计系统
组件库 / 基础设施

# 二、H5 preset 的设计目标（很关键）

我们这个 preset 要解决：

1️⃣ 375 设计稿自动适配
2️⃣ vw 做布局，rem 做稳定度
3️⃣ clamp 控制极限
4️⃣ 安全区（刘海屏）
5️⃣ 不依赖 JS（SSR / WebView 友好）

# 三、目录结构（推荐）

h5-tailwind-preset/
├─ index.js
├─ theme.js
├─ plugins/
│  ├─ vw.js
│  └─ safe-area.js
└─ README.md

1
2
3
4
5
6
7

# 四、核心 preset 实现

# 1️⃣ theme.js（设计 token）

// theme.js
export const theme = {
  extend: {
    fontSize: {
      xs: 'clamp(12px, 3.2vw, 14px)',
      sm: 'clamp(14px, 3.7vw, 16px)',
      base: 'clamp(16px, 4vw, 18px)',
      lg: 'clamp(18px, 4.5vw, 20px)'
    },

    spacing: {
      2: 'clamp(4px, 1.067vw, 8px)',
      4: 'clamp(8px, 2.133vw, 16px)',
      6: 'clamp(12px, 3.2vw, 24px)',
      8: 'clamp(16px, 4.267vw, 32px)'
    },

    borderRadius: {
      md: '8px',
      lg: '12px',
      xl: '16px'
    },

    boxShadow: {
      card: '0 4px 12px rgba(0,0,0,.08)'
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

📌 说明

spacing / fontSize 用 clamp
不覆盖 Tailwind 默认值
保留 rem / px 的可控性

# 2️⃣ vw 工具插件

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

export default plugin(({ addUtilities }) => {
  addUtilities({
    '.vw-full': { width: '100vw' },
    '.vh-full': { height: '100vh' },
    '.min-vh-full': { minHeight: '100vh' }
  })
})

1
2
3
4
5
6
7
8
9
10

# 3️⃣ safe-area 插件（H5 必备）

// plugins/safe-area.js
import plugin from 'tailwindcss/plugin'

export default plugin(({ addUtilities }) => {
  addUtilities({
    '.safe-px': {
      paddingLeft: 'env(safe-area-inset-left)',
      paddingRight: 'env(safe-area-inset-right)'
    },
    '.safe-pt': {
      paddingTop: 'env(safe-area-inset-top)'
    },
    '.safe-pb': {
      paddingBottom: 'env(safe-area-inset-bottom)'
    }
  })
})

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

# 4️⃣ preset 主入口

// index.js
import { theme } from './theme'
import vw from './plugins/vw'
import safeArea from './plugins/safe-area'

export default {
  darkMode: 'class',

  theme,

  plugins: [
    vw,
    safeArea
  ]
}

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

# 五、在项目中如何使用（重点）

# tailwind.config.js

import h5Preset from './presets/h5'

export default {
  content: ['./index.html', './src/**/*.{vue,js,ts}'],
  presets: [h5Preset]
}

1
2
3
4
5
6

📌 注意

presets 是数组
可以叠加多个 preset

# 六、Vue H5 页面实战示例

<template>
  <div class="vw-full min-vh-full bg-gray-50 safe-pb">
    <header class="p-4 text-lg font-bold">
      H5 页面
    </header>

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

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

# 七、preset 的扩展方式（高级但很实用）

# 1️⃣ 允许用户覆盖设计稿宽度

// index.js（高级）
export default function h5Preset(options = {}) {
  const designWidth = options.designWidth || 375

  const vw = (px) => `${(px / designWidth) * 100}vw`

  return {
    theme: {
      extend: {
        spacing: {
          4: `clamp(8px, ${vw(8)}, 16px)`
        }
      }
    }
  }
}

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

使用：

presets: [
  h5Preset({ designWidth: 390 })
]

1
2
3

📌 这一步 = 企业级

# 八、为什么 preset 比“复制 config”高级？

方式	问题
复制 config	不可升级
npm 包	侵入性强
preset	⭐ 可组合 / 可覆盖

📌 preset 是 Tailwind 官方推荐的复用方式

# 九、和之前学习内容的完美闭环

现在已经掌握了：

✅ Tailwind JIT & purge 原理
✅ 插件机制
✅ H5 vw / rem / clamp 方案
✅ preset 设计与抽象

👉 这已经是「前端基础设施工程师」的能力栈

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

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