Nuxt 3, UnoCSS, and Preset rem to px

jboada — Sat, 18 Mar 2023 21:15:18 +0000

Hello everybody! 👋

This post is about generating px units by default in UnoCSS when used in Nuxt 3.

Preamble

Working on a project that uses Nuxt 3 and Vuetify; UnoCSS was the choice to handle the CSS tweaks/adjustments because it offers many advantages in the Utility Classes engines/frameworks universe.

UnoCSS and length units: a little bump in the road for the project?

However, there was one thing: UnoCSS generates rem units for length units by default if a length unit is not indicated. What does this mean? Let's see the following example:

If m-2 is used (a length unit is NOT indicated) either as an attribute or CSS class in an HTML element, UnoCSS would generate the following CSS class:

.m-2 {
  margin: 0.5rem;
}

Now, if m-8px is used (a length unit IS indicated) either as an attribute or CSS class in an HTML element, UnoCSS would generate the following CSS class:

.m-8px {
  margin: 8px;
}

Solution

To achieve the goal of generating px units by default in UnoCSS, the @unocss/preset-rem-to-px package was used because its purpose is to convert the rem units to px units.

Installation guide for the @unocss/preset-rem-to-px package in Nuxt 3

Follow this installation guide to install and configure the @unocss/preset-rem-to-px package in Nuxt 3:

Step 1. Install @unocss/preset-rem-to-px

npm i -D @unocss/preset-rem-to-px

Step 2. Add the following references to the nuxt.config.ts file:

...
import presetUno from "@unocss/preset-uno";
import presetRemToPx from "@unocss/preset-rem-to-px";
import presetAttributify from "@unocss/preset-attributify";
import presetIcons from "@unocss/preset-icons";
...

Step 3. Add the unocss config to the nuxt.config.ts file this way:

export default defineNuxtConfig({
    ...
    unocss: {
        presets: [
            presetUno(),
            presetAttributify(),
            presetIcons(),
            presetRemToPx(),
        ],
        shortcuts: [],
        rules: [],
    },
    ...
});

You can look at the code in this repo nuxt3-vuetify-unocss at GitHub.

Conclusion

By using the @unocss/preset-rem-to-px package we can achieve the goal of generating px units by default in UnoCSS.

I hope you enjoy this post and find it helpful. If you have any questions or you want to point out some errors, I appreciate it, and I'll do my best to follow up.

If you enjoy it and would like to support me, consider giving a like and sharing it on your favorite social networks.