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.

"Really adapt Tailwind's design system to H5".

1. Three mainstream solutions for H5 adaptation

Solution	Core unit	Is JS required	Is it recommended
rem + JS	rem	✅	⚠️Old solution
vw / vh	vw	❌	✅ Mainstream
vw + rem hybrid	vw + rem	❌	⭐ enterprise

📌 Conclusion (directly to you):

👉 This article demonstrates Tailwind + vw + rem; choose units according to design and accessibility requirements.

II. What should be distinguished when using rem?

rem problem

• rem itself does not require JS; some dynamic root-size strategies do
• Delayed root-size changes by JS may cause initial layout shifts
• An iframe uses its own root size; WebView scaling settings need verification
• Root-size changes also affect Tailwind default rem utilities

📌 But rem still has value:

• Font size
• spacing
• rounded corners

3. Recommended solution structure (key points)

👉 Design draft assumptions

• Design width: 375px

👉 Unit Strategy

Purpose	Unit
layout width and height	vw
font	rem
spacing / fillet	rem
max width	px

4. Tailwind’s core configuration (key)

1️⃣ Set root font-size (no JS required)

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

2️⃣ Modify spacing / fontSize using rem + vw

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

📌 NOTE

• H5 spacing uses separate h5-* names to preserve default spacing; the fontSize examples intentionally customize existing font sizes
• only extend what you need

5. A more elegant solution: use clamp (strongly recommended)

core idea

Font & Spacing Use vw for small screens, locked for large screens

1️⃣ clamp font size

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

2️⃣ clamp spacing

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

📌 clamp bounds viewport-based sizes; verify zoom and landscape behavior.

6. vw layout class (plug-in method, the cleanest)

Write a 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' },
    '.vw-safe': {
      paddingLeft: 'env(safe-area-inset-left)',
      paddingRight: 'env(safe-area-inset-right)'
    }
  })
})

7. Practical examples of Vue/H5 pages

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

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

📌 Features:

• The layout automatically changes with the screen
• The font is not blown up
• iPad / horizontal screen controllable

8. Maximum width limit (very important)

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

📌 max-width only constrains the container; internal vw still follows the viewport. Use clamp or container units where appropriate.

9. Common pitfalls & underlying explanations

1️⃣ vw becomes larger in horizontal screen

✅ Solution:

.h5-spacing {
  padding: clamp(4px, 1.067vw, 8px);
}

2️⃣ Does Tailwind’s default rem conflict with vw?

Will not:

• Tailwind just generates CSS
• Units are completely defined by you

3️⃣ Why not use PostCSS px → vw?

❌ Will affect third-party components ❌ debug difficult

📌 Tailwind itself is a design system and does not require secondary conversion.

10. Complete recommended configuration template (you can use it directly)

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

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