1---
2name: preset-rem-to-px
3description: Convert rem units to px for utilities
4---
5 
6# Preset Rem to Px
7 
8Converts `rem` units to `px` in generated utilities.
9 
10## Installation
11 
12```ts
13import { defineConfig, presetRemToPx, presetWind3 } from 'unocss'
14 
15export default defineConfig({
16  presets: [
17    presetWind3(),
18    presetRemToPx(),
19  ],
20})
21```
22 
23## What It Does
24 
25Transforms all rem values to px:
26 
27```html
28<div class="p-4">
29```
30 
31Without preset:
32```css
33.p-4 { padding: 1rem; }
34```
35 
36With preset:
37```css
38.p-4 { padding: 16px; }
39```
40 
41## Use Cases
42 
43- Projects requiring pixel-perfect designs
44- Environments where rem doesn't work well
45- Consistency with pixel-based design systems
46- Email templates (better compatibility)
47 
48## Options
49 
50```ts
51presetRemToPx({
52  // Base font size for conversion (default: 16)
53  baseFontSize: 16,
54})
55```
56 
57Custom base:
58 
59```ts
60presetRemToPx({
61  baseFontSize: 14, // 1rem = 14px
62})
63```
64 
65## With Preset Wind4
66 
67**Note:** `presetRemToPx` is not needed with `preset-wind4`. Use the built-in processor instead:
68 
69```ts
70import { createRemToPxProcessor } from '@unocss/preset-wind4/utils'
71 
72export default defineConfig({
73  presets: [
74    presetWind4({
75      preflights: {
76        theme: {
77          process: createRemToPxProcessor(),
78        }
79      },
80    }),
81  ],
82  // Also apply to utilities
83  postprocess: [createRemToPxProcessor()],
84})
85```
86 
87## Important Notes
88 
89- Order matters: place after the preset that generates rem values
90- Affects all utilities with rem units
91- Theme values in rem are also converted
92 
93<!-- 
94Source references:
95- https://unocss.dev/presets/rem-to-px
96- https://unocss.dev/presets/wind4
97-->
98