Skip to main content

UnoCSS

UnoCSS is an atomic CSS engine that provides utility CSS classes. Unlike traditional CSS frameworks, it is fully customizable and works by scanning your source code to generate only the CSS you need.

Demo​

show code
import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "activeEditor": "markup",
    "markup": {
      "language": "html",
      "content": "<div class=\"flex items-center justify-center h-screen bg-gray-100\">\n  <h1 class=\"text-4xl font-bold text-blue-500\">Hello, UnoCSS!</h1>\n</div>\n"
    },
    "processors": [
      "unocss"
    ]
  }
};
createPlayground('#container', options);

Usage​

UnoCSS is a CSS processor that can be enabled from the style editor menu, or configured via the processors property of the configuration object.

Once enabled, all UnoCSS utility classes are available immediately in your markup.

Usage with JSX and Framework SFCs​

UnoCSS can detect class names added in JSX and framework SFCs such as React, Vue, and Svelte. Make sure the UnoCSS processor is enabled.

Presets​

UnoCSS is loaded with the following presets enabled by default:

  • presetUno — the default UnoCSS preset (a superset of Tailwind CSS, Windi CSS, and Bootstrap utilities)
  • presetAttributify — enables attributify mode for using utilities as HTML attributes
  • presetIcons — enables icon support via class names like i-carbon-campsite

Additional presets and transformers can be enabled or disabled via custom settings using the presets property:

Custom Settings
{
  "unocss": {
    "presets": {
      "presetUno": true,
      "presetAttributify": true,
      "presetIcons": { "cdn": "https://esm.sh/" },
      "presetTypography": true,
      "presetWebFonts": true
    },
    "transformers": {
      "transformerDirectives": true,
      "transformerVariantGroup": true
    }
  }
}

The following presets and transformers are available:

Presets: presetUno, presetAttributify, presetIcons, presetTagify, presetWebFonts, presetTypography, presetMini, presetWind

Transformers: transformerDirectives, transformerVariantGroup, transformerCompileClass, transformerAttributifyJsx

Icon Preset​

The icon preset is enabled by default. It allows using thousands of icons from Iconify as CSS classes:

<div class="i-carbon-campsite text-4xl"></div>
<span class="i-logos-react inline-block"></span>

Processor Info​

Name​

unocss

Editor​

style

Compiler​

UnoCSS official compiler, running client-side in the browser. The compiler generates styles on-demand, so only the classes used in your markup are included in the output.

Version​

unocss: v66.5.4

Custom Settings​

Custom settings added to the property unocss are passed as configuration to UnoCSS. Please check the documentation for full reference.

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Example:

Custom Settings
{
  "unocss": {
    "shortcuts": {
      "btn": "py-2 px-4 font-semibold rounded-lg shadow-md"
    }
  }
}

Starter Template​

https://livecodes.io/?template=unocss

Sponsors