DOCSEARCHbyAlgolia
Submit Docs

UnoCSS

website·Indexed 32 days ago

https://unocss.zhcndoc.com

An instant atomic CSS engine designed to be flexible and extensible. UnoCSS features a core that is unbiased, utilizing presets to allow developers to create custom frameworks quickly. It provides a wide range of official packages, including presets like @unocss/preset-mini, @unocss/preset-wind3, @unocss/preset-wind4, and @unocss/preset-icons, as well as transformers and extractors. It offers deep integration with tools and frameworks such as Vite, Nuxt, Next.js, Astro, Svelte, Webpack, and PostCSS, and provides IDE support via VS Code, JetBrains, and Zed extensions.

Tokens
29.8K
Snippets
206
Records
238
Agent score
55%

What's inside UnoCSS

  1. Overview of UnoCSS Svelte Scoped

    UnoCSS Svelte Scoped generates CSS for utility classes and injects them directly into the Svelte component's <style> block using the :global() wrapper. This prevents global CSS files from growing too large in big applications and allows component libraries to be distributed with styles embedded, removing the need for the consumer to have UnoCSS in their build pipeline.

  3. Explore UnoCSS unique features and capabilities

    UnoCSS introduces several innovative features not found in traditional atomic CSS frameworks, including:

    • Pure CSS Icons: Integration of icons directly via CSS.
    • Attributify Mode: Using attributes instead of long class strings for styling.
    • Variant Groups: Grouping variants to reduce repetition.
    • Shortcuts: Creating custom shorthand for common utility combinations.
    • Tagify: Applying styles based on HTML tags.
    • Web Fonts: Integrated management of web fonts.
    • CDN Runtime: Ability to generate CSS dynamically in the browser.
    • Inspector: A dedicated tool for inspecting styles during development.

  4. UnoCSS Configuration Overview

    UnoCSS is configured via a central configuration object that allows developers to define how atomic CSS utilities are generated, extracted, and organized. Key configuration areas include rules for utility generation, shortcuts for combining utilities, theme variables for design tokens, and extractors for scanning source code.

  5. Use the Arbitrary Variants Extractor in UnoCSS

    The Arbitrary Variants Extractor allows UnoCSS to capture complex arbitrary variants within utility classes. For example, it can identify and process classes like [&>*]:m-1 and [&[open]]:p-2 as valid variants. This extractor is included by default in @unocss/preset-mini, so manual installation is typically unnecessary unless you are using a custom setup without that preset.
    <div class="[&>*]:m-1 [&[open]]:p-2"></div>

  6. UnoCSS Package Ecosystem Overview

    UnoCSS is organized as a monorepo containing various packages. Most core functionality, including the CLI, core library, and several popular presets and transformers, are bundled within the main unocss package. Some packages are enabled by default, while others must be explicitly configured in the project setup.

  7. Understand UnoCSS core architecture and design goals

    UnoCSS is designed as an atomic CSS engine where all features are optional. Unlike traditional CSS frameworks, it focuses on high performance and extensibility, allowing developers to create their own conventions, design systems, and presets. It is an isomorphic engine with first-class integrations (such as a PostCSS plugin and a CDN runtime) rather than just a PostCSS plugin, enabling better HMR, performance, and developer experience tools like the UnoCSS Inspector.

  8. Create and use UnoCSS presets

    Presets allow you to group rules, variants, and shortcuts into a reusable package that can be shared across projects or teams. This is ideal for implementing a company-wide design system.
    // 1. Define the preset in a separate file (e.g., my-preset.ts)
import { Preset } from 'unocss'

export const myPreset: Preset = {
  name: 'my-preset',
  rules: [
    [/^m-([.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
    [/^p-([.\d]+)$/, ([_, num]) => ({ padding: `${num}px` })],
  ],
  variants: [],
  shortcuts: [],
}

// 2. Register the preset in your config (uno.config.ts)
import { defineConfig } from 'unocss'
import { myPreset } from './my-preset'

export default defineConfig({
  presets: [
    myPreset,
  ],
})

  9. Install and configure the Arbitrary Variants Extractor

    To manually add the Arbitrary Variants Extractor to your UnoCSS configuration, install the @unocss/extractor-arbitrary-variants package and add it to the extractors array in your config file.
    npm install -D @unocss/extractor-arbitrary-variants
    import extractorArbitrary from '@unocss/extractor-arbitrary-variants'
import { defineConfig } from 'unocss'

export default defineConfig({
  extractors: [
    extractorArbitrary(),
  ],
})

  10. Install and configure UnoCSS Mini Preset

    The Mini Preset (@unocss/preset-mini) is a basic utility set that contains only the most essential utilities aligned with CSS properties. It excludes complex or subjective utilities like container, animation, and gradient found in Tailwind CSS. It is included in the unocss package but can also be installed separately.
    # Install via npm
npm install -D @unocss/preset-mini
    // uno.config.ts
import { defineConfig } from 'unocss'
import presetMini from '@unocss/preset-mini' // or import { presetMini } from 'unocss'

export default defineConfig({
  presets: [
    presetMini(),
  ],
})

  11. Generate multiple selectors from a single rule

    Since v0.61, UnoCSS supports generating multiple CSS rules from a single rule definition using JavaScript Generator functions. This is useful for defining base styles and pseudo-classes (like :hover) simultaneously.
    import { symbols } from '@unocss/core'

rules: [
  [/^button-(.*)$/, function* ([, color], { symbols }) {
    yield { background: color }
    yield {
      [symbols.selector]: selector => `${selector}:hover`,
      background: `color-mix(in srgb, ${color} 90%, black)`
    }
  }],
]

  12. Control extraction with magic comments

    You can use special comments in your source files to override the default extraction behavior on a per-file or per-block basis:

    • @unocss-include: Forces UnoCSS to scan a file that is otherwise excluded (e.g., a .js file).
    • @unocss-ignore: Skips scanning and transformation for the entire file.
    • @unocss-skip-start and @unocss-skip-end: A pair of comments used to wrap a block of code that should be ignored by the extractor.
    // ./some-utils.js
// @unocss-include
export const classes = {
  active: 'bg-primary text-white',
}
    <!-- @unocss-skip-start -->
<p class="text-red">This will not be extracted</p>
<!-- @unocss-skip-end -->