Skip to content

Latest commit

 

History

History
145 lines (113 loc) · 7.46 KB

index.md

File metadata and controls

145 lines (113 loc) · 7.46 KB
Raw
title description
Guide
Getting started with UnoCSS

What is UnoCSS?

UnoCSS is the instant atomic CSS engine, that is designed to be flexible and extensible. The core is un-opinionated, and all the CSS utilities are provided via presets.

For example, you could define your custom CSS utilities, by providing rules in your local config file.

// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  rules: [
    ['m-1', { margin: '1px' }]
  ],
})

This will add a new CSS utility m-1 to your project. Since UnoCSS is on-demand, it won't do anything until you use it in your codebase. So say we have a component like this:

<div class="m-1">Hello</div>

m-1 will be detected and the following CSS will be generated:

.m-1 { margin: 1px; }

To make it more flexible, you can make your rule dynamic by changing the first argument on the rule (we call it matcher) to a RegExp, and the body to a function, for example:

// uno.config.ts
export default defineConfig({
  rules: [
-    ['m-1', { margin: '1px' }]
+    [/^m-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
  ],
})

By doing this, now you can have arbitrary margin utilities, like m-1, m-100 or m-52.43. And again, UnoCSS only generates them whenever you use them.

<div class="m-1">Hello</div>
<div class="m-7.5">World</div>
.m-1 { margin: 1px; }
.m-7.5 { margin: 7.5px; }

Presets

Once you made a few rules, you can extract them into a preset, and share it with others. For example, you can create a preset for your company's design system, and share it with your team.

// 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: [/* ... */]
  // ...
}
// uno.config.ts
import { defineConfig } from 'unocss'
import { myPreset } from './my-preset'

export default defineConfig({
  presets: [
    myPreset // your own preset
  ],
})

So similarly, we provided a few official presets for you to start using right away, and you can also find many interesting community presets.

Play

You can try UnoCSS in your browser, in the Playground. Or look up utilities from the default presets in the Interactive Docs.

Installation

UnoCSS comes with many integrations for various frameworks:

Examples

Source code for all the examples can be found in the /examples directory.

Example Source Playground
astro GitHub Play Online
astro-vue GitHub Play Online
next GitHub
nuxt2 GitHub Play Online
nuxt2-webpack GitHub Play Online
nuxt3 GitHub Play Online
quasar GitHub Play Online
qwik GitHub
remix GitHub Play Online
sveltekit GitHub Play Online
sveltekit-preprocess GitHub Play Online
sveltekit-scoped GitHub Play Online
vite-elm GitHub
vite-lit GitHub Play Online
vite-preact GitHub Play Online
vite-pug GitHub Play Online
vite-react GitHub Play Online
vite-solid GitHub Play Online
vite-svelte GitHub Play Online
vite-svelte-postcss GitHub Play Online
vite-vue3 GitHub Play Online
vite-vue3-postcss GitHub Play Online
vite-watch-mode GitHub Play Online
vue-cli4 GitHub Play Online
vue-cli5 GitHub Play Online