UnoCSS

https://unocss.dev
Admin
UnoCSS is an instant, on-demand atomic CSS engine designed for speed and flexibility, offering rich...
Tokens:49,724
Snippets:636
Trust Score:9.6
Update:1 month ago
Show doc for...
Tokens:
Raw
### Configure ESLint for UnoCSS

Source: https://unocss.dev/integrations/eslint

Setup examples for both modern Flat config and legacy .eslintrc formats.

```javascript
import unocss from '@unocss/eslint-config/flat'

export default [
  unocss,
  // other configs
]
```

```json
{
  "extends": [
    "@unocss"
  ]
}
```

--------------------------------

### Install @unocss/preset-mini

Source: https://unocss.dev/presets/mini

Installation commands for various package managers.

```bash
pnpm add -D @unocss/preset-mini
```

```bash
yarn add -D @unocss/preset-mini
```

```bash
npm install -D @unocss/preset-mini
```

```bash
bun add -D @unocss/preset-mini
```

--------------------------------

### Install @unocss/preset-web-fonts

Source: https://unocss.dev/presets/web-fonts

Installation commands for various package managers.

```bash
pnpm add -D @unocss/preset-web-fonts
```

```bash
yarn add -D @unocss/preset-web-fonts
```

```bash
npm install -D @unocss/preset-web-fonts
```

```bash
bun add -D @unocss/preset-web-fonts
```

--------------------------------

### Install @unocss/preset-rem-to-px

Source: https://unocss.dev/presets/rem-to-px

Install the preset using your preferred package manager.

```bash
pnpm add -D @unocss/preset-rem-to-px
```

```bash
yarn add -D @unocss/preset-rem-to-px
```

```bash
npm install -D @unocss/preset-rem-to-px
```

```bash
bun add -D @unocss/preset-rem-to-px
```

--------------------------------

### Install @unocss/transformer-compile-class

Source: https://unocss.dev/transformers/compile-class

Installation commands for various package managers.

```bash
pnpm add -D @unocss/transformer-compile-class
```

```bash
yarn add -D @unocss/transformer-compile-class
```

```bash
npm install -D @unocss/transformer-compile-class
```

```bash
bun add -D @unocss/transformer-compile-class
```

--------------------------------

### Install Attributify Preset

Source: https://unocss.dev/presets/attributify

Install the package using your preferred package manager.

```bash
pnpm add -D @unocss/preset-attributify
```

```bash
yarn add -D @unocss/preset-attributify
```

```bash
npm install -D @unocss/preset-attributify
```

```bash
bun add -D @unocss/preset-attributify
```

--------------------------------

### Install All Icon Sets

Source: https://unocss.dev/presets/icons

Command to install the full Iconify collection, which is approximately 130MB.

```bash
pnpm add -D @iconify/json
```

```bash
yarn add -D @iconify/json
```

```bash
npm install -D @iconify/json
```

```bash
bun add -D @iconify/json
```

--------------------------------

### Usage example

Source: https://unocss.dev/presets/rem-to-px

Example of a utility class and its resulting CSS output.

```html
<div class="m-2"></div>
```

```css
.m-2 {
  margin: 0.5rem;
}
```

```css
.m-2 {
  margin: 8px;
}
```

--------------------------------

### Install @unocss/core

Source: https://unocss.dev/tools/core

Install the core package using your preferred package manager.

```bash
pnpm add -D @unocss/core
```

```bash
yarn add -D @unocss/core
```

```bash
npm install -D @unocss/core
```

```bash
bun add -D @unocss/core
```

--------------------------------

### Install @unocss/preset-wind4

Source: https://unocss.dev/presets/wind4

Commands to install the preset using various package managers.

```bash
pnpm add -D @unocss/preset-wind4
```

```bash
yarn add -D @unocss/preset-wind4
```

```bash
npm install -D @unocss/preset-wind4
```

```bash
bun add -D @unocss/preset-wind4
```

--------------------------------

### Install Attributify JSX Transformer

Source: https://unocss.dev/transformers/attributify-jsx

Installation commands for various package managers.

```bash
pnpm add -D @unocss/transformer-attributify-jsx
```

```bash
yarn add -D @unocss/transformer-attributify-jsx
```

```bash
npm install -D @unocss/transformer-attributify-jsx
```

```bash
bun add -D @unocss/transformer-attributify-jsx
```

--------------------------------

### Install Icon Preset Dependencies

Source: https://unocss.dev/presets/icons

Commands to install the preset and specific icon collections via various package managers.

```bash
pnpm add -D @unocss/preset-icons @iconify-json/[the-collection-you-want]
```

```bash
yarn add -D @unocss/preset-icons @iconify-json/[the-collection-you-want]
```

```bash
npm install -D @unocss/preset-icons @iconify-json/[the-collection-you-want]
```

```bash
bun add -D @unocss/preset-icons @iconify-json/[the-collection-you-want]
```

--------------------------------

### Install Legacy Compat Preset

Source: https://unocss.dev/presets/legacy-compat

