CSS Rules

Modular CSS rule generators covering layout, typography, colors, effects, and responsive design utilities. These rules transform utility class names into CSS properties and values.

Capabilities

Rules Array

Collection of all CSS rule generators for the preset.

const rules: Rule[];

Usage Example:

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

// Rules are used internally by UnoCSS to generate CSS
// Each rule is either a static rule or dynamic matcher
console.log(rules.length); // ~200+ rules for comprehensive coverage

Rule Categories

Layout Rules

Layout and positioning utilities for controlling element placement and structure.

Position Rules:

• static, fixed, absolute, relative, sticky
• top-*, right-*, bottom-*, left-* (position offsets)
• inset-* (shorthand for all sides)
• z-* (z-index values)

Display Rules:

• block, inline-block, inline, flex, inline-flex
• grid, inline-grid, table, table-cell
• hidden (display: none)

Container Rules:

• container (responsive container)
• Custom container configurations via theme

Flexbox and Grid Rules

Modern layout system utilities for flexbox and CSS grid.

Flexbox Rules:

• flex-* (flex-grow, flex-shrink, flex-basis)
• flex-row, flex-col, flex-row-reverse, flex-col-reverse
• flex-wrap, flex-nowrap, flex-wrap-reverse
• justify-* (justify-content values)
• items-* (align-items values)
• self-* (align-self values)
• content-* (align-content values)

Grid Rules:

• grid-cols-* (grid-template-columns)
• grid-rows-* (grid-template-rows)
• col-span-*, row-span-* (grid column/row span)
• col-start-*, col-end-* (grid column placement)
• row-start-*, row-end-* (grid row placement)
• gap-*, gap-x-*, gap-y-* (grid and flexbox gaps)

Sizing Rules

Width, height, and sizing utilities with comprehensive value support.

Size Rules:

• w-*, h-* (width, height)
• min-w-*, min-h-* (minimum sizes)
• max-w-*, max-h-* (maximum sizes)
• size-* (width and height together)

Value Support:

• Numeric scales (0-96)
• Fractions (1/2, 1/3, 2/3, etc.)
• Viewport units (screen, vh, vw)
• Arbitrary values in brackets [200px]

Spacing Rules

Margin and padding utilities with directional support.

Margin Rules:

• m-* (all sides), mx-* (horizontal), my-* (vertical)
• mt-*, mr-*, mb-*, ml-* (individual sides)
• ms-*, me-* (logical start/end)

Padding Rules:

• p-* (all sides), px-* (horizontal), py-* (vertical)
• pt-*, pr-*, pb-*, pl-* (individual sides)
• ps-*, pe-* (logical start/end)

Value Support:

• Theme spacing scale (0-96)
• Negative values with - prefix
• Arbitrary values [10px]

Color Rules

Comprehensive color utilities with opacity support and theme integration.

Text Colors:

• text-* (text color from theme)
• text-opacity-* (text color opacity)

Background Colors:

• bg-* (background color from theme)
• bg-opacity-* (background color opacity)

Border Colors:

• border-* (border color from theme)
• border-opacity-* (border color opacity)

Color Value Support:

• Theme color names: red-500, blue, gray-100
• Hex colors: [#ff0000], hex-ff0000
• CSS variables: [$primary-color]
• Opacity modifiers: red-500/50 (50% opacity)

Border Rules

Border styling with width, style, radius, and color control.

Border Width:

• border, border-* (all sides)
• border-t-*, border-r-*, border-b-*, border-l-* (individual sides)
• border-x-*, border-y-* (horizontal/vertical)

Border Style:

• border-solid, border-dashed, border-dotted
• border-double, border-hidden, border-none

Border Radius:

• rounded (default), rounded-* (themed values)
• rounded-t-*, rounded-r-*, rounded-b-*, rounded-l-*
• rounded-tl-*, rounded-tr-*, rounded-bl-*, rounded-br-*

Typography Rules

Text styling utilities covering fonts, sizes, weights, and text properties.

Font Rules:

• font-* (font family from theme)
• text-* (font size from theme)
• font-* (font weight: thin, light, normal, medium, semibold, bold, extrabold, black)

Text Styling:

• italic, not-italic
• underline, no-underline, line-through
• uppercase, lowercase, capitalize, normal-case

Text Layout:

• text-left, text-center, text-right, text-justify
• align-* (vertical-align values)
• whitespace-* (white-space property)
• break-* (word-break and overflow-wrap)

Line Height and Spacing:

• leading-* (line-height from theme)
• tracking-* (letter-spacing from theme)

Effects Rules

Visual effects including shadows, filters, and transforms.

Shadow Rules:

• shadow, shadow-* (box-shadow from theme)
• shadow-none (remove shadow)
• Custom shadow colors: shadow-red-500

Transform Rules:

• scale-*, scale-x-*, scale-y-*
• rotate-* (rotation angles)
• translate-x-*, translate-y-*
• skew-x-*, skew-y-*
• transform, transform-none

Filter Rules:

• blur-* (blur filter from theme)
• brightness-*, contrast-*, saturate-*
• hue-rotate-*, invert, sepia
• filter, filter-none

Transition Rules

Animation and transition utilities for smooth interactions.

Transition Rules:

• transition, transition-none
• transition-* (transition-property from theme)
• duration-* (transition-duration from theme)
• ease-* (transition-timing-function from theme)
• delay-* (transition-delay)

Variable Rules

CSS custom property utilities for dynamic theming.

Variable Definition:

• [--variable-name:value] (define CSS variables)
• Integration with theme values

Static Rules

Pre-defined utility classes for common patterns.

Common Utilities:

• sr-only (screen reader only)
• not-sr-only (undo screen reader only)
• focus-within, focus-visible
• pointer-events-none, pointer-events-auto
• select-none, select-text, select-all

Question Mark Rules

Special debugging and development utilities.

Debug Rules:

• ? utilities for development debugging
• Temporary styling for layout inspection

Rule Processing

Value Handlers

Rules use sophisticated value handlers for processing utility values:

• Numeric values: Converted to appropriate units (rem, px, %)
• Fraction values: Converted to percentages (1/2 → 50%)
• Arbitrary values: Passed through with bracket notation [value]
• Theme lookup: Values resolved from theme configuration
• CSS functions: Support for calc(), var(), etc.

Dynamic Matching

Many rules use dynamic matchers for flexible value support:

// Example: margin utilities
['m', directionSize('margin')] // Matches m-4, mx-2, mt-auto, etc.

Negative Values

Utilities support negative values where appropriate:

// Negative margin
'm--4' // margin: -1rem
'-m-4' // margin: -1rem (alternative syntax)