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