### Vite Example Setup

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/bundler-integration.md

A complete example of setting up the Uniwind Vite plugin in your vite.config.ts file, including other common plugins like @vitejs/plugin-react.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { uniwind } from 'uniwind/vite'

export default defineConfig({
  plugins: [
    react(),
    uniwind({
      cssEntryFile: './src/styles/global.css',
      extraThemes: ['mint', 'sunset'],
      dtsFile: 'src/types/uniwind.d.ts'
    })
  ]
})
```

--------------------------------

### OptionMapping Usage Example

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/types.md

Provides an example of how to configure manual style-to-className mappings using the OptionMapping type. This example sets up a mapping for the 'color' style property.

```typescript
const options = {
  color: {
    fromClassName: 'colorClassName',
    styleProperty: 'color'
  }
}
```

--------------------------------

### Install Peer Dependencies

Source: https://github.com/uni-stack/uniwind/blob/main/skills/uniwind/SKILL.md

Install the required peer dependencies for Uniwind Pro.

```bash
npm install react-native-nitro-modules react-native-reanimated react-native-worklets
```

--------------------------------

### Install Uniwind and Tailwind CSS

Source: https://github.com/uni-stack/uniwind/blob/main/packages/uniwind/readme.md

Install uniwind and tailwindcss using bun. Follow the provided link for detailed installation guides.

```sh
bun add uniwind tailwindcss
```

--------------------------------

### Install Uniwind and Tailwind CSS

Source: https://github.com/uni-stack/uniwind/blob/main/skills/uniwind/SKILL.md

Install Uniwind and Tailwind CSS v4+ using your preferred package manager.

```bash
bun install uniwind tailwindcss
```

--------------------------------

### Example CSS Entry File

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/bundler-integration.md

This is an example of a global CSS file that imports Tailwind CSS and defines base, component, and utility classes.

```css
/* global.css */
@import "tailwindcss";

@layer base {
  * {
    @apply box-border;
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded font-semibold;
  }
}

@layer utilities {
  .custom-utility {
    color: var(--custom-color);
  }
}
```

--------------------------------

### Comprehensive CSS Entry File Example

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/configuration.md

An example of a comprehensive CSS entry file for Uniwind, including Tailwind imports, base styles, component styles, utilities, and theme-specific CSS variables.

```css
/* src/global.css */

/* Import Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Base styles */
@layer base {
  * {
    @apply box-border;
  }
  
  html, body {
    @apply bg-white dark:bg-gray-900;
    @apply text-gray-900 dark:text-white;
    @apply font-sans;
  }
}

/* Component styles */
@layer components {
  .btn {
    @apply px-4 py-2 rounded font-semibold transition-colors;
  }
  
  .btn-primary {
    @apply bg-blue-500 text-white hover:bg-blue-600;
  }
  
  .btn-secondary {
    @apply bg-gray-200 text-gray-900 hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600;
  }
}

/* Utilities */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/* Theme-specific CSS variables */
.light {
  --primary-color: #3b82f6;
  --secondary-color: #ef4444;
  --spacing-unit: 0.25rem;
  --border-radius-base: 0.375rem;
}

.dark {
  --primary-color: #1e40af;
  --secondary-color: #dc2626;
  --spacing-unit: 0.25rem;
  --border-radius-base: 0.375rem;
}

.mint {
  --primary-color: #14b8a6;
  --secondary-color: #f97316;
  --spacing-unit: 0.25rem;
  --border-radius-base: 0.375rem;
}
```

--------------------------------

### Basic global.css setup

Source: https://github.com/uni-stack/uniwind/blob/main/skills/uniwind/SKILL.md

Create a CSS entry file with the necessary imports for Uniwind and Tailwind CSS v4.

```css
@import 'tailwindcss';
@import 'uniwind';
```

--------------------------------

### ThemeName Usage Example

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/types.md

Demonstrates how to use the ThemeName type for theme variables and setting the current theme.

```typescript
import type { ThemeName } from 'uniwind'

const currentTheme: ThemeName = 'light' // ✓
const customTheme: ThemeName = 'custom' // ✓ if custom is registered

Uniwind.setTheme('light')
ScopedTheme theme="dark"
```

--------------------------------

### Install Uniwind and Tailwind 4

Source: https://github.com/uni-stack/uniwind/blob/main/skills/migrate-nativewind-to-uniwind/SKILL.md

Install Uniwind and the latest version of Tailwind CSS. Ensure tailwindcss is version 4 or higher.

```bash
npm install uniwind tailwindcss@latest
# or
yarn add uniwind tailwindcss@latest
# or
bun add uniwind tailwindcss@latest
```

--------------------------------

### Install and Create cn Utility for ClassName Deduplication

Source: https://github.com/uni-stack/uniwind/blob/main/skills/migrate-nativewind-to-uniwind/SKILL.md

Steps to install `tailwind-merge` and `clsx`, and create a `cn` utility function for handling conditional and deduplicated class names.

```bash
npm install tailwind-merge clsx
```

--------------------------------

### Rebuild Native App

Source: https://github.com/uni-stack/uniwind/blob/main/skills/uniwind/SKILL.md

Clean and rebuild your native application after installation and configuration.

```bash
npx expo prebuild --clean && npx expo run:ios
```

--------------------------------

### Usage of cn Utility

Source: https://github.com/uni-stack/uniwind/blob/main/skills/migrate-nativewind-to-uniwind/SKILL.md

Examples demonstrating how to use the `cn` utility with static, dynamic, and conditional class names.

```tsx
import { cn } from '@/lib/cn';

