UnoCSS

The instant on-demand atomic CSS engine

Installation

npm i @unocss/nuxt

Setup

Add the following lines to the modules section of nuxt.config.{ts,js}

modules: ['@unocss/nuxt']

Demo

uno.config.ts

import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup
} from 'unocss'

export default defineConfig({
  theme: {
    colors: {
      background: {
        DEFAULT: '#020420',
        grey: '#0F172A',
        code: '#292D3E',
      },
      primary: '#00DC82',
      light: {
        DEFAULT: '#CBD5E1',
        extra: '#CBD5E199',
      },
    },
  },
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons(),
    presetTypography(),
    presetWebFonts(),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
})

UnoCSS.vue

<template>
  <h1 class="p-4 bg-background-grey text-primary border border-primary rounded">
    UnoCSS: Instant On-demand Atomic CSS Engine
  </h1>
</template>

UnoCSS: Instant On-demand Atomic CSS Engine