UnoCSS

Attributify Mode

Use utilities as HTML attributes.

Automatic config discovery

Automatically looks for uno.config.{js,ts,mjs,mts} or unocss.config.{js,ts,mjs,mts} in the project root.

Blocklist

Configure blocklist to exclude certain utilities from being generated.

Browser Style Reset

UnoCSS does not provide style resetting or preflight by default.

Community presets

Community presets are available for additional functionality.

Content Sources

Extract utilities from build tools pipeline, filesystem, or inline text; usages are merged.

Creating presets

Create your own custom preset; see Config: presets for details.

Dedicated config file

Use uno.config.ts for better IDE and integration support and improved HMR.

Disable default preset

Set presets to an empty array to disable the default preset.

Examples

Source code for all examples is in the /examples directory.

Extracting ​

Extracting from Build Tools Pipeline ​

Extracting from Filesystem ​

Extracting from Inline Text ​

Extracting from Filesystem

Manually specify files to read and watch at dev mode when no pipeline access exists.

Extracting from Inline Text

Extract utility usages from inline plain text or an async getter called once at build time.

Inspector

Inspector for better developer experience.

Interactive Docs

Look up utilities from the default presets in the Interactive Docs.

Limitations ​

Magic Comments

Use @unocss-include, @unocss-ignore, @unocss-skip-start and @unocss-skip-end per file.

Manual config file path

Specify the config file manually, e.g. via the Vite plugin's configFile option.

Matcher Types ​

Messages ​

Official presets

Official presets are listed in the documentation, including presetAttributify and presetWind3.

Extracting from Build Tools Pipeline

Supported in Vite and Webpack integrations; extracts from files passing through the pipeline.

Playground

Try UnoCSS in your browser in the Playground.

Pure CSS Icons

Icons implemented in pure CSS.

Safelist

Configure safelist to always generate CSS for dynamic concatenations.

Shortcuts

Combine multiple utilities into one.

Static List Combinations

List all combinations statically in an object so UnoCSS can extract them at build time.

Tagify

Tagify feature for atomic CSS.

Using presets

Set presets in uno.config.ts via defineConfig; when presets is specified the default preset is ignored.

Variant Awareness ​

Variant Groups

Group variants for concise syntax.

Web Fonts

Web fonts support.