<View className={cn('p-4 bg-white', props.className)} />
<Text className={cn('text-base', isActive && 'text-blue-500', disabled && 'opacity-50')} />
```

--------------------------------

### Var Usage Example (Internal)

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/types.md

Provides an internal example of how a Var function might be used to access a CSS variable.

```typescript
const colorVar: Var = (vars) => vars['--primary-color']()
```

--------------------------------

### View Component with Theming

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/components.md

Example of the View component used as a container, demonstrating responsive styling with dark mode.

```typescript
<View className="flex-1 bg-white dark:bg-gray-900 p-4">
  {children}
</View>
```

--------------------------------

### cn Utility Setup

Source: https://github.com/uni-stack/uniwind/blob/main/skills/uniwind/SKILL.md

Install tailwind-merge and clsx to use the cn utility for deduplicating class names. This utility is crucial for merging conflicting class names.

```bash
npm install tailwind-merge clsx
```

--------------------------------

### Mobile-First Responsive Design Example

Source: https://github.com/uni-stack/uniwind/blob/main/skills/uniwind/SKILL.md

Demonstrates the correct mobile-first approach for responsive width utilities, ensuring styles adapt progressively from smallest to largest screens.

```tsx
// CORRECT — mobile-first
<View className="w-full sm:w-3/4 md:w-1/2 lg:w-1/3" />
```

--------------------------------

### StyleDependency Enum Usage Example

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/types.md

Demonstrates how to subscribe to style changes using the StyleDependency enum. This example shows subscribing to changes related to Theme and Variables.

```typescript
import { StyleDependency } from 'uniwind'

UniwindListener.subscribe(() => {
  // Handle style changes
}, [StyleDependency.Theme, StyleDependency.Variables])
```

--------------------------------

### React Native Auto-Selection Import

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/components.md

Example of importing components for React Native, allowing automatic platform selection.

```typescript
// React Native auto-selection (automatic platform selection)
import { View, Text } from 'react-native'
```

--------------------------------

### Get and Set Theme with Uniwind

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/README.md

Demonstrates how to retrieve the current theme and switch between themes (e.g., 'dark', 'system') using Uniwind's hooks and methods. Requires importing Uniwind and useUniwind.

```typescript
import { Uniwind, useUniwind } from 'uniwind'

// Get current theme
const { theme, hasAdaptiveThemes } = useUniwind()

// Switch theme
Uniwind.setTheme('dark')

// Use system theme
Uniwind.setTheme('system')
```

--------------------------------

### Default Uniwind Theme Setup

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/configuration.md

Access default theme information and current theme status in Uniwind. Includes checking for adaptive themes.

```typescript
import { Uniwind } from 'uniwind'

// All available themes
console.log(Uniwind.themes) // ['light', 'dark']

// Current theme
console.log(Uniwind.currentTheme) // 'light' or 'dark'

// Is using system theme
console.log(Uniwind.hasAdaptiveThemes) // true or false
```

--------------------------------

### RNStyle Usage Example

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/types.md

Demonstrates the usage of RNStyle for defining component styles, including extended properties like accentColor.

```typescript
import type { RNStyle } from 'uniwind'

const styles: RNStyle = {
  flex: 1,
  backgroundColor: '#fff',
  fontSize: 16,
  accentColor: '#3b82f6'
}
```

--------------------------------

### Color Extraction Warning Example

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/higher-order-component.md

Shows a development warning that appears when a `colorClassName` is provided but does not contain any recognized color utilities.

```text
className 'flex-1' was provided to extract accentColor but no color was found.
Make sure the className includes a color utility (e.g., 'accent-red-500', 'accent-blue-600').
See https://docs.uniwind.dev/class-names#the-accent-prefix
```

--------------------------------

### UniwindContextType Usage Example

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/types.md

Demonstrates how to use the useUniwindContext hook to access context values like scopedTheme and rtl.

```typescript
import { UniwindContext, useUniwindContext } from 'uniwind/core'

const context = useUniwindContext()
// { scopedTheme: 'dark' | null, rtl: true | null }
```

--------------------------------

### GetClassName Utility Type Examples

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/types.md

Illustrates the usage of the GetClassName utility type with different string inputs. Shows how it transforms specific style property names into className equivalents.

```typescript
type A = GetClassName<'style'>           // 'className'
type B = GetClassName<'contentContainerStyle'> // 'contentContainerClassName'
```

--------------------------------

### Basic Group Variant Example

Source: https://github.com/uni-stack/uniwind/blob/main/skills/uniwind/SKILL.md

Demonstrates how descendants can react to the parent's active state using the 'group' and 'group-active:*' variants. No re-renders occur.

```tsx
// Basic group — descendants react to parent press
<Pressable className="group p-4 bg-base rounded-xl">
  <Text className="text-default group-active:text-primary">Press the card</Text>
  <View className="size-8 bg-blue-500 rounded group-active:bg-red-500" />
</Pressable>
```

--------------------------------

### Example Compiled CSS Artifact

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/bundler-integration.md

This shows the compiled CSS output, including theme-specific variables and utility class styles for both light and dark themes.

```css
/* uniwind.css */
.light {
  --primary-color: #3b82f6;
  --secondary-color: #ef4444;
}

.dark {
  --primary-color: #1e40af;
  --secondary-color: #dc2626;
}

.text-blue-500 {
  color: #3b82f6;
}

.dark .text-blue-500 {
  color: #1e40af;
}

