Glittering's blog

Appearance

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

一、什么是 Tailwind preset ​

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

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

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 友好）

三、目录结构（推荐） ​

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

四、核心 preset 实现 ​

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

js
// 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)'
    }
  }
}

📌 说明

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

2️⃣ vw 工具插件 ​

js
// 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' }
  })
})

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

js
// 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)'
    }
  })
})

4️⃣ preset 主入口 ​

js
// 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
  ]
}

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

tailwind.config.js ​

js
import h5Preset from './presets/h5'

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

📌 注意

  • presets 是数组
  • 可以叠加多个 preset

六、Vue H5 页面实战示例 ​

vue
<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>

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

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

js
// 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)`
        }
      }
    }
  }
}

使用：

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

📌 这一步 = 企业级

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

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

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

Copyright © 2026