Meta tags:
description=The Tailwind CSS / Windi CSS compact preset for UnoCSS (@unocss/preset-wind3).;
author=Anthony Fu;

Headings (most frequently used words):

dark, mode, media, features, differences, from, css, query, based, wind3, preset, presets, transformers, extractors, other, packages, installation, rules, tailwind, windi, experimental, options, quotes, background, position, with, arbitrary, values, animates, breakpoints, bracket, syntax, spaces, hover, important, opt, in,

Text of the page (most frequently used words):
the (32), unocss (24), #preset (23), dark (22), css (21), you (18), this (16), from (13), can (13), hover (13), presets (11), animation (11), wind3 (11), important (10), media (10), custom (10), for (10), will (9), use (9), animate (9), class (9), extractor (9), color (8), config (8), variant (8), 113 (8), red (8), that (7), and (7), tailwind (7), div (7), background (6), with (6), presetwind3 (6), defineconfig (6), default (6), import (6), mode (6), page (5), mini (5), rgb (5), utilities (5), uno (5), instead (5), add (5), rules (5), content (5), windi (5), transform (5), html (5), based (5), opacity (4), export (4), using (4), text (4), 248 (4), style (4), syntax (4), scale (4), position (4), query (4), bash (4), attributify (4), overview (4), wind4 (3), app (3), configuration (3), prefix (3), all (3), your (3), wind (3), are (3), features (3), may (3), grid (3), cols (3), theme (3), group (3), tip (3), provide (3), please (3), guide (3), center_top_1rem (3), arbitrary (3), code (3), variants (3), svelte (3), extractors (3), transformers (3), next (2), var (2), blue (2), utility (2), output (2), selector (2), their (2), specificity (2), set (2), introduce (2), some (2), when (2), inline (2), styles (2), cases (2), intended (2), option (2), apply (2), warning (2), should (2), has (2), options (2), info (2), since (2), regular (2), uses (2), tapping (2), includes (2), experimental (2), bracket (2), differences (2), category (2), 100 (2), keyframes (2), also (2), animations (2), better (2), effects (2), modify (2), bounce (2), alt (2), need (2), name (2), support (2), values (2), quotes (2), not (2), before (2), prefers (2), scheme (2), opt (2), generate (2), included (2), refer (2), source (2), interactive (2), docs (2), compatibility (2), documentation (2), bun (2), npm (2), yarn (2), pnpm (2), autocomplete (2), mdc (2), pug (2), jsx (2), compile (2), directives (2), community (2), rem (2), tagify (2), legacy (2), compat (2), web (2), fonts (2), typography (2), icons (2), navigation (2), safelist (2), file (2), extension (2), integrations (2), copyright, 2021, present, anthony, released, under, mit, license, previous, pager, last, updated, suggest, changes, 250, 165, given, effectively, increasing, without, actually, making, them, get, around, like, however, setting, issues, incorporating, third, party, libraries, elements, those, defeat, which, break, design, true, generated, mean, specific, only, lets, control, whether, marked, really, useful, existing, high, selectors, false, boolean, string, type, inherited, fine, pointer, most, probably, used, widely, distinguish, pseudo, addresses, problem, where, target, mobile, persist, until, elsewhere, sticky, changed, breaking, ways, any, time, require, parts, value, repeat, auto, 1fr_10px_max, 1fr, 10px, max, respect, space, spaces, breakpoints, zooming, management, make, easier, downstream, tools, consume, preview, infinite, counts, center, origin, properties, cubic, bezier, timingfns, durations, want, customize, effect, highly, customizable, items, duration, delay, speed, curve, etc, through, item, example, don, merge, conflicting, names, intellisense, find, quickly, fewer, built, fully, its, internally, integrate, more, animates, interpret, accomplish, same, thing, one, bare, allows, template, files, processed, supported, due, how, works, won, able, write, these, prefer, new, explicitly, such, empty, now, globally, change, generates, our, directly, primary, goal, noted, complete, guaranteed, detailed, usage, package, there, install, installation, deprecated, renamed, inherits, compact, llm, read, optimized, markdown, format, core, inspector, other, packages, sidebar, return, top, menu, appearance, contributing, release, notes, v66, team, tutorial, playground, resources, layers, preflights, shortcuts, concepts, examples, zed, jetbrains, ide, plugin, lsp, twoslash, eslint, postcss, cli, runtime, webpack, scoped, astro, nuxt, vite, extracting, reset, why, getting, started, main, ctrl, search, skip,

