A Tailwind CSS plugin that converts px to vw in arbitrary values with multi-viewport support
npm install tailwind-px-to-vw-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
如果只有一套设计稿(如移动端 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`
如果有多套不同尺寸的设计稿(如移动端 375px + 平板 768px),使用多配置:
`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',
})
`
`htmlmargin-top: 4vwwidth: 53.33333vw
支持的场景
`html
margin: 2.66667vw 5.33333vw 4vw 6.66667vw
width: calc(100% - 8vw)
margin-top: -2.66667vw
box-shadow: 0 0.53333vw 2.66667vw rgba(0,0,0,0.1)
`支持的 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]`MIT © neverlh