belos-street 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
- Use presets: Start with preset-uno
- Use shortcuts: Create reusable class combinations
- Use transformers: For directives and variant groups
- Organize config: Keep config modular for large projects