/* ... more utilities ... */
```

--------------------------------

### StyleSheets Structure Example

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/types.md

Illustrates the organization of compiled styles within the StyleSheets type. It shows how class names like 'text-red-500' can have multiple style entries for different contexts (light theme, dark theme, responsive breakpoints).

```typescript
{
  'text-red-500': [
    { /* Style for light theme */ },
    { /* Style for dark theme */ },
    { /* Style for responsive breakpoint */ }
  ],
  'flex-1': [
    { /* Style info */ }
  ]
}
```

--------------------------------

### Metro Configuration with Expo

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/configuration.md

Configure Uniwind for a Metro bundler within an Expo project. This example adapts the standard Metro configuration for Expo's environment.

```javascript
import { getDefaultConfig } from '@expo/metro-config'
import { withUniwindConfig } from 'uniwind/metro'

const baseConfig = getDefaultConfig(__dirname)

export default withUniwindConfig(baseConfig, {
  cssEntryFile: './src/styles/global.css',
  extraThemes: ['custom'],
  polyfills: true,
  isTV: false
})
```

--------------------------------

### Dark Mode Theming with 'dark:' Prefix

Source: https://github.com/uni-stack/uniwind/blob/main/skills/uniwind/SKILL.md

Quickly enable dark mode support by prefixing class names with 'dark:'. This setup works immediately and requires no additional configuration, suitable for small apps.

```tsx
<View className="bg-white dark:bg-gray-900">
  <Text className="text-black dark:text-white">Themed</Text>