Add the package to your project using your preferred package manager.

```bash
pnpm add -D @unocss/preset-legacy-compat
```

```bash
yarn add -D @unocss/preset-legacy-compat
```

```bash
npm install -D @unocss/preset-legacy-compat
```

```bash
bun add -D @unocss/preset-legacy-compat
```

--------------------------------

### Install @unocss/svelte-scoped

Source: https://unocss.dev/integrations/svelte-scoped

Install the required dependencies using your preferred package manager.

```bash
pnpm add -D unocss @unocss/svelte-scoped
```

```bash
yarn add -D unocss @unocss/svelte-scoped
```

```bash
npm install -D unocss @unocss/svelte-scoped
```

```bash
bun add -D unocss @unocss/svelte-scoped
```

--------------------------------

### Install MDC Extractor

Source: https://unocss.dev/extractors/mdc

Installation commands for various package managers.

```bash
pnpm add -D @unocss/extractor-mdc
```

```bash
yarn add -D @unocss/extractor-mdc
```

```bash
npm install -D @unocss/extractor-mdc
```

```bash
bun add -D @unocss/extractor-mdc
```

--------------------------------

### Install UnoCSS Language Server

Source: https://unocss.dev/integrations/lsp

Install the language server globally via npm.

```bash
npm install -g unocss-language-server
```

--------------------------------

### Install @unocss/processor-lightningcss

Source: https://unocss.dev/processors/lightningcss

Install the processor package using your preferred package manager.

```bash
pnpm add -D @unocss/processor-lightningcss
```

```bash
yarn add -D @unocss/processor-lightningcss
```

```bash
npm install -D @unocss/processor-lightningcss
```

```bash
bun add -D @unocss/processor-lightningcss
```

--------------------------------

### Install Wind3 Preset

Source: https://unocss.dev/presets/wind3

Commands to install the @unocss/preset-wind3 package using various package managers.

```bash
pnpm add -D @unocss/preset-wind3
```

```bash
yarn add -D @unocss/preset-wind3
```

```bash
npm install -D @unocss/preset-wind3
```

```bash
bun add -D @unocss/preset-wind3
```

--------------------------------

### Install Typography Preset

Source: https://unocss.dev/presets/typography

Commands to add the typography preset dependency to your project.

```bash
pnpm add -D @unocss/preset-typography
```

```bash
yarn add -D @unocss/preset-typography
```

```bash
npm install -D @unocss/preset-typography
```

```bash
bun add -D @unocss/preset-typography
```

--------------------------------

### Install Style Reset

Source: https://unocss.dev/integrations/astro

Install the @unocss/reset package to enable browser style resets.

```bash
pnpm add -D @unocss/reset
```

```bash
yarn add -D @unocss/reset
```

```bash
npm install -D @unocss/reset
```

```bash
bun add -D @unocss/reset
```

--------------------------------

### Setup Layout File

Source: https://unocss.dev/integrations/next

Import the UnoCSS reset and global styles into your Next.js layout.

```tsx
import type { Metadata } from 'next'
import { Geist, Geist_Mono } from 'next/font/google'
import '@unocss/reset/tailwind.css'
import './globals.css'

const geistSans = Geist({
  variable: '--font-geist-sans',
  subsets: ['latin'],
})

const geistMono = Geist_Mono({
  variable: '--font-geist-mono',
  subsets: ['latin'],
})

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  )
}
```

```js
import { Geist, Geist_Mono } from 'next/font/google'
import '@unocss/reset/tailwind.css'
import './globals.css'

const geistSans = Geist({
  variable: '--font-geist-sans',
  subsets: ['latin'],
})

const geistMono = Geist_Mono({
  variable: '--font-geist-mono',
  subsets: ['latin'],
})

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        {children}
      </body>
    </html>
  )
}
```

--------------------------------

### Install @unocss/transformer-directives

Source: https://unocss.dev/transformers/directives

Install the transformer package using your preferred package manager.

```bash
pnpm add -D @unocss/transformer-directives
```

```bash
yarn add -D @unocss/transformer-directives
```

```bash
npm install -D @unocss/transformer-directives
```

```bash
bun add -D @unocss/transformer-directives
```

--------------------------------

### Install Tagify Preset

Source: https://unocss.dev/presets/tagify

Commands to install the @unocss/preset-tagify package using various package managers.

```bash
pnpm add -D @unocss/preset-tagify
```

```bash
yarn add -D @unocss/preset-tagify
```

```bash
npm install -D @unocss/preset-tagify
```

```bash
bun add -D @unocss/preset-tagify
```

--------------------------------

### Install Twoslash Integration

Source: https://unocss.dev/integrations/twoslash

Add the package to your project dependencies.

```bash
npm add @unocss/twoslash
```

--------------------------------

### Install UnoCSS PostCSS Plugin

Source: https://unocss.dev/integrations/postcss

Commands to install the required packages using various package managers.

```bash
pnpm add -D unocss @unocss/postcss
```

```bash
yarn add -D unocss @unocss/postcss
```

