Tailwind px2vw Plugin

一个 Tailwind CSS 插件，将 arbitrary value 中的 px 自动转换为 vw，支持多断点配置。

特性

• 🎯 显式转换：仅转换使用插件前缀的 class，不影响原生 Tailwind
• 📱 多设计稿支持：为不同尺寸的设计稿配置不同的视口宽度基准
• 🔢 精度控制：自定义 vw 小数位数
• 🚫 属性黑名单：排除特定 CSS 属性不转换
• 🧮 完整支持：calc()、多 px 值、box-shadow、负值等
• ⚡ 响应式支持：完全兼容 Tailwind 的响应式前缀（md:、lg: 等）

安装

npm install tailwind-px-to-vw-plugin -D

配置

单一设计稿（推荐）

如果只有一套设计稿（如移动端 375px），使用单一配置：

// tailwind.config.js
const { createPxToVwPlugin } = require('tailwind-px-to-vw-plugin');

module.exports = {
  plugins: [
    createPxToVwPlugin({
      viewportWidth: { h5: 375 },  // 设计稿宽度
      unitPrecision: 5,
      minPixelValue: 1,
    }),
  ],
};

其他使用方式：

// 方式 1：解构导入（推荐）
const { createPxToVwPlugin } = require('tailwind-px-to-vw-plugin');

// 方式 2：使用 default
const createPxToVwPlugin = require('tailwind-px-to-vw-plugin').default;

// 方式 3：ESM
import createPxToVwPlugin from 'tailwind-px-to-vw-plugin';

使用：

<div class="h5-text-[14px] md:h5-text-[16px]">
  <!-- 都基于 375px 视口计算 -->
  <!-- 14px → 3.73vw -->
  <!-- 16px → 4.27vw -->
</div>

多套设计稿

如果有多套不同尺寸的设计稿（如移动端 375px + 平板 768px），使用多配置：

const { createPxToVwPlugin } = require('tailwind-px-to-vw-plugin');

module.exports = {
  plugins: [
    createPxToVwPlugin({
      viewportWidth: {
        h5: 375,   // 移动端设计稿宽度
        pad: 768,  // 平板设计稿宽度
      },
      unitPrecision: 5,
      minPixelValue: 1,
    }),
  ],
};

使用：

<div class="h5-text-[14px] md:pad-text-[16px]">
  <!-- h5-text-[14px]: 基于 375px 设计稿 → 3.73vw -->
  <!-- pad-text-[16px]: 基于 768px 设计稿 → 2.08vw -->
</div>

完整配置选项

const { createPxToVwPlugin } = require('tailwind-px-to-vw-plugin');

createPxToVwPlugin({
  // 视口宽度配置（必填）
  viewportWidth: { h5: 375 },
  
  // vw 值的小数精度（可选，默认 5）
  unitPrecision: 5,
  
  // 最小转换值，小于此值的 px 不转换（可选，默认 1）
  minPixelValue: 1,
  
  // CSS 属性黑名单，这些属性不会转换（可选，默认 []）
  propBlackList: ['border-width'],
  
  // 默认前缀（可选，默认 'default'）
  defaultPrefix: 'h5',
})

使用示例

<!-- 基础使用 -->
<div class="h5-mt-[15px]">margin-top: 4vw</div>
<div class="h5-w-[200px]">width: 53.33333vw</div>

<!-- 响应式（同一设计稿） -->
<div class="h5-text-[14px] md:h5-text-[16px] lg:h5-text-[18px]">
  <!-- 都基于 375px 计算 -->
  <!-- 移动端: 14px → 3.73vw -->
  <!-- 平板: 16px → 4.27vw -->
  <!-- 桌面: 18px → 4.8vw -->
</div>

<!-- 混合原生 Tailwind -->
<div class="h5-w-[200px] md:w-[400px] lg:w-[600px]">
  <!-- 移动端: 200px → 53.33vw -->
  <!-- 平板: 原生 Tailwind，固定 400px -->
  <!-- 桌面: 原生 Tailwind，固定 600px -->
</div>

支持的场景

<!-- 多个 px 值 -->
<div class="h5-m-[10px_20px_15px_25px]">
  margin: 2.66667vw 5.33333vw 4vw 6.66667vw
</div>

<!-- calc() 表达式 -->
<div class="h5-w-[calc(100%-30px)]">
  width: calc(100% - 8vw)
</div>

<!-- 负值 -->
<div class="h5-mt-[-10px]">
  margin-top: -2.66667vw
</div>

<!-- box-shadow -->
<div class="h5-shadow-[0_2px_10px_rgba(0,0,0,0.1)]">
  box-shadow: 0 0.53333vw 2.66667vw rgba(0,0,0,0.1)
</div>

支持的 Utility

支持 80+ 个 Tailwind utility：

• Spacing: m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, gap, gap-x, gap-y

• Sizing: w, h, min-w, min-h, max-w, max-h, size

• Position: top, right, bottom, left, inset, inset-x, inset-y

• Typography: text, leading, tracking, indent

• Border: border, border-t/r/b/l, rounded, rounded-*, outline, outline-offset

• Effects: shadow, drop-shadow

• Transform: translate-x, translate-y

• Scroll: scroll-m, scroll-p 及其方向变体

  所有 utility 都需要使用配置的前缀，例如 h5-mt-[15px]、pad-w-[400px]

License

MIT © neverlh