Unocss

UnoCSS is a community skill for using the UnoCSS atomic CSS engine, covering utility class generation, custom rules, preset configuration, variant groups, and on-demand CSS extraction for performant styling in web applications.

What Is This?

Overview

UnoCSS provides guidance on styling web applications using the UnoCSS instant atomic CSS engine. It covers utility class generation that creates CSS classes on demand from class names found in templates without shipping unused styles, custom rule definitions that extend the utility vocabulary with project-specific patterns using regular expressions and dynamic values, preset configuration that loads Tailwind-compatible, Windi, or custom preset collections for different utility naming conventions, variant groups that apply responsive, hover, and state modifiers to multiple utilities with compact shorthand syntax, and attributify mode that allows writing utilities as HTML attributes instead of class names for cleaner template readability. The skill helps developers write styles efficiently with minimal CSS output.

Who Should Use This

This skill serves frontend developers using atomic CSS methodologies for styling, teams migrating from Tailwind to a more configurable utility engine, and developers building component libraries with minimal CSS footprint.

Why Use It?

Problems It Solves

Traditional CSS files grow unbounded as applications add pages and components. Utility-first frameworks ship large default CSS bundles even when most utilities are unused. Custom utility patterns require framework plugins or manual CSS that breaks the atomic pattern. Long utility class strings in templates reduce readability and are difficult to maintain.

Core Highlights

On-demand engine generates only CSS for utilities actually used. Rule system creates custom utilities with regex patterns. Preset loader activates Tailwind-compatible naming conventions. Variant grouping applies modifiers with compact syntax.

How to Use It?

Basic Usage

// uno.config.ts
import {
  defineConfig,
  presetUno,
  presetAttributify
} from 'unocss';

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify()
  ],
  rules: [
    ['custom-shadow',
      { 'box-shadow':
        '0 2px 8px '
        + 'rgba(0,0,0,0.12)'
      }],
    [/^grid-(\d+)$/,
      ([, d]) => ({
        'display': 'grid',
        'grid-template-columns':
          `repeat(${d}, 1fr)`
      })]
  ],
  shortcuts: {
    'btn': 'px-4 py-2 '
      + 'rounded-lg '
      + 'font-medium '
      + 'transition-colors',
    'btn-primary':
      'btn bg-blue-600 '
      + 'text-white '
      + 'hover:bg-blue-700'
  }
});

Real-World Examples

<!-- Variant groups and
     attributify mode -->
<div
  class="grid-3 gap-4 p-6">
  <div
    bg="white"
    p="4"
    border="~ gray-200
      rounded-lg"
    hover="shadow-lg
      border-blue-300"
    transition="all 200">
    <h3
      text="lg gray-900
        font-bold">
      Card Title
    </h3>
    <p
      text="sm gray-600"
      m="t-2">
      Card content with
      attributify syntax.
    </p>
    <button
      class="btn-primary
        mt-4">
      Action
    </button>
  </div>
</div>

Advanced Tips

Use shortcuts to compose frequently used utility combinations into single class names for template readability. Define theme values in the config to generate consistent color and spacing utilities. Use the safelist option to include utilities that are dynamically generated at runtime and cannot be detected by the static extractor.

When to Use It?

Use Cases

Style a component library with on-demand utilities that ship only used CSS to consumers. Build a marketing site with responsive layouts using variant groups for compact class names. Create project-specific utility rules for design tokens that match the team naming conventions.

Related Topics

Atomic CSS, Tailwind CSS, utility-first styling, CSS extraction, Vite plugins, and frontend performance.

Important Notes

Requirements

Build tool integration with Vite, Webpack, or Nuxt through the UnoCSS plugin for on-demand CSS extraction during compilation. Configuration file defining presets, custom rules, and shortcuts for the project utility vocabulary. Template files using utility class names or attributify attributes that the extractor can scan.

Usage Recommendations

Do: use presets for standard utility conventions and add custom rules only for project-specific patterns. Group related utilities into shortcuts for frequently repeated combinations. Enable attributify mode for components with many utility classes to improve template readability.

Don't: write raw CSS alongside UnoCSS utilities since it creates two competing styling approaches. Create overly complex regex rules that are hard to debug when utilities fail to generate. Use dynamic class name construction that the static extractor cannot detect without adding to the safelist.

Limitations

Static extraction cannot detect utility classes composed dynamically at runtime requiring manual safelist entries. Attributify mode adds custom HTML attributes that may conflict with existing component props or ARIA attributes. Custom regex rules require careful testing since overlapping patterns can produce unexpected CSS output.