```bash
npm install -D unocss @unocss/postcss
```

```bash
bun add -D unocss @unocss/postcss
```

--------------------------------

### Configure Astro with ESM

Source: https://unocss.dev/integrations/astro

Example configuration using astro.config.mjs.

```javascript
import UnoCSS from '@unocss/astro'

export default {
  integrations: [
    UnoCSS(),
  ],
}
```

--------------------------------

### Install and Initialize UnoCSS Runtime in Bundlers

Source: https://unocss.dev/integrations/runtime

Install the package and initialize the runtime in your application code.

```bash
npm i @unocss/runtime
```

```typescript
import initUnocssRuntime from '@unocss/runtime'

initUnocssRuntime({ /* options */ })
```

--------------------------------

### Install Astro Integration without Presets

Source: https://unocss.dev/integrations/astro

Install the @unocss/astro package when not using default presets.

```bash
pnpm add -D @unocss/astro
```

```bash
yarn add -D @unocss/astro
```

```bash
npm install -D @unocss/astro
```

```bash
bun add -D @unocss/astro
```

--------------------------------

### Start UnoCSS Language Server

Source: https://unocss.dev/integrations/lsp

Launch the language server using the stdio transport mechanism.

```bash
unocss-language-server --stdio
```

--------------------------------

### Typography Size Scheme Example

Source: https://unocss.dev/presets/typography

Example configuration for customizing font sizes across different typographic elements for various size tiers.

```json
{
  "sm": {
    "h1": { "font-size": "1.5rem" },
    "p": { "font-size": "0.875rem" }
  },
  "base": {
    "h1": { "font-size": "2rem" },
    "p": { "font-size": "1rem" }
  },
  "lg": {
    "h1": { "font-size": "2.5rem" },
    "p": { "font-size": "1.125rem" }
  }
}
```

--------------------------------

### Install @unocss/webpack

Source: https://unocss.dev/integrations/webpack

Commands to install the UnoCSS Webpack plugin using various package managers.

```bash
pnpm add -D @unocss/webpack
```

```bash
yarn add -D @unocss/webpack
```

```bash
npm install -D @unocss/webpack
```

```bash
bun add -D @unocss/webpack
```

--------------------------------

### Install @unocss/eslint-config

Source: https://unocss.dev/integrations/eslint

Commands to install the UnoCSS ESLint configuration package using various package managers.

```bash
pnpm add -D @unocss/eslint-config
```

```bash
yarn add -D @unocss/eslint-config
```

```bash
npm install -D @unocss/eslint-config
```

```bash
bun add -D @unocss/eslint-config
```

--------------------------------

### Usage of Icons in HTML

Source: https://unocss.dev/presets/icons

Examples of applying various icons using the prefix-collection-icon naming convention.

```html
<!-- A basic anchor icon from Phosphor icons -->
<div class="i-ph-anchor-simple-thin" />
<!-- An orange alarm from Material Design Icons -->
<div class="i-mdi-alarm text-orange-400" />
<!-- A large Vue logo -->
<div class="i-logos-vue text-3xl" />
<!-- Sun in light mode, Moon in dark mode, from Carbon -->
<button class="i-carbon-sun dark:i-carbon-moon" />
<!-- Twemoji of laugh, turns to tear on hovering -->
<div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />
```

--------------------------------

### MDC Syntax Example

Source: https://unocss.dev/extractors/mdc

Example of MDC syntax where classes are defined in curly braces.

```md
# Title{.text-2xl.font-bold}

Hello [World]{.text-blue-500}

![image](/image.png){.w-32.h-32}
```

--------------------------------

### Install Arbitrary Variants Extractor

Source: https://unocss.dev/extractors/arbitrary-variants

Commands to install the package using various package managers.

```bash
pnpm add -D @unocss/extractor-arbitrary-variants
```

```bash
yarn add -D @unocss/extractor-arbitrary-variants
```

```bash
npm install -D @unocss/extractor-arbitrary-variants
```

```bash
bun add -D @unocss/extractor-arbitrary-variants
```

--------------------------------

### Usage and Compilation Output

Source: https://unocss.dev/transformers/compile-class

Example of marking classes for compilation and the resulting HTML/CSS output.

```html
<div class=":uno: text-center sm:text-left">
  <div class=":uno: text-sm font-bold hover:text-red" />
</div>
```

```html
<div class="uno-qlmcrp">
  <div class="uno-0qw2gr" />
</div>
```

```css
.uno-qlmcrp {
  text-align: center;
}
.uno-0qw2gr {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}
.uno-0qw2gr:hover {
  --un-text-opacity: 1;
  color: rgb(248 113 113 / var(--un-text-opacity));
}
@media (min-width: 640px) {
  .uno-qlmcrp {
    text-align: left;
  }
}
```

--------------------------------

### HTML Usage Example

Source: https://unocss.dev/extractors/arbitrary-variants

Demonstrates applying arbitrary variants directly within HTML class attributes.

```html
<div class="[&>*]:m-1 [&[open]]:p-2"></div>
```

--------------------------------