</View>
```

--------------------------------

### Example TypeScript Type Definitions

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/bundler-integration.md

This TypeScript declaration file defines the global variable `__uniwindThemes__` which lists the available themes.

```typescript
// uniwind-types.d.ts
declare global {
  var __uniwindThemes__: readonly ['light', 'dark', 'custom'] | undefined
}
```

--------------------------------

### Define custom CSS classes in global.css

Source: https://github.com/uni-stack/uniwind/blob/main/skills/uniwind/SKILL.md

Example of defining custom CSS classes like card-shadow and adaptive-surface in a global.css file for use with Uniwind.

```css
/* global.css */
.card-shadow {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.adaptive-surface {
  background-color: light-dark(#ffffff, #1f2937);
  color: light-dark(#111827, #f9fafb);
}

.container {
  flex: 1;
  width: 100%;
  max-width: 1200px;
}
```

--------------------------------

### Uniwind Free Setup with SafeAreaProvider

Source: https://github.com/uni-stack/uniwind/blob/main/skills/uniwind/SKILL.md

Integrate Uniwind Free with react-native-safe-area-context by wrapping your app in SafeAreaProvider and SafeAreaListener to update insets.

```tsx
import { SafeAreaProvider, SafeAreaListener } from 'react-native-safe-area-context';
import { Uniwind } from 'uniwind';

export default function App() {
  return (
    <SafeAreaProvider>
      <SafeAreaListener
        onChange={({ insets }) => {
          Uniwind.updateInsets(insets);
        }}
      >
        <View className="pt-safe px-safe">{/* content */}</View>
      </SafeAreaListener>
    </SafeAreaProvider>
  );
}
```

--------------------------------

### Layout Transition with List Items

Source: https://github.com/uni-stack/uniwind/blob/main/skills/uniwind/SKILL.md

Animates the position and size changes of list items when they are added or removed. This example uses a linear transition for repositioning.

```tsx
<View className="w-full gap-2">
  {items.map(item => (
    <View key={item.id} className={`h-14 ${item.color} rounded-xl uw-entering-fade-in uw-exiting-fade-out uw-layout-linear-transition`} />
  ))}
</View>
```

--------------------------------

### Define NativeWind JS Themes with vars()

Source: https://github.com/uni-stack/uniwind/blob/main/skills/migrate-nativewind-to-uniwind/SKILL.md

Example of defining light and dark themes using NativeWind's `vars()` function for CSS variables.

```tsx
import { vars } from 'nativewind';

export const themes = {
  light: vars({
    '--color-primary': '#00a8ff',
    '--color-typography': '#000',
  }),
  dark: vars({
    '--color-primary': '#273c75',
    '--color-typography': '#fff',
  }),
};

// In JSX:
// <View style={themes[colorScheme]}>
```

--------------------------------

### Manual Style Merging Example

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/higher-order-component.md

Demonstrates manual style merging where Tailwind-resolved styles are combined with manually defined styles, typically when using `withUniwind` with explicit options.

```typescript
// Manual merging
<View
  className="bg-blue-500 flex-1"
  style={{ margin: 10 }}
/>
// Results in: style={[tailwindStyles, manualStyle]}
```

--------------------------------

### Get Available Themes

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/uniwind-config.md

Retrieve the list of all registered theme names. This includes default themes like 'light' and 'dark', as well as any custom themes added via configuration.

```typescript
import { Uniwind } from 'uniwind'

const availableThemes = Uniwind.themes
console.log(availableThemes) // ['light', 'dark', 'custom']
```

--------------------------------

### Initializing Uniwind Context Provider

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/components.md

Shows how to wrap the application content with `UniwindContext.Provider` for theme and layout direction initialization.

```typescript
import { UniwindContext } from 'uniwind/core'

export function App() {
  return (
    <UniwindContext.Provider value={{ scopedTheme: null, rtl: null }}>
      <AppContent />
    </UniwindContext.Provider>
  )
}
```

--------------------------------

### Import Pre-Wrapped Components for Web

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/components.md

Shows how to import pre-wrapped components from `uniwind/components` when building for the web.

```typescript
// Web versions (when building for web)
import {
  View,
  Text,
  Image,
  Pressable,
  ScrollView,
  // ... other components
} from 'uniwind/components'
```

--------------------------------

### Configure Theme Transitions with Presets

Source: https://github.com/uni-stack/uniwind/blob/main/skills/uniwind/SKILL.md

Set up native animated transitions for theme switching using Uniwind.setTheme and ThemeTransitionPreset. Supports various animations like fade, slide, circle, and blur.

```tsx
import { Uniwind, ThemeTransitionPreset } from 'uniwind';

// Fade transition
Uniwind.setTheme('dark', { preset: ThemeTransitionPreset.Fade });

// Slide transitions
Uniwind.setTheme('dark', { preset: ThemeTransitionPreset.SlideRightToLeft });
Uniwind.setTheme('light', { preset: ThemeTransitionPreset.SlideLeftToRight });

// Circle mask transitions (expand from a corner or center)
Uniwind.setTheme('ocean', { preset: ThemeTransitionPreset.CircleCenter });

// Blur transitions
Uniwind.setTheme('dark', { preset: ThemeTransitionPreset.Blur });
Uniwind.setTheme('dark', { preset: ThemeTransitionPreset.BlurRightToLeft });

// No animation
Uniwind.setTheme('light');
```

--------------------------------

### ComponentState Usage Example

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/types.md

Illustrates how to define and use ComponentState to conditionally apply styles based on interaction states.

```typescript
import type { ComponentState } from 'uniwind'

const state: ComponentState = {
  isPressed: false,
  isDisabled: false,
  isFocused: true
}

const styles = useStyle(className, props, state)
```

--------------------------------

### CSSVariables Usage Example

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/types.md

Shows how to define and update CSS variables for a specific theme using the CSSVariables type.

```typescript
import type { CSSVariables } from 'uniwind'

const variables: CSSVariables = {
  '--primary-color': '#3b82f6',
  '--spacing-unit': 4,
  '--font-size-base': '1rem'
}

Uniwind.updateCSSVariables('light', variables)
```

--------------------------------

### Uniwind Singleton and Properties

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/GENERATION_REPORT.txt

Documentation for the Uniwind singleton, detailing its configurable properties like themes, currentTheme, and hasAdaptiveThemes.

```APIDOC
## Uniwind Singleton

### Description
Documentation for the Uniwind singleton, which manages theming and styling configurations.

### Properties
- **themes** (object) - Defines the available themes for the application.
- **currentTheme** (string) - Specifies the currently active theme.
- **hasAdaptiveThemes** (boolean) - Indicates if adaptive theming is enabled.
```

--------------------------------

### ScrollView Component with Content Styling

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/components.md

Example of ScrollView usage, showing how to style the inner content container with `contentContainerClassName`.

```typescript
<ScrollView
  className="flex-1"
  contentContainerClassName="p-4 pb-8"
>
  {items.map(item => <Item key={item.id} {...item} />)}
</ScrollView>
```

--------------------------------

### Import Main Uniwind Components

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/components.md

Demonstrates how to import core types and utilities like ScopedTheme and LayoutDirection from the main Uniwind package.

```typescript
import { ScopedTheme, LayoutDirection } from 'uniwind'
```

--------------------------------

### Configuring cssEntryFile Option

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/bundler-integration.md

Demonstrates the correct way to provide the `cssEntryFile` option when configuring Uniwind, contrasting it with an incorrect usage.

```typescript
// ✗ Wrong
withUniwindConfig(config, {})

// ✓ Correct
withUniwindConfig(config, {
  cssEntryFile: './src/global.css'
})
```

--------------------------------

### Generated Uniwind TypeScript Definitions

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/configuration.md

Example of generated TypeScript definitions for theme configuration. Ensure this file is included in your tsconfig.json.

```typescript
// src/types/uniwind.d.ts (or configured dtsFile)

declare global {
  var __uniwindThemes__: readonly ['light', 'dark', 'mint', 'sunset'] | undefined
}

export {}
```

--------------------------------

### withUniwindConfig Metro Plugin

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-index.md

Wraps Metro configuration with Uniwind support, enabling CSS compilation and style injection. It requires a CSS entry file path and accepts optional parameters like extra themes, polyfills, TV support, and DTS file path.

```APIDOC
## withUniwindConfig<T extends MetroConfig>(config: T, uniwindConfig: UniwindConfig)

### Description
Wraps Metro configuration with Uniwind support.

### Configuration
- `cssEntryFile: string` (required) — CSS entry file path
- `extraThemes?: string[]` — Additional theme names
- `polyfills?: boolean` — Enable runtime polyfills
- `isTV?: boolean` — Set to true for Apple TV/Android TV
- `dtsFile?: string` — Type definitions output path
```

--------------------------------

### Uniwind Singleton Instance

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-index.md

The global configuration instance for managing themes, CSS variables, and safe area insets. It provides methods to set themes, update CSS variables, update insets, and retrieve CSS variable values.

```APIDOC
## Uniwind

### Description
Global configuration instance for managing themes, CSS variables, and safe area insets.

### Type
`UniwindConfigBuilder`

### Properties
- `themes` (Array<ThemeName>) — Registered theme names
- `currentTheme` (ThemeName) — Currently active theme
- `hasAdaptiveThemes` (boolean) — Whether following system theme

### Methods
- `setTheme(theme: ThemeName | 'system'): void` — Switch theme
- `updateCSSVariables(theme: ThemeName, variables: CSSVariables): void` — Update CSS variables (web)
- `updateInsets(insets: Insets): void` — Update safe area insets (native)
- `getCSSVariable(name: string | Array<string>): unknown` — Get CSS variable value
```

--------------------------------

### Uniwind Project File Structure

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/INDEX.md

This snippet illustrates the directory structure of the Uniwind project, showing the location of key documentation files and source code modules.

```bash
output/
├── INDEX.md                              ← You are here
├── README.md                             ← Start here for overview
├── ANALYSIS_SUMMARY.md                   ← Technical analysis summary
├── api-index.md                          ← Complete API index
├── api-reference/
│   ├── uniwind-config.md                 ← Runtime configuration
│   ├── hooks.md                          ← React hooks
│   ├── components.md                     ← Components (layout + wrapped)
│   ├── higher-order-component.md         ← withUniwind HOC
│   └── bundler-integration.md            ← Vite and Metro plugins
├── types.md                              ← Type reference
└── configuration.md                      ← Setup and configuration

```

--------------------------------

### Automatic Style Merging Example

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/higher-order-component.md

Illustrates how Uniwind automatically merges Tailwind-resolved styles with inline `style` props for `View` components.

```typescript
// Automatic merging
<View
  className="bg-blue-500 flex-1"
  style={{ margin: 10 }}
/>
// Results in: style={[{ backgroundColor: '#3b82f6', flex: 1 }, { margin: 10 }]}
```

--------------------------------

### Applying Scoped Themes with ScopedTheme

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/README.md

Demonstrates how to apply a specific theme to a subset of components using the ScopedTheme component. Requires importing ScopedTheme, View, and Text.

```typescript
import { ScopedTheme, View, Text } from 'uniwind'

export function ThemedSection() {
  return (
    <View>
      <Text>Light theme</Text>
      
      <ScopedTheme theme="dark">
        <View className="bg-gray-900 p-4">
          <Text className="text-white">Dark theme</Text>
        </View>
      </ScopedTheme>
    </View>
  )
}
```

--------------------------------

### Get CSS Variable API

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/ANALYSIS_SUMMARY.md

API method to retrieve the value of a CSS variable. Useful for dynamic styling or theme-aware logic.

```javascript
Uniwind.getCSSVariable()
```

--------------------------------

### View Component Props with Uniwind

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-index.md

Example of Uniwind's className extensions for the View component, including general className and specific contentContainerClassName.

```typescript
interface ViewProps {
  className?: string
  contentContainerClassName?: string
  style?: ViewStyle
  // ... all original RNView props
}
```

--------------------------------

### Accessing Available Themes at Runtime

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/configuration.md

View the list of all available themes, including default and custom ones, registered with Uniwind.

```typescript
import { Uniwind } from 'uniwind'

Uniwind.themes // ['light', 'dark', 'mint', 'sunset', 'highContrast']
```

--------------------------------

### Basic View Component Styling

Source: https://github.com/uni-stack/uniwind/blob/main/skills/uniwind/SKILL.md

Demonstrates basic layout and text styling for a View component using Uniwind classes.

```tsx
import { View, Text } from 'react-native';

// View — basic layout
<View className="flex-1 bg-background p-4">
  <Text className="text-foreground text-lg font-bold">Title</Text>
</View>
```

--------------------------------

### Text Component Props with Uniwind

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-index.md

Example of Uniwind's className extensions for the Text component, including general className and specific selectionColorClassName.

```typescript
interface TextProps {
  className?: string
  selectionColorClassName?: string
  style?: ViewStyle
  // ... all original RNText props
}
```

--------------------------------

### Automatic Color Extraction Example

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/higher-order-component.md

Shows how `withUniwind` automatically extracts color values from classNames and applies them to color-related props like `tintColor`.

```typescript
<Image
  tintColorClassName="accent-red-500"
  // Automatically extracts color and applies:
  // tintColor={formatColor('#ef4444')}
/>
```

--------------------------------

### Bundler Integration

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/ANALYSIS_SUMMARY.md

Plugins for Vite and Metro bundlers to integrate Uniwind's build-time CSS compilation.

```APIDOC
## Bundler Integration

### Description
Plugins designed to integrate Uniwind's build-time CSS compilation process into popular JavaScript bundlers.

### Plugins
- `uniwind()`: Vite plugin that integrates with Lightning CSS for CSS compilation.
- `withUniwindConfig()`: Metro plugin for React Native bundler integration.
```

--------------------------------

### Configure Uniwind with Vite

Source: https://github.com/uni-stack/uniwind/blob/main/skills/uniwind/SKILL.md

Integrate Uniwind into your Vite build process, compatible with v1.2.0 and later. This setup is particularly useful if you are using Storybook.

```typescript
import tailwindcss from '@tailwindcss/vite';
import { uniwind } from 'uniwind/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    tailwindcss(),
    uniwind({
      cssEntryFile: './src/global.css',
      dtsFile: './src/uniwind-types.d.ts',
    }),
  ],
});
```

--------------------------------

### Configure Uniwind with Metro

Source: https://github.com/uni-stack/uniwind/blob/main/skills/uniwind/SKILL.md

Set up Uniwind for your Metro bundler. Ensure withUniwindConfig is the outermost wrapper. Specify the CSS entry file and optional configurations like rem units, custom themes, and type definitions.

```javascript
const { getDefaultConfig } = require('expo/metro-config');
// Bare RN: const { getDefaultConfig } = require('@react-native/metro-config');
const { withUniwindConfig } = require('uniwind/metro');

