unocss

UnoCSS

The instant on-demand Atomic CSS engine.

I highly recommend reading this blog post -
Reimagine Atomic CSS
for the story behind

Documentation | Interactive Docs | Playground | Tutorial

Features

Inspired by Windi CSS, Tailwind CSS, and Twind, but:

• Fully customizable - no core utilities. All functionalities are provided via presets.

• No parsing, no AST, no scanning, it's INSTANT (5x faster than Windi CSS or Tailwind JIT).

• ~6kb min+brotli - zero deps and browser friendly.

• Shortcuts - aliasing utilities, dynamically.

• Attributify mode - group utilities in attributes.

• Pure CSS Icons - use any icon as a single class.

• Variant Groups - shorthand for group utils with common prefixes.

• CSS Directives - reuse utils in CSS with @apply directive.

• Compilation mode - synthesizes multiple classes into one at build time.

• Inspector - inspect and debug interactively.

• CSS-in-JS Runtime build - use UnoCSS with one line of CDN import.

• VS Code extension

• Code-splitting for CSS - ships minimal CSS for MPA.

Documentation

Read the documentation for more details.

Installation

• Vite

• Nuxt

• Astro

• Webpack

• CDN Runtime

• CLI

• VS Code extension

• ESLint Config

• PostCSS

Acknowledgement

UnoCSS is made possible thanks to the inspirations from the following projects:

in alphabetical order

• ACSS

• Bootstrap Utilities

• Chakra UI Style Props

• Semantic UI

• Tachyons

• Tailwind CSS

• Twind

• Windi CSS

Sponsors

License

MIT License © 2021-PRESENT Anthony Fu