### Install UnoCSS for Astro

Source: https://unocss.dev/integrations/astro

Install the required UnoCSS packages using your preferred package manager.

```bash
pnpm add -D unocss @unocss/astro
```

```bash
yarn add -D unocss @unocss/astro
```

```bash
npm install -D unocss @unocss/astro
```

```bash
bun add -D unocss @unocss/astro
```

--------------------------------

### Standard Utility Usage

Source: https://unocss.dev/presets/attributify

Example of standard utility class usage on a button element.

```html
<button
  class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600"
>
  Button
</button>
```

--------------------------------

### Install Svelte extractor

Source: https://unocss.dev/extractors/svelte

Commands to install the @unocss/extractor-svelte package using various package managers.

```bash
pnpm add -D @unocss/extractor-svelte
```

```bash
yarn add -D @unocss/extractor-svelte
```

```bash
npm install -D @unocss/extractor-svelte
```

```bash
bun add -D @unocss/extractor-svelte
```

--------------------------------

### Install variant group transformer

Source: https://unocss.dev/transformers/variant-group

Install the transformer package using your preferred package manager.

```bash
pnpm add -D @unocss/transformer-variant-group
```

```bash
yarn add -D @unocss/transformer-variant-group
```

```bash
npm install -D @unocss/transformer-variant-group
```

```bash
bun add -D @unocss/transformer-variant-group
```

--------------------------------

### Configure presetWebFonts

Source: https://unocss.dev/presets/web-fonts

Example configuration for the web fonts preset including various font definitions.

```ts
presetWebFonts({
  provider: 'google', // default provider
  fonts: {
    // these will extend the default theme
    sans: 'Roboto',
    mono: ['Fira Code', 'Fira Mono:400,700'],
    // custom ones
    lobster: 'Lobster',
    lato: [
      {
        name: 'Lato',
        weights: ['400', '700'],
        italic: true,
      },
      {
        name: 'sans-serif',
        provider: 'none',
      },
    ],
  },
})
```

--------------------------------

### Install UnoCSS dependencies

Source: https://unocss.dev/integrations/next

Install the required UnoCSS packages using your preferred package manager.

```bash
pnpm add -D unocss @unocss/postcss @unocss/reset
```

```bash
yarn add -D unocss @unocss/postcss @unocss/reset
```

```bash
npm install -D unocss @unocss/postcss @unocss/reset
```

```bash
bun add -D unocss @unocss/postcss @unocss/reset
```

--------------------------------

### Example CSS Layer Output

Source: https://unocss.dev/config

Demonstrates the syntax for CSS Cascade Layers when outputToCssLayers is enabled.

```css
@layer theme, preflights, [unused-layer], default;
```

--------------------------------

### Usage of dynamic utilities in HTML

Source: https://unocss.dev/config/rules

Example HTML elements utilizing the dynamic rules defined.

```html
<div class="m-100">
  <button class="m-3">
    <icon class="p-5" />
    My Button
  </button>
</div>
```

--------------------------------

### Install @unocss/cli standalone package

Source: https://unocss.dev/integrations/cli

Install the standalone CLI package if the binary is not found via the main unocss package.

```bash
pnpm add -D @unocss/cli
```

```bash
yarn add -D @unocss/cli
```

```bash
npm install -D @unocss/cli
```

```bash
bun add -D @unocss/cli
```

--------------------------------

### Install @unocss/extractor-pug

Source: https://unocss.dev/extractors/pug

Commands to install the Pug extractor package using various package managers.

```bash
pnpm add -D @unocss/extractor-pug
```

```bash
yarn add -D @unocss/extractor-pug
```

```bash
npm install -D @unocss/extractor-pug
```

```bash
bun add -D @unocss/extractor-pug
```

--------------------------------

### Use @screen Breakpoints

Source: https://unocss.dev/integrations/postcss

Examples of using @screen for media queries, including standard, lt, and at variants.

```css
.grid {
  @apply grid grid-cols-2;
}
@screen xs {
  .grid {
    @apply grid-cols-1;
  }
}
@screen sm {
  .grid {
    @apply grid-cols-3;
  }
}
/* ... */
```

```css
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 320px) {
  .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ... */
```

```css
.grid {
  @apply grid grid-cols-2;
}
@screen lt-xs {
  .grid {
    @apply grid-cols-1;
  }
}
@screen lt-sm {
  .grid {
    @apply grid-cols-3;
  }
}
/* ... */
```

```css
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 319.9px) {
  .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media (max-width: 639.9px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ... */
```

```css
.grid {
  @apply grid grid-cols-2;
}
@screen at-xs {
  .grid {
    @apply grid-cols-1;
  }
}
@screen at-xl {
  .grid {
    @apply grid-cols-3;
  }
}
@screen at-xxl {
  .grid {
    @apply grid-cols-4;
  }
}
/* ... */
```

```css
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 320px) and (max-width: 639.9px) {
  .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) and (max-width: 1535.9px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1536px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* ... */
```

--------------------------------

### Generated CSS Output

