CSS Rules System

Comprehensive collection of CSS utility rules providing Tailwind CSS compatible utilities for animations, layouts, typography, behaviors, and more.

Capabilities

Rules Array

Complete collection of CSS rules combining preset-mini rules with Wind-specific extensions.

const rules: Rule<Theme>[];

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

interface RuleContext<T = {}> {
  theme: T;
  generator: UnoGenerator;
  variantHandlers: VariantHandler[];
  constructCSS: (ctx: CSSEntries, tagNames?: Set<string>) => string;
  rawSelector: string;
}

Rule Categories

Container Rules

Responsive container layout system with flexible sizing and centering.

const container: Rule<Theme>[];
const containerShortcuts: Shortcut<Theme>[];

Container Rule Pattern:

• /^__container$/ - Internal container rule with responsive behavior
• Supports theme-based padding, max-width, and centering

Container Shortcut Pattern:

• /^(?:(\w+)[:-])?container$/ - Creates responsive container utilities
• Examples: container, sm:container, lg:container

Animation Rules

CSS animation utilities with extensive keyframe definitions.

const animations: Rule<Theme>[];

Features:

• 80+ predefined animation keyframes
• Custom durations and timing functions
• Animation iteration counts and properties
• Categories: Attention Seekers, Fading, Bouncing, Sliding, Zooming, Rotating, etc.

Background Rules

Background styling utilities including gradients, images, and blend modes.

const backgroundStyles: Rule<Theme>[];
const backgroundBlendModes: Rule<Theme>[];

Features:

• Background image utilities
• Gradient definitions
• Background blend mode support
• Mix blend mode utilities

Behavior Rules

Interactive and visual behavior utilities.

const accents: Rule<Theme>[];
const carets: Rule<Theme>[];
const imageRenderings: Rule<Theme>[];
const listStyle: Rule<Theme>[];
const overscrolls: Rule<Theme>[];
const scrollBehaviors: Rule<Theme>[];

Features:

• Accent color utilities
• Caret color and styling
• Image rendering modes
• List style utilities
• Overscroll behavior
• Smooth scroll behavior

Layout Rules

Layout and positioning utilities.

const columns: Rule<Theme>[];
const tables: Rule<Theme>[];
const spaces: Rule<Theme>[];
const divides: Rule<Theme>[];

Features:

• CSS columns for multi-column layouts
• Table layout utilities
• Space between elements
• Element divider utilities

Filter Rules

CSS filter and backdrop filter effects.

const filters: Rule<Theme>[];

Features:

• Filter effects (blur, brightness, contrast, etc.)
• Backdrop filter support
• Filter composition utilities

Text and Typography Rules

Text styling and typography utilities.

const lineClamps: Rule<Theme>[];
const fontVariantNumeric: Rule<Theme>[];
const textTransforms: Rule<Theme>[];
const hyphens: Rule<Theme>[];
const writingModes: Rule<Theme>[];
const writingOrientations: Rule<Theme>[];

Features:

• Line clamping for text overflow
• Font variant numeric utilities
• Text transformation utilities
• Hyphenation control
• Writing mode and orientation

Interaction Rules

User interaction and accessibility utilities.

const touchActions: Rule<Theme>[];
const scrolls: Rule<Theme>[];

Features:

• Touch action utilities for mobile interaction
• Scroll behavior and styling utilities

Static Utilities

Static utility rules for various CSS properties.

const dynamicViewportHeight: Rule<Theme>[];
const isolations: Rule<Theme>[];
const mixBlendModes: Rule<Theme>[];
const objectPositions: Rule<Theme>[];
const screenReadersAccess: Rule<Theme>[];

Features:

• Dynamic viewport height utilities
• CSS isolation utilities
• Object position utilities
• Screen reader accessibility utilities
• Mix blend mode utilities

Variable Rules

CSS custom property utilities.

const cssVariables: Rule<Theme>[];

Features:

• CSS custom property definition
• CSS variable utilities

Placeholder Rules

Input placeholder styling utilities.

const placeholders: Rule<Theme>[];

Features:

• Placeholder text styling
• Placeholder color utilities

View Transition Rules

CSS View Transitions API utilities.

const viewTransition: Rule<Theme>[];

Features:

• View transition utilities
• Transition name utilities

Rule Composition

The rules array combines all rule categories in a specific order for proper CSS cascade:

1. CSS Variables and Properties
2. Layout and Positioning (Container, Displays, Positions, etc.)
3. Typography and Text
4. Colors and Backgrounds
5. Effects (Filters, Shadows, etc.)
6. Interactions and Behaviors
7. Transitions and Animations

Usage Example:

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

// Rules are used internally by the preset
// Individual rule access for advanced use cases
const containerRules = rules.filter(rule => 
  rule[0] instanceof RegExp && rule[0].source.includes('container')
);