tessl/npm-unocss--preset-wind

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

—

Pending

Overview

Eval results

Files

Shortcuts System

Name: tessl/npm-unocss--preset-wind
Author: tessl

Predefined utility combinations and common patterns for rapid development with container layout shortcuts.

Capabilities

Shortcuts Array

Collection of shortcut definitions providing convenient utility combinations.

const shortcuts: Shortcut<Theme>[];

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

interface ShortcutContext<T = {}> {
  theme: T;
  generator: UnoGenerator;
  variantHandlers: VariantHandler[];
}

Container Shortcuts

Responsive container layout shortcuts with breakpoint support.

const containerShortcuts: Shortcut<Theme>[];

Container Shortcut Pattern:

// Pattern: /^(?:(\w+)[:-])?container$/
// Generates responsive container utilities based on breakpoints

Generated Utilities:

container - Base container utility applying to all breakpoints
sm:container - Container starting from small breakpoint
md:container - Container starting from medium breakpoint
lg:container - Container starting from large breakpoint
xl:container - Container starting from extra-large breakpoint
2xl:container - Container starting from 2x extra-large breakpoint

Breakpoint Behavior:

When a breakpoint-specific container is used (e.g., md:container), it applies container styles starting from that breakpoint and all larger breakpoints. For example:

md:container generates: md:__container lg:__container xl:__container 2xl:__container
lg:container generates: lg:__container xl:__container 2xl:__container

Container CSS Behavior:

The container shortcuts generate CSS that:

Sets max-width based on breakpoint values or theme configuration
Centers content with margin-left: auto; margin-right: auto if theme.container.center is true
Applies padding based on theme.container.padding configuration
Sets width: 100% for base container without variant handlers

Theme Configuration:

interface ContainerTheme {
  center?: boolean;
  padding?: string | Record<string, string>;
  maxWidth?: Record<string, string>;
}

Usage Examples:

<!-- Basic container -->
<div class="container mx-auto px-4">
  <p>Centered content with responsive max-width</p>
</div>

<!-- Breakpoint-specific containers -->
<div class="md:container mx-auto">
  <p>Container behavior starts at medium breakpoint</p>
</div>

<!-- Combined with other utilities -->
<div class="container lg:container mx-auto px-4 py-8">
  <p>Container with padding and responsive behavior</p>
</div>

Theme-based Configuration:

// UnoCSS configuration with container theme
export default defineConfig({
  presets: [presetWind()],
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
      maxWidth: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        '2xl': '1536px',
      },
    },
  },
});

Shortcut Implementation

The shortcuts system processes patterns and generates corresponding utility combinations:

Pattern Matching: Regular expressions match utility class patterns
Context Processing: Breakpoint resolution and theme configuration access
Utility Generation: Creates arrays of utility classes based on matched patterns
Breakpoint Filtering: Filters and orders breakpoints for responsive behavior

Internal Processing Example:

// When processing "lg:container"
// 1. Matches pattern with breakpoint "lg"
// 2. Resolves available breakpoints: ['sm', 'md', 'lg', 'xl', '2xl']
// 3. Filters to breakpoints from 'lg' onwards: ['lg', 'xl', '2xl']
// 4. Generates: ['lg:__container', 'xl:__container', '2xl:__container']
// Plus base '__container' if no breakpoint specified

Usage Example:

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

// Shortcuts are used internally by the preset
// Access for advanced use cases or custom preset creation
const containerShortcuts = shortcuts.filter(shortcut => 
  shortcut[0] instanceof RegExp && shortcut[0].source.includes('container')
);

Install with Tessl CLI

npx tessl i tessl/npm-unocss--preset-wind

docs