Source: https://unocss.dev/config/shortcuts

Example of the CSS generated by dynamic shortcuts when applied to elements.

```css
.btn-green {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  --un-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--un-bg-opacity));
  border-radius: 0.5rem;
  --un-text-opacity: 1;
  color: rgb(220 252 231 / var(--un-text-opacity));
}
.btn-red {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  --un-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--un-bg-opacity));
  border-radius: 0.5rem;
  --un-text-opacity: 1;
  color: rgb(254 226 226 / var(--un-text-opacity));
}
```

--------------------------------

### Use CSS @layer variant

Source: https://unocss.dev/presets/mini

Example of HTML usage and generated CSS for @layer support.

```html
<div class="layer-foo:p4" />
<div class="layer-bar:m4" />
```

```css
@layer foo {
  .layer-foo\:p4 {
    padding: 1rem;
  }
}
@layer bar {
  .layer-bar\:m4 {
    margin: 1rem;
  }
}
```

--------------------------------

### Configure UnoCSS Typography

Source: https://unocss.dev/presets/typography

Configuration setup in uno.config.ts requiring presetWind3 and presetAttributify.

```ts
import {
  defineConfig,
  presetAttributify,
  presetTypography,
  presetWind3 // or presetWind4
} from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(), // required!
    presetAttributify(), // required when using attributify mode
    presetTypography(),
  ],
})
```

--------------------------------

### Generated CSS Output

Source: https://unocss.dev/config/rules

Example of the CSS generated by the multi-selector rule configuration.

```css
.button-red {
  background: red;
}
.button-red:hover {
  background: color-mix(in srgb, red 90%, black);
}
```

--------------------------------

### Run production build

Source: https://unocss.dev/integrations/cli

Execute the CLI to generate the uno.css file in the current directory.

```bash
unocss "site/{snippets,templates}/**/*.php"
```

--------------------------------

### Enable Optional ESLint Rules

Source: https://unocss.dev/integrations/eslint

Configuration examples for enabling and customizing optional UnoCSS rules in both Flat and legacy formats.

```javascript
import unocss from '@unocss/eslint-config/flat'

export default [
  unocss,
  {
    rules: {
      'unocss/<rule-name>': 'warn', // or "error",
      'unocss/<another-rule-name>': ['warn' /* or "error" */, { /* options */ }],
    },
  },
]
```

```json
{
  "extends": [
    "@unocss"
  ],
  "rules": {
    "@unocss/<rule-name>": "warn", // or "error",
    "@unocss/<another-rule-name>": ["warn" /* or "error" */, { /* options */ }]
  }
}
```

--------------------------------

### Initialize Core Runtime with Manual Presets

Source: https://unocss.dev/integrations/runtime

Load specific presets before initializing the core runtime for custom configurations.

```html
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/preset-icons.global.js"></script>
<script>
  window.__unocss = {
    presets: [
      () =>
        window.__unocss_runtime.presets.presetIcons({
          scale: 1.2,
          cdn: 'https://esm.sh/',
        }),
    ],
  }
</script>
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/core.global.js"></script>
```

--------------------------------

### Install UnoCSS Nuxt module

Source: https://unocss.dev/integrations/nuxt

Add the UnoCSS dependencies to your project using your preferred package manager.

```bash
pnpm add -D unocss @unocss/nuxt
```

```bash
yarn add -D unocss @unocss/nuxt
```

```bash
npm install -D unocss @unocss/nuxt
```

```bash
bun add -D unocss @unocss/nuxt
```

--------------------------------

### Configure Custom Fetch Function

Source: https://unocss.dev/presets/web-fonts

Example of using a custom fetch function, such as axios with a proxy, to retrieve font sources.

```ts
import presetWebFonts from '@unocss/preset-web-fonts'
import presetWind3 from '@unocss/preset-wind3'
import axios from 'axios'
import ProxyAgent from 'proxy-agent'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
    presetWebFonts({
      // use axios with an https proxy
      customFetch: (url: string) => axios.get(url, { httpsAgent: new ProxyAgent('https://localhost:7890') }).then(it => it.data),
      provider: 'google',
      fonts: {
        sans: 'Roboto',
        mono: ['Fira Code', 'Fira Mono:400,700'],
      },
    }),
  ],
})
```

--------------------------------

### Configure Extra CSS Properties

Source: https://unocss.dev/presets/icons

Example of setting default CSS properties for icons, such as display and vertical alignment.

```ts
presetIcons({
  extraProperties: {
    'display': 'inline-block',
    'vertical-align': 'middle',
    // ...
  },
})
```

--------------------------------

### Apply Typography Classes and Attributes

Source: https://unocss.dev/presets/typography

Examples of applying prose styles using standard classes or attributify mode.

```html
<article class="text-base prose dark:prose-invert xl:text-xl">
  {{ markdown }}
  <p class="not-prose">Some text</p>
</article>
```

```html
<article text-base prose="~ dark:invert" xl="text-xl">
  {{ markdown }}
  <p class="not-prose">Some text</p>
</article>
```

--------------------------------

