@hozo/tailwind•AOT Compilation · Zero Runtime

Ahead-of-Time Tailwind CSS Compiler

Traditional React Native solutions run a heavy style parser in the client JavaScript bundle. Hozo compiles Tailwind classes ahead of time in Rust, emitting zero-runtime atomic CSS for Web and precalculated Fabric StyleSheets for Mobile.

The 3-Tier Style Resolution Pipeline

To ensure 100% predictability with maximum runtime performance, Hozo executes styles through a three-tier pipeline:

Tier 1: Static AOT

Build-Time Compilation

Static classes are scanned by hozo_cache and compiled into native atomic classes and constant StyleSheets. Zero bytes of runtime parser code ship to users.

Tier 2: Dynamic Preflight

Branch Pre-Calculation

Ternary expressions (isActive ? 'bg-hinoki' : 'bg-transparent') are evaluated at build time. Both branches are compiled into constant numeric lookups.

Tier 3: Candidate Sheet

Universal Fallback

Unresolvable runtime strings link to a pre-extracted candidate stylesheet derived from Tailwind v4, ensuring no dynamic class ever fails silently.

Cross-Platform Variants & Theming

Pseudo-Class Parity

Write standard Tailwind variants without platform-specific checks:

  • hover: & focus-visible: Native CSS pseudo-selectors on Web; Pressable state transitions on Native.
  • dark: Lowered to CSS media queries on Web and paired dark token StyleSheets on Mobile.
  • aria-* variants: Direct accessibility state binding across W3C and AccessibilityState.

Tailwind v4 @theme Integration

Synchronize your design system tokens effortlessly:

  • Web: Tokens emit clean CSS custom properties (var(--color-hinoki)).
  • Native: Tokens emit structured constants into the React Native StyleSheet dictionary.
  • No Duplication: Single design token source of truth across the monorepo.

Verify Exact Engine Conformance

Hozo's compiler output is verified directly against Tailwind's official engine on every commit.

View Conformance Matrix →

Universal Component Example

Write responsive, stateful Tailwind components with zero wrappers and zero runtime cost.

import { View, Text, Pressable } from '@hozo/core'

export function InteractiveCard() {
  return (
    <Pressable
      className="p-6 rounded-2xl bg-yakisugi-900 border border-wood hover:border-hinoki active:scale-95 transition-all dark:bg-yakisugi-950"
      accessibilityRole="button"
    >
      <Text className="text-lg font-bold text-shikkui group-hover:text-hinoki">
        Ahead-of-Time Compiled Card
      </Text>
      <Text className="text-sm text-stone-400 mt-2 leading-relaxed">
        Zero-runtime atomic CSS on Web. Fabric StyleSheet on Native.
      </Text>
    </Pressable>
  )
}