CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-unocss--preset-wind

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@unocss/preset-wind@65.5.x
Publish Source
CLI
Badge
tessl/npm-unocss--preset-wind badge