const config = getDefaultConfig(__dirname);

// withUniwindConfig MUST be the OUTERMOST wrapper
module.exports = withUniwindConfig(config, {
  cssEntryFile: './global.css',           // Required — relative path from project root
  polyfills: { rem: 16 },                // Optional — base rem value (default 16)
  extraThemes: ['ocean', 'sunset'],       // Optional — custom themes beyond light/dark
  dtsFile: './uniwind-types.d.ts',        // Optional — TypeScript types output path
  debug: true,                            // Optional — log unsupported CSS in dev
  isTV: false,                            // Optional — enable TV platform support
});
```

--------------------------------

### Reactive Theme Hook

Source: https://github.com/uni-stack/uniwind/blob/main/skills/uniwind/SKILL.md

Use the useUniwind hook to get the current theme and adaptive theme status, causing re-renders when the theme changes.

```typescript
import { Uniwind, useUniwind } from 'uniwind';

// Reactive hook (re-renders on change)
const { theme, hasAdaptiveThemes } = useUniwind();
```

--------------------------------

### Generic Usage Pattern: Styled Button

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/components.md

Demonstrates a generic usage pattern for creating a styled button using Pressable, Text, and state management.

```typescript
import { View, Text, Pressable } from 'uniwind/components'
import { useState } from 'react'

