unocss-preset-unit-to-vw

Installation

npm i -D unocss-preset-unit-to-vw

//vite.config.ts

import presetUno from "@unocss/preset-uno"
import presetUnitToVw from "unocss-preset-unit-to-vw"
export default defineConfig({
  plugins: [
    react(),
    Unocss({
      presets: [
        presetUno(),
        presetUnitToVw(/* preset options */ )
      ],

    }),
  ],
})

preset options

interface UnitToVwOptions {
	baseFontSize?: number // defalut 16
	baseWidth?: number // defalut 375
	baseHeight?: number // defalut 667
	unitPrecision?: number // defalut 4
	units?: string[] // defalut ['rem'] 可选值: 'rem', 'px', 'pw', 'ph'
}

Usage

without

.m-2 {
	margin: 0.5rem;
}
.m-8px {
	margin: 8px;
}

with

.m-2 {
	margin: 2.1333vw;
}

.m-8px {
	margin: 2.1333vw;
}