1---
2name: preset-wind3
3description: Tailwind CSS / Windi CSS compatible preset for UnoCSS
4---
5 
6# Preset Wind3
7 
8The Tailwind CSS / Windi CSS compatible preset. Most commonly used preset for UnoCSS.
9 
10## Installation
11 
12```ts
13import { defineConfig, presetWind3 } from 'unocss'
14 
15export default defineConfig({
16  presets: [
17    presetWind3(),
18  ],
19})
20```
21 
22**Note:** `@unocss/preset-uno` and `@unocss/preset-wind` are deprecated and renamed to `@unocss/preset-wind3`.
23 
24## Features
25 
26- Full Tailwind CSS v3 compatibility
27- Dark mode (`dark:`, `@dark:`)
28- All responsive variants (`sm:`, `md:`, `lg:`, `xl:`, `2xl:`)
29- All standard utilities (flex, grid, spacing, colors, typography, etc.)
30- Animation support (includes Animate.css animations)
31 
32## Dark Mode
33 
34### Class-based (default)
35 
36```html
37<div class="dark:bg-gray-800">
38```
39 
40Generates: `.dark .dark\:bg-gray-800 { ... }`
41 
42### Media Query Based
43 
44```ts
45presetWind3({
46  dark: 'media'
47})
48```
49 
50Generates: `@media (prefers-color-scheme: dark) { ... }`
51 
52### Opt-in Media Query
53 
54Use `@dark:` regardless of config:
55 
56```html
57<div class="@dark:bg-gray-800">
58```
59 
60## Options
61 
62```ts
63presetWind3({
64  // Dark mode strategy
65  dark: 'class', // 'class' | 'media' | { light: '.light', dark: '.dark' }
66  
67  // Generate pseudo selector as [group=""] instead of .group
68  attributifyPseudo: false,
69  
70  // CSS custom properties prefix
71  variablePrefix: 'un-',
72  
73  // Utils prefix
74  prefix: '',
75  
76  // Generate preflight CSS
77  preflight: true, // true | false | 'on-demand'
78  
79  // Mark all utilities as !important
80  important: false, // boolean | string (selector)
81})
82```
83 
84### Important Option
85 
86Make all utilities `!important`:
87 
88```ts
89presetWind3({
90  important: true,
91})
92```
93 
94Or scope with selector to increase specificity without `!important`:
95 
96```ts
97presetWind3({
98  important: '#app',
99})
100```
101 
102Output: `#app :is(.dark .dark\:bg-blue) { ... }`
103 
104## Differences from Tailwind CSS
105 
106### Quotes Not Supported
107 
108Template quotes don't work due to extractor:
109 
110```html
111<!-- Won't work -->
112<div class="before:content-['']">
113 
114<!-- Use shortcut instead -->
115<div class="before:content-empty">
116```
117 
118### Background Position
119 
120Use `position:` prefix for custom values:
121 
122```html
123<!-- Tailwind -->
124<div class="bg-[center_top_1rem]">
125 
126<!-- UnoCSS -->
127<div class="bg-[position:center_top_1rem]">
128```
129 
130### Animations
131 
132UnoCSS integrates Animate.css. Use `-alt` suffix for Animate.css versions when names conflict:
133 
134- `animate-bounce` - Tailwind version
135- `animate-bounce-alt` - Animate.css version
136 
137Custom animations:
138 
139```ts
140theme: {
141  animation: {
142    keyframes: {
143      custom: '{0%, 100% { opacity: 0; } 50% { opacity: 1; }}',
144    },
145    durations: {
146      custom: '1s',
147    },
148    timingFns: {
149      custom: 'ease-in-out',
150    },
151    counts: {
152      custom: 'infinite',
153    },
154  }
155}
156```
157 
158## Differences from Windi CSS
159 
160| Windi CSS | UnoCSS |
161|-----------|--------|
162| `<sm:p-1` | `lt-sm:p-1` |
163| `@lg:p-1` | `at-lg:p-1` |
164| `>xl:p-1` | `xl:p-1` |
165 
166Bracket syntax uses `_` instead of `,`:
167 
168```html
169<!-- Windi CSS -->
170<div class="grid-cols-[1fr,10px,max-content]">
171 
172<!-- UnoCSS -->
173<div class="grid-cols-[1fr_10px_max-content]">
174```
175 
176## Experimental: Media Hover
177 
178Addresses sticky hover on touch devices:
179 
180```html
181<div class="@hover-text-red">
182```
183 
184Generates:
185```css
186@media (hover: hover) and (pointer: fine) {
187  .\@hover-text-red:hover { ... }
188}
189```
190 
191<!-- 
192Source references:
193- https://unocss.dev/presets/wind3
194-->
195