Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

3.4 KiB

Raw Permalink Blame History

name, description

name	description
preset-wind3	Tailwind CSS / Windi CSS compatible preset for UnoCSS

Preset Wind3

The Tailwind CSS / Windi CSS compatible preset. Most commonly used preset for UnoCSS.

Installation

import { defineConfig, presetWind3 } from 'unocss';

export default defineConfig({
  presets: [presetWind3()],
});

Note: @unocss/preset-uno and @unocss/preset-wind are deprecated and renamed to @unocss/preset-wind3.

Features

Full Tailwind CSS v3 compatibility
Dark mode (dark:, @dark:)
All responsive variants (sm:, md:, lg:, xl:, 2xl:)
All standard utilities (flex, grid, spacing, colors, typography, etc.)
Animation support (includes Animate.css animations)

Dark Mode

Class-based (default)

<div class="dark:bg-gray-800"></div>

Generates: .dark .dark\:bg-gray-800 { ... }

Media Query Based

presetWind3({
  dark: 'media',
});

Generates: @media (prefers-color-scheme: dark) { ... }

Opt-in Media Query

Use @dark: regardless of config:

<div class="@dark:bg-gray-800"></div>

Options

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)
});

Important Option

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) { ... }

Differences from Tailwind CSS

Quotes Not Supported

Template quotes don't work due to extractor:

<!-- Won't work -->
<div class="before:content-['']">
  <!-- Use shortcut instead -->
  <div class="before:content-empty"></div>
</div>

Background Position

Use position: prefix for custom values:

<!-- Tailwind -->
<div class="bg-[center_top_1rem]">
  <!-- UnoCSS -->
  <div class="bg-[position:center_top_1rem]"></div>
</div>

Animations

UnoCSS integrates Animate.css. Use -alt suffix for Animate.css versions when names conflict:

animate-bounce - Tailwind version
animate-bounce-alt - Animate.css version

Custom animations:

theme: {
  animation: {
    keyframes: {
      custom: '{0%, 100% { opacity: 0; } 50% { opacity: 1; }}',
    },
    durations: {
      custom: '1s',
    },
    timingFns: {
      custom: 'ease-in-out',
    },
    counts: {
      custom: 'infinite',
    },
  }
}

Differences from Windi CSS

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]"></div>
</div>

Experimental: Media Hover

Addresses sticky hover on touch devices:

<div class="@hover-text-red"></div>

Generates:

@media (hover: hover) and (pointer: fine) {
  .\@hover-text-red:hover { ... }
}

3.4 KiB Raw Permalink Blame History