Files
agent-skills/skills/unocss/references/preset-rem-to-px.md
Jason Woltje f5792c40be feat: Complete fleet — 94 skills across 10+ domains
Pulled ALL skills from 15 source repositories:
- anthropics/skills: 16 (docs, design, MCP, testing)
- obra/superpowers: 14 (TDD, debugging, agents, planning)
- coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth)
- better-auth/skills: 5 (auth patterns)
- vercel-labs/agent-skills: 5 (React, design, Vercel)
- antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo)
- Plus 13 individual skills from various repos

Mosaic Stack is not limited to coding — the Orchestrator and
subagents serve coding, business, design, marketing, writing,
logistics, analysis, and more.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-16 16:27:42 -06:00

1.6 KiB

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

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