Meta tags:
description=Variants allow you to apply some variations to your existing rules.;
author=Anthony Fu;

Headings (most frequently used words):

variants, config, example, under, the, hood, going, further,

Text of the page (most frequently used words):
the (19), hover (13), variants (12), rules (8), this (6), variant (6), matcher (6), #config (6), presets (6), page (5), and (5), css (5), selector (5), for (5), next (4), you (4), will (4), matching (4), return (4), overview (4), extractor (4), shortcuts (3), can (3), guide (3), when (3), rem (3), margin (3), generated (3), our (3), matched (3), file (3), transformers (3), safelist (3), extractors (3), under (2), usages (2), have (2), users (2), result (2), apply (2), used (2), from (2), slice (2), autocomplete (2), layers (2), preflights (2), theme (2), navigation (2), svelte (2), attributify (2), extension (2), integrations (2), unocss (2), copyright, 2021, present, anthony, released, mit, license, previous, pager, last, updated, suggest, changes, system, very, powerful, covered, fully, check, see, more, advanced, default, preset, implementation, going, further, with, could, applied, only, over, element, following, finally, transformation, case, prepended, hook, first, rule, get, generates, 5rem, other, then, goes, match, round, returns, send, all, extracted, let, tour, what, happened, hood, provides, availability, customizing, controls, enabled, value, string, prefix, passed, startswith, example, allow, some, variations, your, existing, like, tailwind, are, llm, read, better, optimized, documentation, markdown, format, sidebar, top, menu, appearance, contributing, release, notes, v66, team, tutorial, playground, interactive, docs, resources, arbitrary, mdc, pug, jsx, compile, class, directives, group, tagify, legacy, compat, web, fonts, typography, icons, wind4, wind3, mini, community, concepts, examples, zed, jetbrains, ide, plugin, code, lsp, support, twoslash, eslint, postcss, cli, runtime, webpack, scoped, astro, nuxt, vite, extracting, style, reset, why, getting, started, main, ctrl, search, skip, content,

Text of the page (random words):
variants skip to content unocss search ctrl k main navigation guide guide getting started why unocss presets style reset config file extracting safelist integrations overview integrations vite nuxt next astro svelte scoped webpack runtime cli postcss eslint twoslash lsp support vs code extension jetbrains ide plugin zed extension examples config config file concepts overview rules variants shortcuts theme extractors preflights safelist layers presets transformers autocomplete presets overview community presets presets mini wind3 wind4 icons attributify typography web fonts legacy compat tagify rem to px transformers variant group directives compile class attributify jsx extractors pug extractor mdc extractor svelte extractor arbitrary variants extractor resources interactive docs playground tutorial team v66 8 1 release notes contributing appearance menu return to top sidebar navigation config overview rules variants shortcuts theme extractors preflights safelist layers presets transformers autocomplete config file on this page are you an llm you can read better optimized documentation at config variants md for this page in markdown format variants variants allow you to apply some variations to your existing rules like the hover variant from tailwind css example ts variants hover matcher if matcher startswith hover return matcher return slice hover prefix and passed to the next variants and rules matcher matcher slice 6 selector s s hover rules m d d margin d 4 rem matcher controls when the variant is enabled if the return value is a string it will be used as the selector for matching the rules selector provides the availability of customizing the generated css selector under the hood let s have a tour of what happened when matching for hover m 2 hover m 2 is extracted from users usages hover m 2 send to all variants for matching hover m 2 is matched by our variant and returns m 2 the result m 2 will be used for the next round of variants matching if no other variant is matched m 2 will then goes to match the rules our first rule get matched and generates m 2 margin 0 5rem finally we apply our variants transformation to the generated css in this case we prepended hover to the selector hook as a result the following css will be generated css hover m 2 hover margin 0 5 rem with this we could have m 2 applied only when users hover over the element going further the variant system is very powerful and can t be covered fully in this guide you can check the default preset s implementation to see more advanced usages suggest changes to this page last updated pager previous page rules next page shortcuts released under the mit license copyright 2021 present anthony fu