or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdpostprocessors.mdpreset.mdrules.mdshortcuts.mdtheme.mdvariants.md
tile.json

tessl/npm-unocss--preset-wind

Tailwind / Windi CSS compact preset for UnoCSS that provides comprehensive utility classes and theming system

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@unocss/preset-wind@65.5.x

To install, run

npx @tessl/cli install tessl/npm-unocss--preset-wind@65.5.0

index.mddocs/

UnoCSS Preset Wind

UnoCSS Preset Wind is a comprehensive Tailwind CSS and Windi CSS compatibility preset for UnoCSS. It provides a complete utility-first CSS framework with extensive animation support, responsive variants, theming capabilities, and Tailwind-compatible utility classes, designed for maximum compatibility with existing Tailwind CSS projects while leveraging UnoCSS's performance benefits through on-demand CSS generation.

Package Information

  • Package Name: @unocss/preset-wind
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @unocss/preset-wind

Core Imports

import { presetWind } from "@unocss/preset-wind";

For accessing individual modules:

import { presetWind, rules, theme, shortcuts, variants, postprocessors } from "@unocss/preset-wind";
import { colors, preflights } from "@unocss/preset-wind";

For individual module imports from subpaths:

import { rules } from "@unocss/preset-wind/rules";
import { theme } from "@unocss/preset-wind/theme";
import { shortcuts } from "@unocss/preset-wind/shortcuts";
import { variants } from "@unocss/preset-wind/variants";

CommonJS:

const { presetWind } = require("@unocss/preset-wind");

Basic Usage

import { defineConfig } from "unocss";
import { presetWind } from "@unocss/preset-wind";

export default defineConfig({
  presets: [
    presetWind({
      important: false, // Optional: control !important usage
    }),
  ],
});

With important CSS specificity control:

export default defineConfig({
  presets: [
    presetWind({
      important: true, // Add !important to all utilities
      // OR
      important: "#app", // Scope utilities under #app selector
    }),
  ],
});

Architecture

UnoCSS Preset Wind is built around several key components:

  • Main Preset Function: presetWind() factory that combines all components into a UnoCSS preset
  • Rules System: Comprehensive CSS rule definitions for utilities, animations, layouts, and behaviors
  • Theme Configuration: Extensive theming system including colors, animations, media queries, and design tokens
  • Variants System: Responsive breakpoints, pseudo-classes, dark mode, and CSS combinators
  • Shortcuts System: Predefined utility combinations for common patterns
  • Postprocessors: CSS transformation pipeline including important utility handling

Capabilities

Main Preset

Core preset factory function that creates a complete UnoCSS preset with Tailwind CSS compatibility.

function presetWind(options?: PresetWindOptions): Preset;

interface PresetWindOptions extends PresetMiniOptions {
  /**
   * 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.
   * 
   * You can also set `important` to a selector like `#app` instead, which will generate `#app :is(.m-1) { ... }`
   * 
   * Also check out the compatibility with [:is()](https://caniuse.com/?search=%3Ais())
   * 
   * @default false
   */
  important?: boolean | string;
}

Preset Configuration

CSS Rules System

Comprehensive collection of CSS utility rules including animations, backgrounds, layouts, typography, and behaviors.

const rules: Rule<Theme>[];

CSS Rules

Theme Configuration

Extensive theming system with animation definitions, media queries, color schemes, and design tokens.

const theme: Theme;

Theme System

Variants System

Responsive variants, pseudo-classes, dark mode support, and CSS combinators for conditional styling.

function variants(options: PresetWindOptions): Variant<Theme>[];

Variants System

Shortcuts System

Predefined utility combinations and common patterns for rapid development.

const shortcuts: Shortcut<Theme>[];

Shortcuts

Postprocessors System

CSS transformation pipeline for handling important utilities and other post-processing tasks.

function postprocessors(options: PresetWindOptions): Postprocessor[];

function important(option: PresetWindOptions['important']): Postprocessor[];

Postprocessors System

Core Types

interface Preset {
  name: string;
  theme?: Theme;
  rules?: Rule[];
  shortcuts?: Shortcut[];
  variants?: Variant[];
  postprocess?: Postprocessor | Postprocessor[];
}

interface PresetMiniOptions {
  /**
   * Generate preflight
   * @default true
   */
  preflight?: boolean;
  /**
   * Enable dark mode utilities
   * @default 'class'
   */
  dark?: 'class' | 'media' | string;
  /**
   * Enable attributify mode utilities
   * @default false
   */
  attributifyPseudo?: boolean;
  /**
   * Prefix for CSS variables
   * @default 'un-'
   */
  variablePrefix?: string;
  /**
   * Utils prefix
   * @default undefined
   */
  prefix?: string;
}

type Rule<T = {}> = StaticRule | DynamicRule<T>;
type StaticRule = [string, CSSObject | CSSValue];
type DynamicRule<T = {}> = [
  RegExp,
  (match: RegExpMatchArray, context: RuleContext<T>) => CSSObject | CSSValue | undefined,
  RuleOptions?
];

type Shortcut<T = {}> = StaticShortcut | DynamicShortcut<T>;
type StaticShortcut = [string, string | string[]];
type DynamicShortcut<T = {}> = [
  RegExp,
  (match: RegExpMatchArray, context: ShortcutContext<T>) => string | string[] | undefined,
  ShortcutOptions?
];

type Variant = (matcher: VariantMatcherContext) => VariantHandlerContext | string | undefined;

type Postprocessor = (util: PostprocessorContext) => void;

interface PostprocessorContext {
  selector: string;
  entries: [string, string | number | undefined][];
  parent?: Rule;
  layer?: string;
  sort?: number;
}

interface Theme {
  colors?: ColorTheme;
  fontFamily?: FontFamilyTheme;
  breakpoints?: BreakpointTheme;
  animation?: AnimationTheme;
  [key: string]: any;
}

type CSSObject = Record<string, string | number | CSSObject>;
type CSSValue = string | number;

Re-exported from @unocss/preset-mini

const colors: ColorTheme;
const preflights: Preflight[];

type Theme = PresetMiniTheme;