Text of the page (random words):
wind3 preset 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 overview presets mini wind3 wind4 icons attributify typography web fonts legacy compat tagify rem to px community presets transformers variant group directives compile class attributify jsx extractors pug extractor mdc extractor svelte extractor arbitrary variants extractor other packages inspector core autocomplete on this page are you an llm you can read better optimized documentation at presets wind3 md for this page in markdown format wind3 preset the tailwind css windi css compact preset for unocss source code info unocss preset wind and unocss preset uno are deprecated and renamed to unocss preset wind3 this preset inherits from unocss preset mini installation pnpm yarn npm bun bash pnpm add d unocss preset wind3 bash yarn add d unocss preset wind3 bash npm install d unocss preset wind3 bash bun add d unocss preset wind3 uno config ts ts import presetwind3 from unocss preset wind3 import defineconfig from unocss export default defineconfig presets presetwind3 tip this preset is included in the unocss package you can also import it from there ts import presetwind3 from unocss rules the primary goal of this preset is to provide compatibility with tailwind css and windi css it should be noted that complete compatibility may not be guaranteed please refer to their documentation for detailed usage for all rules and presets included in this preset please refer to our interactive docs or directly go to the source code features dark mode by default this preset generates class based dark mode with dark variant html div class dark bg red 10 will generate css dark dark bg red 10 background color rgb 248 113 113 0 1 media query based dark mode to instead use media query based dark mode globally you can change the config for the dark variant ts presetwind3 dark media now html div class dark bg red 10 will generate css media prefers color scheme dark dark bg red 10 background color rgb 248 113 113 0 1 opt in media query based dark mode to use opt in media query based dark mode you can use the dark variant html div class dark bg red 10 css media prefers color scheme dark dark bg red 10 background color rgb 248 113 113 0 1 differences from tailwind css quotes using quotes in the template the files intended to be processed is not supported due to how the extractor works e g you won t be able to write before content for these cases you may prefer to introduce a new utility that you can explicitly set such as class before content empty background position with arbitrary values tailwind allows one to use custom values for background position using the bare syntax html div class bg center_top_1rem div the wind preset will instead interpret center_top_1rem as a color use a position prefix to accomplish the same thing html div class bg position center_top_1rem div animates tailwind css has fewer built in animations we fully support its animation rules and internally integrate animate css to provide more animation effects you can use the animate prefix to guide intellisense to find the animation you need quickly tip we don t merge conflicting animation names from tailwind and animate css if you need to use the animation name from animate css please use animate name alt for example tailwind css animate css animate bounce animate bounce alt if you want to customize or modify the animation effect we provide highly customizable configuration items you can modify the duration delay speed curve etc of the animation through the configuration item uno config ts ts export default defineconfig theme animation keyframes custom 0 100 transform scale 0 5 50 transform scale 1 durations custom 1s timingfns custom cubic bezier 0 4 0 6 1 properties custom transform origin center counts custom infinite preview the custom animation animate custom tip you can also add category to group animations for better management this will make it easier for downstream tools to consume animation effects uno config ts ts export default defineconfig theme animation keyframes custom 0 100 transform scale 0 5 50 transform scale 1 category custom zooming differences from windi css breakpoints 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 spaces this preset uses _ instead of to respect space in bracket syntax windi css unocss grid cols 1fr 10px max content grid cols 1fr_10px_max content since some css rules require as parts of the value e g grid cols repeat 3 auto experimental features warning this preset includes experimental features that may be changed in breaking ways at any time media hover media hover addresses the sticky hover problem where tapping target that includes hover style on mobile will persist that hover style until tapping elsewhere since the regular hover style most probably used so widely the variant uses hover syntax to distinguish it from the regular hover pseudo the variant hover text red will output css media hover hover and pointer fine hover text red hover un text opacity 1 color rgb 248 113 113 var un text opacity options info this preset options are inherited from unocss preset mini important type boolean string default false the important option lets you control whether unocss s utilities should be marked with important this can be really useful when using unocss with existing css that has high specificity selectors warning using this option will apply important to all utilities generated by unocss you can use important variant instead if you mean to apply it to specific utilities only however setting important to true can introduce some issues when incorporating third party js libraries that add inline styles to your elements in those cases unocss s important utilities defeat the inline styles which can break your intended design to get around this you can set important to an id selector like app instead uno config ts ts import presetwind3 from unocss preset wind import defineconfig from unocss export default defineconfig presets presetwind3 important app this configuration will prefix all of your utilities with the given selector effectively increasing their specificity without actually making them important the utility dark bg blue will output css app is dark dark bg blue un bg opacity 1 background color rgb 96 165 250 var un bg opacity suggest changes to this page last updated pager previous page mini next page wind4 released under the mit license copyright 2021 present anthony fu