Unocss

<br> <p align="center"> <img src="https://raw.githubusercontent.com/unocss/unocss/main/playground/public/icon-gray.svg" style="width:100px;" alt="UnoCSS Logo" /> </p> <h1 align="center">UnoCSS</h1> <p align="center"> The instant on-demand Atomic CSS engine. </p> <p align="center"> <a href="https://www.npmjs.com/package/unocss"><img src="https://img.shields.io/npm/v/unocss?color=c95f8b&amp;label=" alt="NPM version"></a></p> <blockquote align="center"> <p>💡 I highly recommend reading this blog post - <br><a href="https://antfu.me/posts/reimagine-atomic-css"><strong>Reimagine Atomic CSS</strong></a><br>for the story behind</p> </blockquote> <br> <p align="center"> <a href="https://unocss.dev/">📚 Documentation</a> | <a href="https://unocss.dev/interactive/">🧑‍💻 Interactive Docs</a> | <a href="https://unocss.dev/play/">🤹‍♂️ Playground</a> | <a href="https://tutorial.unocss.dev/">🎓 Tutorial</a> </p> <br>

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

<p align="center"> <a href="https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg"> <img src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg' alt="Sponsors"/> </a> </p>

License

MIT License © 2021-PRESENT Anthony Fu