# unocss/unocss

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/unocss-unocss).**

18,612 stars · 966 forks · TypeScript · mit

## Links

- GitHub: https://github.com/unocss/unocss
- Homepage: https://unocss.dev
- awesome-repositories: https://awesome-repositories.com/repository/unocss-unocss.md

## Topics

`atomic-css` `engine` `unocss` `vite-plugin` `windicss`

## Description

UnoCSS is an atomic CSS engine and utility-first framework that generates styles on-demand based on the specific classes used in your source code. By scanning your project files during the build process, it produces only the CSS necessary for your application, effectively minimizing bundle size and eliminating unused styles.

The engine distinguishes itself through a highly modular, configuration-driven architecture that allows for deep customization of design tokens, rules, and presets. It supports advanced styling patterns such as attribute-based styling, tag-based styling, and dynamic variant generation, enabling developers to define complex design systems that integrate directly into their existing build pipelines.

Beyond core generation, the project provides a comprehensive suite of tools for managing CSS output, including virtual layering for specificity control, responsive breakpoint configuration, and automated source code transformations. It also features robust developer experience enhancements, such as real-time IDE autocompletion, visual documentation previews, and interactive testing environments, to streamline the styling workflow.

The project is designed to integrate into standard frontend build pipelines and includes extensive support for component-based frameworks. It is distributed as a TypeScript-based library with documentation and tooling available for immediate project integration.

## Tags

### Web Development

