unocss

name	unocss
title	UnoCSS
description	The instant on-demand atomic CSS engine
icon	⚡
tags	["css","atomic-css","unocss","tailwind"]

UnoCSS - The instant on-demand atomic CSS engine

Configuration

• Installation and basic setup → See configuration
• Custom rules and shortcuts → See configuration
• Theme configuration (colors, breakpoints, fonts) → See configuration
• Class writing order → See configuration

Presets

• preset-uno, preset-mini, preset-wind → See presets
• preset-icons for icon system → See presets
• preset-attributify for attribute syntax → See presets
• Custom presets → See presets

Shortcuts & Transformers

• Creating reusable shortcuts → See shortcuts-transformers
• Dynamic shortcuts → See shortcuts-transformers
• transformer-directives for @apply → See shortcuts-transformers
• transformer-variant-group → See shortcuts-transformers

Quick Start

pnpm install -D unocss

// uno.config.ts
import { defineConfig, presetUno, presetIcons, presetAttributify } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
      cdn: 'https://esm.sh/'
    }),
  ],
})

// main.ts
import 'virtual:uno.css'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Key Features

• Instant: No scanning, generate on-demand
• Flexible: Fully customizable
• Powerful: Built-in presets for common patterns
• Lightweight: Only generate what you use
• Compatible: Works with any framework

Common Patterns

Basic Classes

<div class="flex items-center justify-between p-4 bg-white shadow-md rounded-lg">
  <h1 class="text-2xl font-bold text-gray-800">Hello UnoCSS</h1>
</div>

Responsive Design

<div class="flex flex-col md:flex-row gap-4">
  <div class="w-full md:w-1/2">Left</div>
  <div class="w-full md:w-1/2">Right</div>
</div>

Dark Mode

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
  Content
</div>

Best Practices

1. Use presets: Start with preset-uno
2. Use shortcuts: Create reusable class combinations
3. Use transformers: For directives and variant groups
4. Organize config: Keep config modular for large projects

Resources

• Official Documentation
• Playground
• Presets