UnoCSS Preset Scale PX

A UnoCSS preset that maps utility numbers directly to pixel values (e.g., p-4 → 0.25rem(4px)).

Features

• 📏 1:1 Scaling – Utility numbers map directly to pixel values (e.g., p-4 → 0.25rem(4px)).
• ⚡ Consistent Sizing – Simplifies spacing and sizing with predictable values.
• 🔧 Easy Integration – Plug-and-play with any UnoCSS project.

[! WARNING] If you are using presetWind4 do not use this preset. See Usage with presetWind4.

Usage

pnpm i -D unocss-preset-scale-px

// uno.config.ts
import { defineConfig } from 'unocss'
import { presetScalePx } from 'unocss-preset-scale-px'

export default defineConfig({
  presets: [
    // ...
    presetScalePx(),
  ],
})

Playground

You can open the Unocss Playground

Usage with presetWind4

If you are using presetWind4 and want to modify the spacing scale, you just need to modify the base spacing scale your theme.

// uno.config.ts
import { defineConfig, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4({
      theme: {
        spacing: {
          // If you want to a 1:1 scaling with pixel, you can use the following values
          DEFAULT: '0.0625rem', // same as 1px. This will transform `p-4` into `padding: 0.0625rem`

          // Another example, but 4:1 scaling with pixel
          // DEFAULT: '1rem', // same as 16px. This will transform `p-4` into `padding: 4rem /* 64px */`

          // By default, presetWind4 uses the following values
          // DEFAULT: '0.25rem', // same as 4px. This will transform `p-4` into `padding: 0.25rem`
        }
      },
    }),
  ],
})

Migration

If you have already a project, I recommend you to use codemod.sh to migrate your utilities.

Credits

• unocss
• preset-starter