Setting the file. One moment.
Subchapter 10.8
references/core-variants.mdMarkdown3 KBView on GitHub
Variants apply modifications to utility rules, like hover:, dark:, or responsive prefixes.
When matching hover:m-2:
hover:m-2 is extracted from sourcehover: variant matches and returns m-2m-2 continues to next variants.m-2 { margin: 0.5rem; }.hover\:m-2:hover { margin: 0.5rem; }variants: [
// hover: variant
(matcher) => {
if (!matcher.startsWith('hover:'))
return matcher
return {
// Remove prefix, pass to next variants/rules
matcher: matcher.slice(6),
// Modify the selector
selector: s => `${s}:hover`,
}
},
],
rules: [
[/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]matcher - The processed class name to pass forwardselector - Function to customize the CSS selectorparent - Wrapper like @media, @supportslayer - Specify output layersort - Control orderinghover:, focus:, active:, visited:first:, last:, odd:, even:disabled:, checked:, required:focus-within:, focus-visible:before:, after:placeholder:, selection:marker:, file:sm:, md:, lg:, xl:, 2xl:lt-sm: (less than sm)at-lg: (at lg only)dark: - Class-based dark mode (default)@dark: - Media query dark modegroup-hover:, group-focus:peer-checked:, peer-focus:@container, @sm:, @md:print:supports-[display:grid]:aria-checked:, aria-disabled:data-[state=open]:presetWind3({
dark: 'class'
})<div class="dark:bg-gray-800">Generates: .dark .dark\:bg-gray-800 { ... }
presetWind3({
dark: 'media'
})Generates: @media (prefers-color-scheme: dark) { ... }
Use @dark: regardless of config:
<div class="@dark:bg-gray-800">presetWind3({
dark: {
light: '.light-mode',
dark: '.dark-mode',
}
})Native CSS @layer support:
<div class="layer-foo:p-4" />Generates:
@layer foo {
.layer-foo\:p-4 { padding: 1rem; }
}| Windi CSS | UnoCSS |
|---|---|
<sm:p-1 | lt-sm:p-1 |
@lg:p-1 | at-lg:p-1 |
>xl:p-1 | xl:p-1 |
Addresses sticky hover on touch devices:
<div class="@hover-text-red">Generates:
@media (hover: hover) and (pointer: fine) {
.\@hover-text-red:hover { color: rgb(248 113 113); }
}