unocss

Generate on-demand atomic CSS utilities with presets, variants, and directives.

624|138|Updated Aug 7, 2023

Search Tags:#utility-first #generate #build-tools #frontend-automation #UnoCSS #atomic-css #framework-integration

Ready to run

npx skills add https://github.com/oyjt/uniapp-vue3-template --skill unocss-oyjt

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: unocss
Source: https://github.com/oyjt/uniapp-vue3-template/tree/main/.cursor/skills/unocss
Command: npx skills add https://github.com/oyjt/uniapp-vue3-template --skill unocss-oyjt

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

UnoCSS provides on-demand atomic CSS utilities to reduce CSS bloat and accelerate front-end styling across large apps.

Core Features & Use Cases

Atomic, utility-first CSS with presets, variants, and directives for scalable theming and responsive layouts.
Framework and toolchain integration (Vite, Vue, React, Svelte) to streamline development workflows.
Use case: rapidly scaffold a cohesive UI with consistent spacing, typography, and color tokens across an entire project.

Quick Start

Install UnoCSS, create a uno.config.ts, and import the runtime CSS (for example, import 'virtual:uno.css' or 'uno.css') to start using utility classes like p-4, text-center, and grid-cols-3.

Frequently Asked Questions about unocss

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate on-demand atomic CSS utilities for my web project?▼

UnoCSS generates on-demand atomic CSS by scanning your project files and producing only the utility classes actually used. You install the engine, create a uno.config.ts file, and import the virtual CSS entry point to inject styles directly into your application.

What is atomic utility-first CSS and when do I need it for scalable theming?▼

Atomic utility-first CSS is an approach where you style elements using single-purpose utility classes like p-4 or text-center. You need it for scalable theming and responsive layouts when you want to maintain consistent spacing, typography, and color tokens across an entire project without writing custom CSS.

Does UnoCSS work with Vite, Vue, React, and Svelte build tools?▼

Yes, UnoCSS integrates across frameworks and build tools including Vite, Vue, React, and Svelte. This framework and toolchain integration streamlines development workflows by injecting on-demand atomic CSS utilities directly into your preferred front-end environment.

How do I configure presets, variants, and directives in a uno.config.ts file?▼

You configure presets, variants, and directives in a uno.config.ts file to define your atomic utility rules. This configuration allows you to extend the theme, add custom presets, and apply transformers to generate tailored on-demand CSS utilities for your specific UI requirements.

What's the best way to rapidly scaffold a cohesive UI with consistent design tokens?▼

The best way to scaffold a cohesive UI is by using an on-demand atomic CSS engine. It provides presets, variants, and directives that enforce consistent spacing, typography, and color tokens across your entire project, allowing you to rapidly build scalable and responsive layouts.

Why does utility-first CSS reduce CSS bloat in large web applications?▼

Utility-first CSS reduces bloat because the engine generates styles on-demand, producing only the CSS classes actually referenced in your code. By avoiding large monolithic stylesheet files and using atomic utilities, it significantly decreases the final CSS payload for large applications.