export function StyledButton() {
  const [isPressed, setIsPressed] = useState(false)
  
  return (
    <Pressable
      className={isPressed ? 'bg-red-600' : 'bg-red-500'}
      onPressIn={() => setIsPressed(true)}
      onPressOut={() => setIsPressed(false)}
    >
      <Text className="text-white font-bold text-center">Press me</Text>
    </Pressable>
  )
}
```

--------------------------------

### Uniwind Context Integration

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/hooks.md

Shows how to import and use the `UniwindContext` and `useUniwindContext` for managing Uniwind's theming and layout direction.

```typescript
import { UniwindContext, useUniwindContext } from 'uniwind/core'
```

--------------------------------

### Update CSS Variables at Runtime

Source: https://github.com/uni-stack/uniwind/blob/main/skills/uniwind/SKILL.md

Update theme-specific CSS variables at runtime, for example, to implement user-selected themes. Updates take effect immediately.

```tsx
Uniwind.updateCSSVariables('light', {
  '--color-primary': '#ff6600',
  '--color-background': '#fafafa',
});
```

--------------------------------

### useUniwind()

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/hooks.md

Returns the current theme and adaptive theme state. It automatically subscribes to theme changes and updates when the theme or adaptive theme setting changes.

```APIDOC
## useUniwind()

### Description
A hook that returns the current theme and adaptive theme state. Automatically subscribes to theme changes and updates when the theme or adaptive theme setting changes.

### Signature
```typescript
useUniwind(): { theme: ThemeName; hasAdaptiveThemes: boolean }
```

### Returns

| Field | Type | Description |
|-------|------|-------------|
| `theme` | `ThemeName` | Current active theme name. Returns scoped theme if within `ScopedTheme` component, otherwise global theme. |
| `hasAdaptiveThemes` | `boolean` | Whether themes are currently adaptive (following system). Always `false` if inside `ScopedTheme`. |

### Behavior

- Subscribes to theme and adaptive theme changes automatically
- Returns scoped theme if component is wrapped in `ScopedTheme`, ignoring global theme
- Returns `hasAdaptiveThemes: false` inside `ScopedTheme` regardless of global setting
- Unsubscribes on unmount

### Example

```typescript
import { useUniwind } from 'uniwind'
import { Text, View } from 'react-native'

export function ThemeDisplay() {
  const { theme, hasAdaptiveThemes } = useUniwind()
  
  return (
    <View>
      <Text className={theme === 'dark' ? 'text-white' : 'text-black'}>
        Current Theme: {theme}
      </Text>
      {hasAdaptiveThemes && (
        <Text className="text-gray-500">Following system theme</Text>
      )}
    </View>
  )
}
```
```

--------------------------------

### InputAccessoryView Styling

Source: https://github.com/uni-stack/uniwind/blob/main/skills/uniwind/SKILL.md

Demonstrates styling for InputAccessoryView, including background color and padding, with a Button inside.

```tsx
import { InputAccessoryView, Button } from 'react-native';

// InputAccessoryView
<InputAccessoryView
  className="p-4 border-t border-gray-300"
  backgroundColorClassName="accent-white dark:accent-gray-800"
>
  <Button title="Done" onPress={dismissKeyboard} />
</InputAccessoryView>
```

--------------------------------

### Get Stringified Themes

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/bundler-integration.md

Returns a string representation of the registered themes, suitable for injection into JavaScript bundles. This allows runtime access to theme names.

```typescript
console.log(config.stringifiedThemes) // "['light', 'dark', 'custom']"

```

--------------------------------

### Defining CSS Variables in Entry File

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/configuration.md

Example of defining theme-specific CSS variables within the CSS entry file. These variables can be accessed and updated at runtime.

```css
/* src/global.css */

.light {
  --primary-color: #3b82f6;
  --secondary-color: #ef4444;
  --spacing-unit: 0.25rem;
}

.dark {
  --primary-color: #1e40af;
  --secondary-color: #dc2626;
  --spacing-unit: 0.25rem;
}
```

--------------------------------

### Wrap Components Locally with withUniwind

Source: https://github.com/uni-stack/uniwind/blob/main/skills/migrate-nativewind-to-uniwind/SKILL.md

When a component is used only within a single file, define the wrapped component at the module level within that same file. Ensure each component is wrapped only once.

```tsx
// screens/ProfileScreen.tsx
import { withUniwind } from 'uniwind';
import { BlurView as RNBlurView } from '@react-native-community/blur';

const BlurView = withUniwind(RNBlurView);

export function ProfileScreen() {
  return <BlurView className="flex-1" />;
}
```

--------------------------------

### Combining with State for Dynamic Styling

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/higher-order-component.md

Shows how to use `withUniwind` with state management to dynamically apply class names based on component state, such as a pressed state for a button.

```typescript
import { withUniwind } from 'uniwind'
import { useState } from 'react'

