stack/v1/packages/mosaic/framework/skills/unocss/references/preset-rem-to-px.md

name, description

name	description
preset-rem-to-px	Convert rem units to px for utilities

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"></div>

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