unocss

Instant atomic CSS engine with Tailwind CSS compatibility and flexible preset-based architecture.

- Superset of Tailwind CSS with un-opinionated core; all utilities provided via presets including Wind3, Wind4, Mini, Icons, Attributify, Typography, and Web Fonts

- Supports static and dynamic rules, shortcuts, theming, variants, and CSS layers for fine-grained styling control

- Includes transformers for variant grouping, CSS directives (@apply, @screen, theme()), and JSX attributify support

- Integrates with Vite and Nuxt; always check for uno.config.* or unocss.config.* files before writing code to understand available presets and rules

UnoCSS is an instant atomic CSS engine designed to be flexible and extensible. The core is un-opinionated - all CSS utilities are provided via presets. It's a superset of Tailwind CSS, so you can reuse your Tailwind knowledge for basic syntax usage.

Important: Before writing UnoCSS code, agents should check for uno.config.* or unocss.config.* files in the project root to understand what presets, rules, and shortcuts are available. If the project setup is unclear, avoid using attributify mode and other advanced features - stick to basic class usage.

The skill is based on UnoCSS 66.x, generated at 2026-01-28.

Core

Topic
Description
Reference

Configuration
Config file setup and all configuration options
core-config

Rules
Static and dynamic rules for generating CSS utilities
core-rules

Shortcuts
Combine multiple rules into single shorthands
core-shortcuts

Theme
Theming system for colors, breakpoints, and design tokens
core-theme

Variants
Apply variations like hover:, dark:, responsive to rules
core-variants

Extracting
How UnoCSS extracts utilities from source code
core-extracting

Safelist & Blocklist
Force include or exclude specific utilities
core-safelist

Layers & Preflights
CSS layer ordering and raw CSS injection
core-layers