const Pressable = withUniwind(RNPressable)

export function InteractiveButton() {
  const [isPressed, setIsPressed] = useState(false)
  
  return (
    <Pressable
      className={isPressed ? 'bg-red-600' : 'bg-red-500'}
      onPressIn={() => setIsPressed(true)}
      onPressOut={() => setIsPressed(false)}
    >
      <Text>Press me</Text>
    </Pressable>
  )
}
```

--------------------------------

### Manual Mode: Extract Specific Style Property

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/higher-order-component.md

Example of configuring `withUniwind` to extract specific style properties like `fontSize` and `color` from custom classNames.

```typescript
const CustomText = withUniwind(Text, {
  // Extract fontSize from className and apply to fontSize prop
  fontSize: {
    fromClassName: 'fontSizeClassName',
    styleProperty: 'fontSize'
  },
  // Extract color and apply to color prop
  color: {
    fromClassName: 'colorClassName',
    styleProperty: 'color'
  }
})

<CustomText
  fontSizeClassName="text-lg"
  colorClassName="text-red-500"
/>
```

--------------------------------

### Get Registered Themes

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/bundler-integration.md

Retrieves an array of all registered theme names, including defaults and any extra themes configured. Useful for debugging or dynamic theme handling.

```typescript
const config = UniwindBundlerConfig.fromViteConfig({ cssEntryFile: './src/global.css', extraThemes: ['custom'] })
console.log(config.themes) // ['light', 'dark', 'custom']

```

--------------------------------

### useCSSVariable — Access CSS Variables in JS

Source: https://github.com/uni-stack/uniwind/blob/main/skills/migrate-nativewind-to-uniwind/SKILL.md

Retrieve CSS variable values programmatically. The variable name must start with `--` and be defined in `global.css`.

```APIDOC
## useCSSVariable — Access CSS Variables in JS

Docs: https://docs.uniwind.dev/api/use-css-variable

Retrieve CSS variable values programmatically. Variable must be prefixed with `--` and match a variable defined in `global.css`:

```tsx
import { useCSSVariable } from 'uniwind';

const primaryColor = useCSSVariable('--color-primary');
const spacing = useCSSVariable('--spacing-4');
```

Use for: animations, third-party library configs, calculations with design tokens.
```

--------------------------------

### Configuration Options

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/GENERATION_REPORT.txt

Details the configuration options available for customizing Uniwind's behavior, including theme management, polyfills, and build-time settings.

```APIDOC
## Configuration Options

Uniwind offers several configuration options to tailor its behavior to your project's needs.

- **`cssEntryFile`**: Specifies the entry file for CSS processing.
- **`extraThemes`**: An array to include additional theme definitions.
- **`polyfills`**: Configuration for polyfills to ensure compatibility.
- **`dtsFile`**: Path to the generated DTS (TypeScript declaration) file.
- **`isTV`**: A boolean flag to indicate if the target platform is a TV.
```

--------------------------------

### Implementing RTL Layout Direction

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/README.md

Shows how to enable Right-To-Left (RTL) layout direction for multi-language support using the LayoutDirection component. Requires importing LayoutDirection, View, and Text.

```typescript
import { LayoutDirection, View, Text } from 'uniwind'

export function MultiLanguageApp() {
  return (
    <LayoutDirection rtl={isRTL}>
      <View className="flex-row gap-4">
        <Text>Text that respects direction</Text>
      </View>
    </LayoutDirection>
  )
}
```

--------------------------------

### Metro Plugin Configuration

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/bundler-integration.md

Wrap your Metro configuration with the `withUniwindConfig` function, providing the Uniwind configuration options such as the CSS entry file, extra themes, and polyfill settings.

```javascript
// metro.config.js
import { getDefaultConfig } from '@react-native/metro-config'
import { withUniwindConfig } from 'uniwind/metro'

const config = getDefaultConfig(__dirname)

export default withUniwindConfig(config, {
  cssEntryFile: './src/global.css',
  extraThemes: ['custom'],
  polyfills: true,
  isTV: false // Set true if building for TV
})
```

--------------------------------

### Access CSS Variables with useCSSVariable

Source: https://github.com/uni-stack/uniwind/blob/main/skills/migrate-nativewind-to-uniwind/SKILL.md

Retrieve CSS variable values programmatically using the `useCSSVariable` hook. The variable name must start with `--` and be defined in `global.css`.

```tsx
import { useCSSVariable } from 'uniwind';

const primaryColor = useCSSVariable('--color-primary');
const spacing = useCSSVariable('--spacing-4');
```

--------------------------------

### Nested Named Group Variants Example

Source: https://github.com/uni-stack/uniwind/blob/main/skills/uniwind/SKILL.md

Shows nested groups ('group/card' and 'group/button') where descendants can target specific ancestor states using named variants like 'group-active/card:*'.

```tsx
// Named groups — descendants pick which ancestor to follow
<Pressable className="group/card p-4 bg-base rounded-xl">
  <Pressable className="group/button px-3 py-1 bg-primary rounded">
    <Text className="text-white group-active/card:opacity-50 group-active/button:font-bold">
      Nested groups
    </Text>
  </Pressable>
</Pressable>
```

--------------------------------

### Vite Plugin Import and Configuration

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/bundler-integration.md

Import the Vite plugin and configure it within your Vite configuration file. Specify the CSS entry file, extra themes, polyfills, and the TypeScript definition file path.

```typescript
import { uniwind } from 'uniwind/vite'