- [Utility-First CSS Frameworks](https://awesome-repositories.com/f/web-development/utility-first-css-frameworks.md) — Provides atomic CSS generation, design token management, and customizable presets for building consistent user interfaces.
- [CSS Build Tools](https://awesome-repositories.com/f/web-development/web-infrastructure-deployment/asset-management-build-tools/style-optimization-tools/css-build-tools.md) — A build-time engine that scans source code to generate and inject only the CSS utilities actually used. ([source](https://unocss.dev/integrations/cli.md))
- [CSS Generation Tools](https://awesome-repositories.com/f/web-development/css-generation-tools.md) — Scans source files to generate only the necessary CSS rules at build-time, minimizing bundle size.
- [CSS Injection](https://awesome-repositories.com/f/web-development/web-infrastructure-deployment/asset-management-build-tools/style-optimization-tools/css-injection.md) — Generates and injects utility-based styles dynamically during the build process to minimize bundle size. ([source](https://unocss.dev/integrations/vite.md))
- [Content-Scanning](https://awesome-repositories.com/f/web-development/rendering-templating/build-engines/content-scanning.md) — Parses component files to identify and generate atomic CSS utilities from class directives and attributes. ([source](https://unocss.dev/extractors/svelte.md))
- [Performance Optimizations](https://awesome-repositories.com/f/web-development/performance-optimizations.md) — Creates CSS utility classes dynamically based on actual usage patterns to reduce total file weight. ([source](https://unocss.dev/tools/core.md))
- [Attribute-Based Directives](https://awesome-repositories.com/f/web-development/attribute-based-directives.md) — Defines utility classes as HTML attributes instead of long class strings to improve readability and maintainability of markup. ([source](https://unocss.dev/presets.md))
- [CSS Variant Modifiers](https://awesome-repositories.com/f/web-development/web-standards/responsive-css-frameworks/css-variant-modifiers.md) — Produces multiple CSS rules from a single utility definition, allowing for complex styling like hover states or nested selectors. ([source](https://unocss.dev/extractors/arbitrary-variants.md))
- [Component Preprocessing Tools](https://awesome-repositories.com/f/web-development/component-libraries/component-preprocessing-tools.md) — Integrates utility styles during the build process to create self-contained components without external CSS files. ([source](https://unocss.dev/integrations/svelte-scoped.md))
- [JSX Transformers](https://awesome-repositories.com/f/web-development/jsx-transformers.md) — Converts JSX attributes into atomic CSS utility classes by parsing element properties and mapping them to defined style rules. ([source](https://unocss.dev/transformers/attributify-jsx.md))
- [Custom Directives](https://awesome-repositories.com/f/web-development/custom-directives.md) — Processes custom CSS directives like applying utility sets, referencing theme breakpoints, and accessing configuration values directly within style definitions. ([source](https://unocss.dev/transformers/directives.md))
- [Standard HTML Attribute Mapping](https://awesome-repositories.com/f/web-development/standard-html-attribute-mapping.md) — Applies custom prefixes or ignores specific attributes to prevent naming collisions between styling utilities and standard HTML properties. ([source](https://unocss.dev/presets/attributify.md))

### User Interface & Experience

- [Design Tokens](https://awesome-repositories.com/f/user-interface-experience/design-token-management/design-tokens.md) — Merges user-defined theme values like colors and spacing into the default style system to ensure consistent design across the project. ([source](https://unocss.dev/presets/mini.md))
- [CSS Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling.md) — A modular library for managing design systems, responsive layouts, and component-based styling through dynamic CSS generation.
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Extracts theme configurations into CSS variables to optimize bundle size and enable dynamic styling. ([source](https://unocss.dev/presets/wind4.md))
- [CSS Class-Based Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-class-based-styling.md) — Maps specific utility class names or patterns to CSS declarations, enabling the generation of atomic styles based on project configuration. ([source](https://unocss.dev/guide.md))
- [Class Merging](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-class-based-styling/class-merging.md) — Groups multiple atomic utility classes into a single hashed CSS class name during build time to reduce HTML markup size. ([source](https://unocss.dev/transformers/compile-class.md))
- [Color Themes](https://awesome-repositories.com/f/user-interface-experience/color-themes.md) — Applies color schemes to elements by mapping utility classes to a defined theme color palette. ([source](https://unocss.dev/presets/typography.md))
- [Dark Mode Strategies](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/theme-systems/dark-mode-strategies.md) — Generates class-based CSS selectors to toggle styles when a dark mode parent class is present in the document. ([source](https://unocss.dev/presets/wind3.md))
- [Responsive Breakpoints](https://awesome-repositories.com/f/user-interface-experience/responsive-breakpoints.md) — Defines and applies media query breakpoints through utility classes to create adaptive interfaces.
- [Style Configurations](https://awesome-repositories.com/f/user-interface-experience/style-configurations.md) — Provides tools for defining and loading collections of rules, variants, and design system presets. ([source](https://unocss.dev/guide/packages.md))
- [Typography](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/typography-and-iconography/typography.md) — Applies standardized styling and formatting to text content to ensure consistent visual hierarchy. ([source](https://unocss.dev/presets/typography.md))
- [CSS Animation Utilities](https://awesome-repositories.com/f/user-interface-experience/animation-libraries/css-animation-utilities.md) — Provides a library of animation utilities with support for custom keyframes, durations, and timing functions. ([source](https://unocss.dev/presets/wind3.md))
- [Icon Integration Tools](https://awesome-repositories.com/f/user-interface-experience/icon-integration-tools.md) — Embeds and transforms SVG icon sets directly into stylesheets to eliminate external dependencies.
- [Breakpoint Configurations](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/breakpoint-configurations.md) — Generates media queries based on named configuration values to simplify responsive layout creation. ([source](https://unocss.dev/integrations/postcss.md))
- [Dynamic Style Injection](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/dynamic-styling-systems/dynamic-style-injection.md) — Embeds generated utility CSS directly into component style blocks to eliminate external stylesheet dependencies. ([source](https://unocss.dev/integrations/svelte-scoped.md))
- [CSS Specificity Modifiers](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/css-specificity-modifiers.md) — Increases utility specificity by applying important flags or prepending parent selectors to ensure styles override existing CSS rules. ([source](https://unocss.dev/presets/wind3.md))
- [CSS Layer Configurations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/style-interoperability/css-layer-configurations.md) — Assigns custom CSS rules to specific named layers to control their generation order and grouping within the final stylesheet. ([source](https://unocss.dev/config/layers.md))
- [Icon Set Integrations](https://awesome-repositories.com/f/user-interface-experience/icon-set-integrations.md) — Integrates icon libraries directly into the CSS generation pipeline to serve icons as pure CSS. ([source](https://unocss.dev/presets/icons.md))
- [Utility Filtering Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/utility-filtering-systems.md) — Ensures specific CSS utilities are generated or prevented from being generated to maintain strict design constraints. ([source](https://unocss.dev/guide/extracting.md))
- [Editor Visualization Tools](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/editor-visualization-tools.md) — Displays inline decorations and tooltips for CSS utilities directly in the editor to provide immediate visual feedback. ([source](https://unocss.dev/integrations/vscode.md))
- [Utility Composition Engines](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-class-based-styling/class-merging/utility-composition-engines.md) — Merges multiple utility classes into a single rule to reduce code repetition and maintain clean stylesheets. ([source](https://unocss.dev/integrations/postcss.md))
- [Tag-Based Styling Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/tag-based-styling-systems.md) — Embeds utility rules directly into HTML tag names to apply styles without requiring class attributes. ([source](https://unocss.dev/presets/tagify.md))
- [Color Mode Utilities](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/theme-management/color-mode-utilities.md) — Provides utilities to swap text and element colors for dark mode support via container classes. ([source](https://unocss.dev/presets/typography.md))
- [Pointer-Based Hover Restrictions](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-base-styles/pointer-based-hover-restrictions.md) — Applies hover styles conditionally based on device capabilities to prevent persistent hover states on touch screens. ([source](https://unocss.dev/presets/wind3.md))
- [Spacing Scales](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/spacing-scales.md) — Adjusts text and spacing using predefined scale variants that integrate with responsive breakpoints. ([source](https://unocss.dev/presets/typography.md))

### Development Tools & Productivity

- [Shareable Configurations](https://awesome-repositories.com/f/development-tools-productivity/project-scaffolding-config-code-generation/project-scaffolding-configuration/shareable-configurations.md) — Enables the distribution and reuse of configuration settings through shareable packages that merge into project configurations. ([source](https://unocss.dev/config/presets.md))
- [Editor Integrations](https://awesome-repositories.com/f/development-tools-productivity/editor-integrations.md) — Integrates utility suggestions, diagnostics, and hover documentation directly into the code editor. ([source](https://unocss.dev/tools/autocomplete.md))
- [Global Configurations](https://awesome-repositories.com/f/development-tools-productivity/global-configurations.md) — Defines custom rules, presets, and default settings to control how styles are generated and applied within a browser environment. ([source](https://unocss.dev/integrations/runtime.md))
- [Build Pipeline Integrations](https://awesome-repositories.com/f/development-tools-productivity/workflow-automation-tools/build-task-automation/build-pipeline-integrations.md) — Hooks into the build pipeline to generate and inject utility-based styles dynamically during bundling. ([source](https://unocss.dev/integrations/webpack.md))
- [Documentation Previewers](https://awesome-repositories.com/f/development-tools-productivity/documentation-previewers.md) — Displays CSS previews and documentation when hovering over utility classes within the editor. ([source](https://unocss.dev/integrations/lsp.md))
- [Interactive REPLs](https://awesome-repositories.com/f/development-tools-productivity/interactive-repls.md) — Provides an interactive environment to experiment with utility classes and preview their resulting CSS output based on the current project configuration. ([source](https://unocss.dev/tools/inspector.md))
- [Build Tool Integrations](https://awesome-repositories.com/f/development-tools-productivity/workflow-automation-tools/build-task-automation/build-tool-integrations/build-tool-integrations.md) — Integrates styling engines directly into standard frontend build pipelines for automated style injection.

### Software Engineering & Architecture

- [Design System Implementations](https://awesome-repositories.com/f/software-engineering-architecture/design-system-implementations.md) — Defines shared design tokens and configuration presets to maintain consistent visual properties across the application.
- [Rule Configuration Engines](https://awesome-repositories.com/f/software-engineering-architecture/rule-configuration-engines.md) — Maps utility class patterns to CSS declarations using a centralized theme and rule definition system.
- [Framework-Specific Integrations](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/framework-specific-integrations.md) — Provides specialized plugins to ensure seamless compatibility with component-based architectures. ([source](https://unocss.dev/integrations/vite.md))
- [Plugin-Based Architectures](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures.md) — Extends the core engine with modular rule sets and configuration presets to support diverse design systems.

### Artificial Intelligence & ML

- [Configuration Autocompletion](https://awesome-repositories.com/f/artificial-intelligence-ml/ai-assisted-editing-environments/configuration-autocompletion.md) — Defines custom patterns and shorthand aliases for CSS utility suggestions to improve developer experience in IDEs and playgrounds. ([source](https://unocss.dev/config/autocomplete.md))

### DevOps & Infrastructure

- [Code Transformation Engines](https://awesome-repositories.com/f/devops-infrastructure/cicd-pipeline-automation/core-build-engines/build-tooling/code-transformation-engines.md) — Applies automated code transformations to CSS utilities, such as expanding shorthand variants or processing directives, during the build process. ([source](https://unocss.dev/guide/config-file.md))

### Operating Systems & Systems Programming

- [File Change Detection](https://awesome-repositories.com/f/operating-systems-systems-programming/system-administration-maintenance/file-system-management/file-systems/file-change-detection.md) — Monitors source files for modifications and automatically regenerates CSS output during development. ([source](https://unocss.dev/integrations/cli.md))