Setting the file. One moment.
Subchapter 10.18
references/preset-wind3.mdMarkdown3 KBView on GitHub
The Tailwind CSS / Windi CSS compatible preset. Most commonly used preset for UnoCSS.
import
Note: @unocss/preset-uno and @unocss/preset-wind are deprecated and renamed to @unocss/preset-wind3.
dark:, @dark:)sm:, md:, lg:, xl:, 2xl:)<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 mode strategy
dark: 'class', // 'class' | 'media' | { light: '.light', dark: '.dark' }
// Generate pseudo selector as [group=""] instead of .group
attributifyPseudo: false,
// CSS custom properties prefix
variablePrefix: 'un-',
// Utils prefix
prefix: '',
// Generate preflight CSS
preflight: true, // true | false | 'on-demand'
// Mark all utilities as !important
important: false, // boolean | string (selector)
})Make all utilities !important:
presetWind3({
important: true,
})Or scope with selector to increase specificity without !important:
presetWind3({
important: '#app',
})Output: #app :is(.dark .dark\:bg-blue) { ... }
Template quotes don’t work due to extractor:
<!-- Won't work -->
<div class="before:content-['']">
<!-- Use shortcut instead -->
<div class="before:content-empty">Use position: prefix for custom values:
<!-- Tailwind -->
<div class="bg-[center_top_1rem]">
<!-- UnoCSS -->
<div class="bg-[position:center_top_1rem]">UnoCSS integrates Animate.css. Use -alt suffix for Animate.css versions when names conflict:
animate-bounce - Tailwind versionanimate-bounce-alt - Animate.css versionCustom animations:
theme: {
animation: {
keyframes: {
custom: '{0%, 100% { opacity: 0; } 50% { opacity: 1; }}',
},
durations: {
custom: '1s',
},
timingFns: {
custom: 'ease-in-out',
},
counts: {
custom: 'infinite',
},
}
}| Windi CSS | UnoCSS |
|---|---|
<sm:p-1 | lt-sm:p-1 |
@lg:p-1 | at-lg:p-1 |
>xl:p-1 | xl:p-1 |
Bracket syntax uses _ instead of ,:
<!-- Windi CSS -->
<div class="grid-cols-[1fr,10px,max-content]">
<!-- UnoCSS -->
<div class="grid-cols-[1fr_10px_max-content]">Addresses sticky hover on touch devices:
<div class="@hover-text-red">Generates:
@media (hover: hover) and (pointer: fine) {
.\@hover-text-red:hover { ... }
}