export default defineConfig({
  plugins: [
    uniwind({
      cssEntryFile: './src/global.css',
      extraThemes: ['custom'],
      polyfills: true,
      dtsFile: 'uniwind-types.d.ts'
    })
  ]
})
```

--------------------------------

### Basic Signature of withUniwind

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/higher-order-component.md

Illustrates the two primary modes of the `withUniwind` HOC: automatic mapping and manual mapping with custom options.

```typescript
type WithUniwind = {
  // Auto mapping mode
  <TComponent extends Component<any>>(
    Component: TComponent
  ): (props: ApplyUniwind<ComponentPropsWithRef<TComponent>>) => React.ReactNode
  
  // Manual mapping mode
  <TComponent extends Component<any>, const TOptions extends Record<string, OptionMapping>>(
    Component: TComponent,
    options: TOptions
  ): (props: ApplyUniwindOptions<ComponentPropsWithRef<TComponent>, TOptions>) => React.ReactNode
}
```

--------------------------------

### tailwind-variants (tv) Setup and Usage

Source: https://github.com/uni-stack/uniwind/blob/main/skills/uniwind/SKILL.md

Define complex component styles with variants and compound variants using tailwind-variants. Apply styles by calling the generated function with variant props.

```tsx
import { tv } from 'tailwind-variants';

const button = tv({
  base: 'font-semibold rounded-lg px-4 py-2 items-center justify-center',
  variants: {
    color: {
      primary: 'bg-blue-500 text-white',
      secondary: 'bg-gray-500 text-white',
      danger: 'bg-red-500 text-white',
      ghost: 'bg-transparent text-foreground border border-border',
    },
    size: {
      sm: 'text-sm px-3 py-1.5',
      md: 'text-base px-4 py-2',
      lg: 'text-lg px-6 py-3',
    },
    disabled: {
      true: 'opacity-50',
    },
  },
  compoundVariants: [
    { color: 'primary', size: 'lg', class: 'bg-blue-600' },
  ],
  defaultVariants: { color: 'primary', size: 'md' },
});

<Pressable className={button({ color: 'primary', size: 'lg' })}>
  <Text className="text-white font-semibold">Click</Text>
</Pressable>
```

--------------------------------

### Tailwind CSS Directives in CSS

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/configuration.md

Include Tailwind CSS base, component, and utility directives in your main CSS file. This setup is essential for Tailwind to process your styles correctly.

```css
/* src/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

--------------------------------

### Creating Styled Components for Libraries with Uniwind HOC

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/higher-order-component.md

Build your own component library by using the `withUniwind` HOC to create styled versions of basic UI elements like `View` and `Pressable`. This enables consistent styling across your application.

```typescript
// components/Card.tsx
import { withUniwind } from 'uniwind'
import { View } from 'react-native'

export const Card = withUniwind(View)

// components/Button.tsx
import { withUniwind } from 'uniwind'
import { Pressable } from 'react-native'

export const Button = withUniwind(Pressable)
```

--------------------------------

### Use CSS Variable Hook

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/ANALYSIS_SUMMARY.md

React hook to get CSS variable values. Supports overloads for single or multiple variable retrieval, enabling dynamic style application.

```javascript
useCSSVariable()
```

--------------------------------

### Use Variable-Driven Utility

Source: https://github.com/uni-stack/uniwind/blob/main/skills/uniwind/SKILL.md

Apply the custom padding utility created with a variable-driven approach.

```tsx
<View className="p-safe-header flex-1" />
```

--------------------------------

### Get CSS Variable Value

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/uniwind-config.md

Retrieves the value of a CSS variable for the current theme. Returns undefined if the variable is not found. In development mode, logs a warning if a variable is not found.

```typescript
import { Uniwind } from 'uniwind'

const primaryColor = Uniwind.getCSSVariable('--primary-color')
// Returns: '#3b82f6' on web, '3b82f6' or number on native

const [primary, secondary] = Uniwind.getCSSVariable(['--primary-color', '--secondary-color'])
// Returns: ['#3b82f6', '#ef4444']
```

--------------------------------

### Get Current Theme

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/uniwind-config.md

Access the name of the currently active theme. This will reflect the system's color scheme if adaptive themes are enabled, or the manually set theme otherwise.

```typescript
const activeTheme = Uniwind.currentTheme // 'light' or 'dark' or custom theme
```

--------------------------------

### Custom Component with Multiple Style Props

Source: https://github.com/uni-stack/uniwind/blob/main/_autodocs/api-reference/higher-order-component.md

Demonstrates creating a custom component with multiple style props (`containerStyle`, `contentStyle`, `headerStyle`) that can be controlled via Tailwind CSS class names using `withUniwind`.

```typescript
import { withUniwind } from 'uniwind'
import { View, StyleSheet, Animated } from 'react-native'

interface CustomCardProps {
  title: string
  containerStyle?: StyleProp<ViewStyle>
  contentStyle?: StyleProp<ViewStyle>
  headerStyle?: StyleProp<ViewStyle>
}

const CustomCard = withUniwind(
  ({ title, containerStyle, contentStyle, headerStyle, children }: CustomCardProps) => (
    <View style={containerStyle}>
      <View style={headerStyle}>
        <Text>{title}</Text>
      </View>
      <View style={contentStyle}>
        {children}
      </View>
    </View>
  ),
  {
    containerStyle: {
      fromClassName: 'containerClassName'
    },
    contentStyle: {
      fromClassName: 'contentClassName'
    },
    headerStyle: {
      fromClassName: 'headerClassName'
    }
  }
)

// Usage
<CustomCard
  title="Card Title"
  containerClassName="bg-white rounded-lg shadow-lg"
  headerClassName="bg-blue-500 p-4"
  contentClassName="p-4"
>
  {/* content */}
</CustomCard>
```