Tailwind px2vw Plugin

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

特性

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

安装

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

配置

$3

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

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

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

其他使用方式：

`js
// 方式 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';
`

使用：
`html


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

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

使用：
`html


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

使用示例

`html



`html



- 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