Wind preset
The Tailwind / Windi CSS compact preset for UnoCSS.
INFO
This preset inherits @unocss/preset-mini
.
Installation
pnpm add -D @unocss/preset-wind
yarn add -D @unocss/preset-wind
npm install -D @unocss/preset-wind
// uno.config.ts
import { defineConfig } from 'unocss'
import presetWind from '@unocss/preset-wind'
export default defineConfig({
presets: [
presetWind(),
],
})
TIP
This preset is included in the unocss
package, you can also import it from there:
import { presetWind } 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.
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.
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:
@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
.