### Svelte component transformation example

Source: https://unocss.dev/integrations/svelte-scoped

Shows the transformation of a utility class into a scoped class with corresponding CSS in the style block.

```svelte
<div class="mb-1" />
```

```svelte
<div class="uno-ei382o" />

<style>
  :global(.uno-ei382o) {
    margin-bottom: 0.25rem;
  }
</style>
```

--------------------------------

### CSS Rule Merging Example

Source: https://unocss.dev/config/rules

Demonstrates how UnoCSS combines identical CSS rules into a single block to reduce file size.

```css
.hover\:m2:hover,
.m-2 {
  margin: 0.5rem;
}
```

```css
.hover\:m2:hover {
  margin: 0.5rem;
}
.m-2 {
  margin: 0.5rem;
}
```

--------------------------------

### Initialize and Generate CSS

Source: https://unocss.dev/tools/core

Create a generator instance and use it to generate CSS from source code.

```ts
import { createGenerator } from '@unocss/core'

const generator = await createGenerator(
  { /* user options */ },
  { /* default options */ }
)

const { css } = await generator.generate(code)
```

--------------------------------

### Import Tailwind Resets

Source: https://unocss.dev/guide/style-reset

Import various Tailwind-based reset stylesheets.

```ts
import '@unocss/reset/tailwind.css'
```

```ts
import '@unocss/reset/tailwind-v4.css'
```

```ts
import '@unocss/reset/tailwind-compat.css'
```

--------------------------------

### Configure Filesystem Extraction in uno.config.ts

Source: https://unocss.dev/guide/extracting

Specify file paths to be read directly from the filesystem for utility extraction, useful when build pipeline access is unavailable.

```ts
export default defineConfig({
  content: {
    filesystem: [
      'src/**/*.php',
      'public/*.html',
    ],
  },
})
```

--------------------------------

### JSX Transformation Example

Source: https://unocss.dev/transformers/attributify-jsx

Shows the transformation of valueless attributes in a JSX component.

```jsx
export function Component() {
  return (
    <div text-red text-center text-5xl animate-bounce>
      unocss
    </div>
  )
}
```

```jsx
export function Component() {
  return (
    <div text-red="" text-center="" text-5xl="" animate-bounce="">
      unocss
    </div>
  )
}
```

```jsx
export function Component() {
  return (
    <div text-red={true} text-center={true} text-5xl={true} animate-bounce={true}>
      unocss
    </div>
  )
}
```

--------------------------------

### Generated CSS from symbols.body

Source: https://unocss.dev/config/rules

Example of the CSS generated when using symbols.body with a variant.

```css
:is(.hover\:custom-red):hover {
  font-size: 1rem;
  &::after {
    content: 'after';
  }
  & > .bar {
    color: red;
  }
}
```

--------------------------------

### Import from unocss package

Source: https://unocss.dev/presets/attributify

Import the preset directly from the main unocss package if installed.

```ts
import { presetAttributify } from 'unocss'
```

--------------------------------

### Import Normalize.css

Source: https://unocss.dev/guide/style-reset

Import the Normalize.css reset stylesheet.

```ts
import '@unocss/reset/normalize.css'
```

--------------------------------

### Configure Collections with Dynamic Imports

Source: https://unocss.dev/presets/icons

Load icon collections as async chunks using dynamic imports to optimize bundle size.

```ts
import presetIcons from '@unocss/preset-icons/browser'

export default defineConfig({
  presets: [
    presetIcons({
      collections: {
        carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default),
        mdi: () => import('@iconify-json/mdi/icons.json').then(i => i.default),
        logos: () => import('@iconify-json/logos/icons.json').then(i => i.default),
      }
    })
  ]
})
```

--------------------------------

### Transform variant group syntax

Source: https://unocss.dev/transformers/variant-group

Example of shorthand variant grouping and its expanded output.

```html
<div class="hover:(bg-gray-400 font-medium) font-(light mono)" />
```

```html
<div class="hover:bg-gray-400 hover:font-medium font-light font-mono" />
```

--------------------------------

### Specify default preset

Source: https://unocss.dev/integrations/cli

Select a specific version of the default preset when no configuration file is present.

```bash
unocss "src/**/*.vue" --preset wind3|wind4
```

--------------------------------

### Attributify Syntax Caveats

Source: https://unocss.dev/transformers/attributify-jsx

Examples of invalid attribute syntax and their valued attribute alternatives.

```html
<div translate-x-100% />
<!-- cannot end with `%` -->

<div translate-x-[100px] />
<!-- cannot contain `[` or `]` -->
```

```html
<div translate="x-100%" />

<div translate="x-[100px]" />
```

--------------------------------

### Provide Configuration to Runtime

Source: https://unocss.dev/integrations/runtime

Pass a configuration object to the runtime initialization.

```typescript
import initUnocssRuntime from '@unocss/runtime'
import config from './uno.config'

initUnocssRuntime({ defaults: config })
```

--------------------------------

### Inject UnoCSS Layers

Source: https://unocss.dev/integrations/postcss

