/unocss

Preset Rem to Px

Converts rem units to px in generated utilities.

Installation

import { defineConfig, presetRemToPx, presetWind3 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
    presetRemToPx(),
  ],
})

What It Does

Transforms all rem values to px:

<div class="p-4">

Without preset:

.p-4 { padding: 1rem; }

With preset:

.p-4 { padding: 16px; }

Use Cases

• Projects requiring pixel-perfect designs
• Environments where rem doesn't work well
• Consistency with pixel-based design systems
• Email templates (better compatibility)

Options

presetRemToPx({
  // Base font size for conversion (default: 16)
  baseFontSize: 16,
})

Custom base:

presetRemToPx({
  baseFontSize: 14, // 1rem = 14px
})

With Preset Wind4

Note: presetRemToPx is not needed with preset-wind4. Use the built-in processor instead:

import { createRemToPxProcessor } from '@unocss/preset-wind4/utils'

export default defineConfig({
  presets: [
    presetWind4({
      preflights: {
        theme: {
          process: createRemToPxProcessor(),
        }
      },
    }),
  ],
  // Also apply to utilities
  postprocess: [createRemToPxProcessor()],
})

Important Notes

• Order matters: place after the preset that generates rem values
• Affects all utilities with rem units
• Theme values in rem are also converted