https://github.com/unocss/unocss

The instant on-demand atomic CSS engine.
https://github.com/unocss/unocss

atomic-css engine unocss vite-plugin windicss

Last synced: 5 days ago
JSON representation

The instant on-demand atomic CSS engine.

• Host: GitHub
• URL: https://github.com/unocss/unocss
• Owner: unocss
• License: mit
• Created: 2021-09-30T17:06:46.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2025-01-01T14:25:44.000Z (10 days ago)
• Last Synced: 2025-01-02T09:39:27.388Z (9 days ago)
• Topics: atomic-css, engine, unocss, vite-plugin, windicss
• Language: TypeScript
• Homepage: https://unocss.dev
• Size: 15.3 MB
• Stars: 16,891
• Watchers: 63
• Forks: 848
• Open Issues: 99
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Codeowners: CODEOWNERS

Awesome Lists containing this project

• my-awesome-astro - UnoCSS - [Documentation](https://uno.antfu.me) (What Do I Use... / If I want to use a CSS framework?)
• awesome - unocss/unocss - The instant on-demand atomic CSS engine. (TypeScript)
• Awesome - UnoCSS - The instant on-demand atomic CSS engine. [uno.antfu.me](https://uno.antfu.me/) (Development / Programming)
• awesome-luooooob - unocss/unocss - The instant on-demand atomic CSS engine. (TypeScript)
• awesome - UnoCSS - Atomic CSS engine like [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss). (Other)
• awesome-unocss - Repository - Official UnoCSS repository. (Useful Links)
• awesome-unocss - Repository - Official UnoCSS repository. (Useful Links)
• awesome - unocss/unocss - The instant on-demand atomic CSS engine. (TypeScript)
• awesome - unocss/unocss - The instant on-demand atomic CSS engine. (TypeScript)
• awesome-element-plus - unocss - The instant on-demand atomic CSS engine. [🌐](https://unocss.dev/) - [Play](https://unocss.dev/play/) (Recommended With / Blog Posts)
• awesome-element-plus - unocss - The instant on-demand atomic CSS engine. [🌐](https://unocss.dev/) - [Play](https://unocss.dev/play/) (Recommended With / Blog Posts)

README

        









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](http://windicss.org/), [Tailwind CSS](https://tailwindcss.com/), and [Twind](https://github.com/tw-in-js/twind), but:

- [Fully customizable](https://unocss.dev/config/) - 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](https://unocss.dev/config/shortcuts) - aliasing utilities, dynamically.

- [Attributify mode](https://unocss.dev/presets/attributify/) - group utilities in attributes.

- [Pure CSS Icons](https://unocss.dev/presets/icons/) - use any icon as a single class.

- [Variant Groups](https://unocss.dev/transformers/variant-group) - shorthand for group utils with common prefixes.

- [CSS Directives](https://unocss.dev/transformers/directives) - reuse utils in CSS with `@apply` directive.

- [Compilation mode](https://unocss.dev/transformers/compile-class/) - synthesizes multiple classes into one at build time.

- [Inspector](https://unocss.dev/tools/inspector) - inspect and debug interactively.

- [CSS-in-JS Runtime build](https://unocss.dev/integrations/runtime) - use UnoCSS with one line of CDN import.

- [VS Code extension](https://marketplace.visualstudio.com/items?itemName=antfu.unocss)

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

## Documentation

Read the [documentation](https://unocss.dev/) for more details.

## Installation

- [Vite](https://unocss.dev/integrations/vite)

- [Nuxt](https://unocss.dev/integrations/nuxt)

- [Astro](https://unocss.dev/integrations/astro)

- [Webpack](https://unocss.dev/integrations/webpack)

- [CDN Runtime](https://unocss.dev/integrations/runtime)

- [CLI](https://unocss.dev/integrations/cli)

- [VS Code extension](https://unocss.dev/integrations/vscode)

- [ESLint Config](https://unocss.dev/integrations/eslint)

- [PostCSS](https://unocss.dev/integrations/postcss)

## Acknowledgement

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

> in alphabetical order

- [ACSS](https://acss.io/)

- [Bootstrap Utilities](https://getbootstrap.com/docs/5.1/utilities/flex/)

- [Chakra UI Style Props](https://chakra-ui.com/docs/features/style-props)

- [Semantic UI](https://semantic-ui.com/)

- [Tachyons](https://tachyons.io/)

- [Tailwind CSS](https://tailwindcss.com/)

- [Twind](https://github.com/tw-in-js/twind)

- [Windi CSS](http://windicss.org/)

## Sponsors



  

    

  



## License

[MIT](./LICENSE) License © 2021-PRESENT [Anthony Fu](https://github.com/antfu)