The instant on-demand Atomic CSS engine. UnoCSS is an engine instead of a framework because there are no core utilities - all the functionalities are provided via presets or inline configurations. We are imagining UnoCSS being able to simulate the functionalities of most of the existing atomic CSS frameworks. And possibly have been used as the engine to create some new atomic CSS frameworks!
UnoCSS is a highly customizable, on-demand atomic CSS engine designed for speed and flexibility. It provides functionalities through presets, rather than core utilities, and is intended to be an alternative to other CSS frameworks such as Windi CSS or Tailwind CSS.
Here are the main features and functionalities of UnoCSS:
On-demand Atomic CSS Engine: UnoCSS generates styles as they are needed, which enhances performance.
Instant: It does not use parsing, AST, or scanning, which makes it 5x faster than Windi CSS or Tailwind CSS JIT.
Lightweight: It has zero dependencies and is browser friendly, with a size of about 6kb min+brotli.
Customizable: UnoCSS is fully customizable, with all functionalities being provided via presets.
Rich Integrations: It has first class support for Vite, Webpack, PostCSS, CLI, VS Code, ESLint, and more.
Shortcuts: Allows for the aliasing or grouping of utilities dynamically.
Attributify Mode: Groups utilities within attributes.
Pure CSS Icons: Enables the use of any icon as a single class.
Variant Groups: Offers shorthand for grouping utilities with common prefixes.
CSS Directives: Allows for the reuse of utilities in CSS with the @apply
directive.
Compilation Mode: Synthesizes multiple classes into one at build time.
Inspector: Provides interactive inspection and debugging.
CDN Runtime Build: Allows the use of UnoCSS with one line of CDN import.
Presets: UnoCSS includes several presets such as Uno (default), Icons, Attributify, Typography, Web fonts, WindMini, Legacy Compat, Tagify, and Rem to px.
Extractors: It has extractors for Pug, MDC, Svelte, and arbitrary variants.
Transformers: It includes transformers such as Variant Group, Directives, and Compile Class.
In summary, UnoCSS is a versatile tool designed to provide a fast and flexible approach to styling web projects using atomic CSS, and includes a variety of features and integrations to suit a wide range of needs.