The JavaScript configuration and plugin snippets here target Tailwind CSS 3. Tailwind CSS 4 uses CSS-first configuration; explicitly load a compatible legacy config with @config rather than assuming automatic discovery. Upgrade guide.

H5 Tailwind preset is essentially the vw / rem / clamp / safe-area / design token 👉 Packaged into a "pluggable design system module".

1. What is Tailwind preset?

preset = "configuration modularity" of tailwind.config

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

preset can contain:

• theme(color/spacing/font)
• plugins（vw / safe-area / utilities）
• darkMode / screens
• even safelist

📌 Ideal for:

• Multiple H5 projects
• Middle and backend + H5 shared design system
• Component Library/Infrastructure

2. Design goals of H5 preset (very critical)

Our preset needs to be solved:

• 1️⃣ 375 design draft automatic adaptation
• 2️⃣ vw does layout, rem does stability
• 3️⃣ clamp control limit
• 4️⃣ Safe Area (Notch)
• 5️⃣ Does not rely on JS (SSR/WebView friendly)

3. Directory structure (recommended)

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

4. Core preset implementation

1️⃣ theme.js (design token)

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

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

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

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

📌 Instructions

• spacing / fontSize using clamp
• Preserve default tokens with h5-* names; styles change only when H5 classes are selected
• Keep rem/px controllable

2️⃣ vw tool plug-in

// 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 plug-in (required for 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)'
    }
  })
})

4️⃣ preset main entrance

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

export default {
  darkMode: 'class',

  theme,

  plugins: [
    vw,
    safeArea
  ]
}

5. How to use it in projects (key points)

tailwind.config.js

import h5Preset from './presets/h5/index.js'

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

📌 NOTE

• presets is an array
• Multiple presets can be superimposed

6. Vue H5 page practical example

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

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

7. Extension methods of preset (advanced but very practical)

1️⃣ Allow users to override the width of the design draft

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

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

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

Use:

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

📌 This function only shows a spacing extension; merge the original theme and plugins when replacing the entry to retain the complete preset.

8. Why is preset more advanced than "copy config"?

Method	Question
Copied config	Changes must be synchronized manually
npm package	Releases and versions need maintenance
preset	⭐ Can be combined / can be overridden

📌 preset is the reuse method officially recommended by Tailwind