Examples of using the @unocss directive to inject CSS layers.

```css
@unocss;
```

```css
@unocss preflights;
@unocss default;

/*
  Fallback layer. It's always recommended to include.
  Only unused layers will be injected here.
*/
@unocss;
```

```css
@unocss all;
```

```css
@unocss !preflights, !<other-layer>;
```

--------------------------------

### Enable watch mode

Source: https://unocss.dev/integrations/cli

Use the --watch flag to monitor file changes during development.

```bash
unocss "site/{snippets,templates}/**/*.php" --watch
```

--------------------------------

### Use theme() Function

Source: https://unocss.dev/integrations/postcss

Access theme configuration values using the theme() function.

```css
.btn-blue {
  background-color: theme('colors.blue.500');
}
```

```css
.btn-blue {
  background-color: #3b82f6;
}
```

--------------------------------

### presetTagify(options)

Source: https://unocss.dev/presets/tagify

Configuration function to initialize the Tagify preset within the UnoCSS configuration file.

```APIDOC
## presetTagify(options)

### Description
Initializes the Tagify preset to enable tag-based rule application in HTML. This function is used within the `presets` array of the UnoCSS configuration.

### Options
- **prefix** (string) - Optional - The prefix to use for the tagify variant.
- **excludedTags** ((string | RegExp)[]) - Optional - Tags excluded from processing. Default: ['b', /^h\d+$/, 'table'].
- **extraProperties** (Record<string, string> | ((matched: string) => Partial<Record<string, string>>)) - Optional - Extra CSS properties to apply to matched rules.
- **defaultExtractor** (boolean) - Optional - Enable default extractor. Default: true
```

--------------------------------

### Attributify Mode Usage

Source: https://unocss.dev/presets/attributify

Example of using attributify mode to group utility classes into attributes.

```html
<button
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>
```

--------------------------------

### Basic icon() usage

Source: https://unocss.dev/transformers/directives

Converts an icon utility into a background-image SVG data URL.

```css
.icon {
  background-image: icon('i-carbon-sun');
}
```

```css
.icon {
  background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6M5.394 6.813L6.81 5.399l3.505 3.506L8.9 10.319zM2 15.005h5v2H2zm3.394 10.193L8.9 21.692l1.414 1.414l-3.505 3.506zM15 25.005h2v5h-2zm6.687-1.9l1.414-1.414l3.506 3.506l-1.414 1.414zm3.313-8.1h5v2h-5zm-3.313-6.101l3.506-3.506l1.414 1.414l-3.506 3.506zM15 2.005h2v5h-2z'/%3E%3C/svg%3E");
}
```

--------------------------------

### Import sanitize.css

Source: https://unocss.dev/guide/style-reset

Import the sanitize.css reset and assets stylesheets.

```ts
import '@unocss/reset/sanitize/sanitize.css'
import '@unocss/reset/sanitize/assets.css'
```

--------------------------------

### Import Eric Meyer Reset

Source: https://unocss.dev/guide/style-reset

Import the Eric Meyer reset stylesheet.

```ts
import '@unocss/reset/eric-meyer.css'
```

--------------------------------

### Configure UnoCSS for Solid

Source: https://unocss.dev/integrations/vite

Add the vite-plugin-solid plugin after the UnoCSS plugin in the Vite configuration.

```ts
import UnoCSS from 'unocss/vite'
import solidPlugin from 'vite-plugin-solid'

export default {
  plugins: [
    UnoCSS({
      /* options */
    }),
    solidPlugin(),
  ],
}
```

--------------------------------

### Configure blocklist with string matchers

Source: https://unocss.dev/guide/extracting

Use strings for exact matching of utility classes to be blocked.

```ts
blocklist: [
  'p-1', // blocks p-1 exactly
  'tab', // blocks tab exactly
]
```

--------------------------------

### Enable Nuxt layers support

Source: https://unocss.dev/integrations/nuxt

Configure the module to automatically merge uno.config files from Nuxt layers.

```ts
export default defineNuxtConfig({
  // ...
  unocss: {
    nuxtLayers: true,
  },
})
```

--------------------------------

### Important Selector CSS Output

Source: https://unocss.dev/presets/wind3

Example of the CSS output when the important option is set to an ID selector.

```css
#app :is(.dark .dark\:bg-blue) {
  --un-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--un-bg-opacity));
}
```

--------------------------------

### View lint output for blocked utilities

Source: https://unocss.dev/guide/extracting

Example of how a blocked utility message appears in the ESLint output.

```shell
"border" is in blocklist: use shorter "b"
```

--------------------------------

### Combine multiple external and local icon loaders

Source: https://unocss.dev/presets/icons

Shows how to merge multiple external package loaders with a local file system loader.

