graph LR
    A[Apollo Wind] --> B[Pre-compiled Styles<br/>Zero Config]
    A --> C[Tailwind JIT<br/>Full Power]
    B --> D[Fast Setup<br/>17KB CSS]
    C --> E[All Features<br/>Custom Classes]

Quick Start

npm install @uipath/apollo-wind

Note: This package is published to both npm and GitHub Package Registry. External users will automatically pull from npm. Internal UiPath users with .npmrc configured will automatically pull from GitHub Package Registry.

Option 1: Zero Config (Recommended for quick starts)

import "@uipath/apollo-wind/tailwind.css";
import { Button } from "@uipath/apollo-wind";

<Button>Click me</Button>;

Option 2: Full Tailwind JIT (For advanced customization)

npm install @uipath/apollo-wind postcss

// postcss.config.js
export { default } from "@uipath/apollo-wind/postcss";

/* src/app.css */
@import "@uipath/apollo-wind/tailwind.css";

/* Scan your source files for Tailwind classes */
@source "./src/**/*.{js,jsx,ts,tsx}";

/* Scan wind components to include their styles */
@source "./node_modules/@uipath/apollo-wind/dist/**/*.js";

import "./app.css";
import { Button } from "@uipath/apollo-wind";

// ✅ All Tailwind utilities work!
<Button className="bg-purple-500 hover:scale-105 w-[200px]">
  Custom Tailwind
</Button>;

Comparison

Feature	Pre-compiled	Tailwind JIT
Setup Time	Instant	5 minutes
Bundle Size	~17KB CSS	~varies (JIT)
Custom Classes	❌	✅
Arbitrary Values	❌	✅ (`w-[200px]`)
Tailwind Plugins	❌	✅
Best For	Prototypes, Simple Apps	Production, Heavy Customization

Architecture

flowchart TD
    A[Component Library] --> B[CVA Variants]
    A --> C[TypeScript Types]
    B --> D[Tailwind Utilities]
    C --> E[React Components]

    F[Consumer App] --> G{Choose Approach}
    G -->|Option 1| H[Import styles.css]
    G -->|Option 2| I[Import tailwind.css<br/>+ @source directive]

    H --> J[Pre-compiled CSS<br/>34KB]
    I --> K[JIT Compiled<br/>Only used utilities]

    J --> L[Components Rendered]
    K --> L

Example

import {
  Button,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Input,
  Label,
} from "@uipath/apollo-wind";

function LoginForm() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Welcome Back</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" placeholder="you@example.com" />
        </div>
        <Button className="w-full">Sign In</Button>
      </CardContent>
    </Card>
  );
}

Utilities

cn() - Class Merger

import { cn } from "@uipath/apollo-wind";

<Button className={cn("base-class", isActive && "active-class")}>
  Button
</Button>;

Development

This package is part of a pnpm workspace. All commands should be run using pnpm.

From the root of the monorepo:

pnpm install                                    # Install all dependencies
pnpm build                                      # Build apollo packages
pnpm storybook:design                           # Run Storybook on http://localhost:6006
pnpm test --filter=@uipath/apollo-wind          # Run tests
pnpm lint --filter=@uipath/apollo-wind          # Run lint
pnpm format --filter=@uipath/apollo-wind        # Run biome format

From the packages/apollo-wind directory:

pnpm install        # Install dependencies (from root)
pnpm build          # Build apollo packages
pnpm storybook      # Run Storybook on http://localhost:6006
pnpm test           # Run tests
pnpm lint           # Run lint
pnpm format         # Run biome format