Use UnoCSS with Nuxt 3

Install

UnoCSS

pnpm add -D @unocss/nuxt

Icons preset

pnpm add -D @unocss/preset-icons @iconify-json/mdi @iconify-json/mdi-light

Configure

nuxt.config.js

export default {
  modules: [
    '@unocss/nuxt',
  ],
  unocss: {
    // presets
    attributify: true, // enabled `@unocss/preset-attributify`,
    uno: true, // enabled `@unocss/preset-uno`
    icons: {
      extraProperties: {
        display: "inline-block",
      },
      customizations: {
        iconCustomizer(collection, icon, props) {
          // default size
          props.width = "1.5em";
          props.height = "1.5em";
          // customize this @iconify icon in this collection
          // if (collection === "mdi") {
          //   props.width = "1.5em";
          //   props.height = "1.5em";
          // }
        },
      },
    }, // enabled `@unocss/preset-icons`
    // core options
    shortcuts: [],
    rules: [],
  },
}

VSCode IntelliSense

Install the UnoCSS extension.

If facing issues, try adding below in nuxt.config.js:

// below is added to enable UnoCSS VS Code extension
import { defineNuxtConfig } from "nuxt/config";

and disable -> enable the extension.