```ts
import { createExternalPackageIconLoader } from '@iconify/utils/lib/loader/external-pkg'
import { defineConfig, presetIcons } from 'unocss'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'

export default defineConfig({
  presets: [
    presetIcons({
      collections: {
        ...createExternalPackageIconLoader('other-awesome-collection'),
        ...createExternalPackageIconLoader('@my-awesome-collections/some-collection'),
        ...createExternalPackageIconLoader('@my-awesome-collections/some-other-collection'),
        'my-yet-other-icons': FileSystemIconLoader(
          './assets/icons',
          svg => svg.replace(/^<svg /, '<svg fill="currentColor" ')
        )
      }
    })
  ]
})
```

--------------------------------

### Svelte class directive extraction

Source: https://unocss.dev/extractors/svelte

Example of a Svelte component using the class directive that will be processed by the extractor.

```svelte
<div class:text-orange-400={foo} />
```

--------------------------------

### Configure blocklist with function matchers

Source: https://unocss.dev/guide/extracting

Use custom functions to define complex logic for blocking utilities.

```ts
blocklist: [
  s => s.endsWith('px'), // block all px-suffixed classes
  s => s.split('-').length > 4, // block deeply nested utilities
]
```

--------------------------------

### Configure UnoCSS with Preact

Source: https://unocss.dev/integrations/vite

Configuration patterns for Preact projects using either @preact/preset-vite or @prefresh/vite.

```ts
import Preact from '@preact/preset-vite'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS(),
    Preact(),
  ],
}
```

```ts
import Prefresh from '@prefresh/vite'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS(),
    Prefresh(),
  ],
}
```

--------------------------------

### Configure Web Fonts Preset

Source: https://unocss.dev/presets/web-fonts

Basic setup for the web fonts preset in the UnoCSS configuration file.

```ts
import presetWebFonts from '@unocss/preset-web-fonts'
import presetWind3 from '@unocss/preset-wind3'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
    presetWebFonts({ /* options */ }),
  ],
})
```

--------------------------------

### Configure package.json scripts

Source: https://unocss.dev/integrations/cli

Define dev and build scripts in package.json, ensuring glob patterns are properly escaped.

```json
{
  "scripts": {
    "dev": "unocss \"site/{snippets,templates}/**/*.php\" --watch",
    "build": "unocss \"site/{snippets,templates}/**/*.php\""
  },
  "devDependencies": {
    "@unocss/cli": "latest"
  }
}
```

--------------------------------

### Define theme variables in :root

Source: https://unocss.dev/presets/wind4

Example of theme-related CSS variables placed in the theme layer for easy overriding.

```css
:root,
:host {
  --spacing: 0.25rem;
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --colors-black: #000;
  --colors-white: #fff;
  /* ... */
}
```

--------------------------------

### Configure PostCSS and UnoCSS

Source: https://unocss.dev/integrations/postcss

Configuration files for PostCSS and UnoCSS integration.

```typescript
import UnoCSS from '@unocss/postcss'

export default {
  plugins: [
    UnoCSS(),
  ],
}
```

```typescript
import { defineConfig, presetWind3 } from 'unocss'

export default defineConfig({
  content: {
    filesystem: [
      '**/*.{html,js,ts,jsx,tsx,vue,svelte,astro,marko}',
    ],
  },
  presets: [
    presetWind3(),
  ],
})
```

--------------------------------

### Dark mode class generation

Source: https://unocss.dev/presets/mini

Example of HTML input and the resulting CSS output for class-based dark mode.

```html
<div class="dark:bg-red:10" />
```

```css
.dark .dark\:bg-red\:10 {
  background-color: rgb(248 113 113 / 0.1);
}
```

--------------------------------

### Injecting raw CSS with preflights

Source: https://unocss.dev/config/preflights

Use the preflights array in the configuration to define global CSS rules that can access theme properties.

```ts
preflights: [
  {
    getCSS: ({ theme }) => `
      * {
        color: ${theme.colors.gray?.[700] ?? '#333'};
        padding: 0;
        margin: 0;
      }
    `,
  },
]
```

--------------------------------

### Configure UnoCSS CLI

Source: https://unocss.dev/integrations/cli

Define CLI entry points and options within the uno.config.ts file.

```ts
import { defineConfig } from 'unocss'

export default defineConfig({
  cli: {
    entry: {}, // CliEntryItem | CliEntryItem[]
  },
  // ...
})

interface CliEntryItem {
  /**
   * Glob patterns to match files
   */
  patterns: string[]
  /**
   * The output filename for the generated UnoCSS file
   */
  outFile: string
  /**
   * Whether to rewrite the transformed utilities.
   *
   * - For css: if rewrite is true, it will not generate a new file, but directly modify the original file content.
   * - For other files: if rewrite is true, it replaces the original file with the transformed content.
   *
   * @default false
   */
  rewrite?: boolean

  /**
   * Whether to output CSS files scanned from patterns to outFile
   *
   * - false: Do not output CSS files
   * - true: Transform and output scanned CSS file contents to outFile
   * - 'multi': Output each CSS file separately with filename format `${originFile}-[hash]`
   * - 'single': Merge multiple CSS files into one output file named `outFile-merged.css`
   *
   * @default true
   */
  splitCss?: boolean | 'multi' | 'single'
}
```
Tokens:
Raw