unocss

What is unocss?

UnoCSS is an atomic-CSS engine that provides a highly customizable and performant way to style your web applications. It allows you to write utility-first CSS directly in your HTML or JavaScript, and it generates the necessary CSS on-demand.

What are unocss's main functionalities?

Utility-First CSS

UnoCSS allows you to use utility classes directly in your HTML to style elements. In this example, the text is centered and colored red using utility classes.

<div class="text-center text-red-500">Hello, UnoCSS!</div>

On-Demand Generation

UnoCSS generates the necessary CSS only for the classes you use, making it highly efficient. This example demonstrates how to create a styled button using utility classes.

import 'uno.css';

const button = document.createElement('button');
button.className = 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded';
document.body.appendChild(button);

Customizable

UnoCSS is highly customizable. You can define your own theme and utility classes. This example shows how to configure a custom theme with specific colors.

import { defineConfig } from 'unocss';

export default defineConfig({
  theme: {
    colors: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
});

Other packages similar to unocss

tailwindcss

Tailwind CSS is a utility-first CSS framework that provides a set of predefined classes to build custom designs directly in your HTML. It is similar to UnoCSS in its utility-first approach but is more established and has a larger community.

twind

Twind is a small, fast, and fully-featured utility-first CSS-in-JS solution. It provides a similar utility-first approach as UnoCSS but integrates directly with JavaScript, making it a good choice for React and other JS frameworks.

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

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 alphabet order

• ACSS
• Bootstrap Utilities
• Chakra UI Style Props
• Semantic UI
• Tachyons
• Tailwind CSS
• Twind
• Windi CSS

Sponsors

License

MIT License © 2021-PRESENT Anthony Fu