skills.rest
DanielShuguang
DanielShuguangCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

unocss

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

1|Updated Jul 30, 2023
Search Tags:#frontend#css#styling#tailwind#unocss#atomic css
One-click install
npx skills add https://github.com/DanielShuguang/tool-box --skill unocss-danielshuguang
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
wilfriedagowilfriedago
2

unocss

Configure UnoCSS and generate atomic CSS utilities with presets.

Community
Intermediate
corey-alixcorey-alix

Atomic CSS

Create atomic CSS utility classes using token-based custom properties.

Official
Intermediate
kirklinkirklin
1

unocss

Generate on-demand atomic CSS utilities using UnoCSS presets and build tool integrations.

Community
Advanced
baasith6baasith6

converting-css-to-tailwind

Convert CSS selectors, properties, and rules to Tailwind CSS utility classes.

Community
Intermediate