unocss

Configure UnoCSS by writing utility rules, shortcuts, and presets.

1|Updated Jul 30, 2023

Search Tags:#frontend #css #styling #tailwind #unocss #atomic css

Ready to run

npx skills add https://github.com/DanielShuguang/tool-box --skill unocss-danielshuguang

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: unocss
Source: https://github.com/DanielShuguang/tool-box/tree/main/.trae/skills/unocss
Command: npx skills add https://github.com/DanielShuguang/tool-box --skill unocss-danielshuguang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a fast and flexible atomic CSS engine, simplifying the process of styling web applications by offering a superset of Tailwind CSS utilities and extensive customization options.

Core Features & Use Cases

Atomic CSS Generation: Instantly generate CSS utilities based on a highly configurable system.
Tailwind CSS Superset: Leverage existing Tailwind knowledge for familiar syntax and features.
Extensible Presets: Utilize and combine various presets (Wind, Icons, Attributify, etc.) for diverse styling needs.
Use Case: Configure UnoCSS for a new project to quickly apply consistent styling across all components using utility classes, ensuring a maintainable and scalable design system.

Quick Start

Configure UnoCSS by creating an uno.config.ts file with presetWind3() and presetIcons().

Frequently Asked Questions about unocss

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

FAQPage Schema

How do I configure UnoCSS for a new frontend project?▼

UnoCSS is an instant atomic CSS engine that acts as a superset of Tailwind CSS. It simplifies styling web applications by generating utility classes on-demand through a highly configurable system, ensuring a maintainable and scalable design system.

What is the best way to write custom utility rules and shortcuts in atomic CSS?▼

Writing custom utility rules and shortcuts involves defining them within your `uno.config.*` file. This allows you to extend the base atomic CSS engine, combining multiple existing utilities into single custom shortcuts for reusable styling across components.

Does UnoCSS work with Tailwind CSS utility classes?▼

Yes, UnoCSS works with Tailwind CSS utility classes because it functions as a superset. You can leverage your existing Tailwind knowledge and syntax directly, while gaining access to faster generation and more extensible configuration options.

Can I use attributify and icon presets together in my CSS configuration?▼

Yes, you can use attributify and icon presets together by combining `presetAttributify()` and `presetIcons()` in your configuration. This allows you to apply styles via attributes and generate icons as atomic CSS classes simultaneously.

Why is my atomic CSS not generating properly after changing the config file?▼

Atomic CSS generation issues often occur when the `uno.config.*` file is not properly recognized or presets are misconfigured. Check that the config file exists at the project root and verify all imported presets, rules, and shortcuts are correctly defined.