Uniwind

https://docs.uniwind.dev
Admin
Uniwind provides the fastest Tailwind CSS bindings for React Native, enabling developers to style...
Tokens:217,618
Snippets:2,046
Trust Score:5.9
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install Uniwind Pro via CLI

Source: https://docs.uniwind.dev/pro/installation

Select the 'Install Uniwind Pro' option from the interactive CLI menu to fetch and install the package.

```text
? Hello @your-username, what would you like to do?
  Your session is valid for the next 179 days
────────────────────────────────────────────
  Manage your account
❯ Install Uniwind Pro
  Logout
  Exit
```

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

### Install Uniwind and Tailwind with npm

Source: https://docs.uniwind.dev/quickstart

Install Uniwind and Tailwind 4 using npm.

```bash
npm install uniwind tailwindcss

```

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

### Install Uniwind and Tailwind with yarn

Source: https://docs.uniwind.dev/quickstart

Install Uniwind and Tailwind 4 using yarn.

```bash
yarn add uniwind tailwindcss

```

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

### global.css: CSS entry file example

Source: https://docs.uniwind.dev/api/generate-artifacts

Example CSS entry file that imports Tailwind and Uniwind. The `--css` option should point to this file.

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

```

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

### Install Uniwind and Tailwind with pnpm

Source: https://docs.uniwind.dev/quickstart

Install Uniwind and Tailwind 4 using pnpm.

```bash
pnpm add uniwind tailwindcss

```

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

### Install peer dependencies with bun

Source: https://docs.uniwind.dev/pro/installation

Installs required peer dependencies using bun. The first installation attempt will fail until you are authorized.

```bash
bun add react-native-nitro-modules react-native-reanimated react-native-worklets
```

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

### Install iOS Pods

Source: https://docs.uniwind.dev/migrate-to-pro

Install native dependencies for iOS after a rebuild.

```bash
cd ios && pod install && cd ..
```

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

### Install Uniwind skills via npx

Source: https://docs.uniwind.dev/skills

Use this command to auto-detect and install all available Uniwind skills into your project.

```bash
npx skills add uni-stack/uniwind
```

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

### Install Uniwind and Tailwind with bun

Source: https://docs.uniwind.dev/quickstart

Install Uniwind and Tailwind 4 using the bun package manager. Uniwind only supports Tailwind 4.

```bash
bun add uniwind tailwindcss

```

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

### Install tailwind-merge and clsx with bun

Source: https://docs.uniwind.dev/faq

Install the tailwind-merge and clsx packages using the bun package manager.

```bash
bun add tailwind-merge clsx

```

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

### Install react-native-safe-area-context with bun, npm, or yarn

Source: https://docs.uniwind.dev/llms-full.txt

Install the react-native-safe-area-context package using your preferred package manager. Choose the command that matches your project's package manager.

```bash
bun add react-native-safe-area-context
```

```bash
npm install react-native-safe-area-context
```

```bash
yarn add react-native-safe-area-context
```

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

### Debug output example

Source: https://docs.uniwind.dev/api/metro-config

Example warning output when debug mode is enabled. It indicates an unsupported unit 'ch' in a class like w-[10ch].

```text
Uniwind Warning [Units Processor] - Unsupported unit - ch
```

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

### Delay modifier class example

Source: https://docs.uniwind.dev/pro/reanimated-animations

Shows how to add a delay before an animation starts using `uw-{type}-delay-{value}` classes. The example fades in after a 500ms delay.

```jsx
// Fade in after 500ms delay
<View className="uw-entering-fade-in uw-entering-delay-500" />

```

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

### Desktop-first approach (not recommended)

Source: https://docs.uniwind.dev/breakpoints

Shows a discouraged desktop-first styling pattern using lg:, md:, and sm: prefixes. This is presented as a 'Don't' example to avoid.

```jsx
import { View } from 'react-native'

// Desktop-first approach (not recommended)
<View className="w-full lg:w-1/2 md:w-3/4 sm:w-full">
  {/* Content */}
</View>

```

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

### Delay animation start with uw-{type}-delay classes

Source: https://docs.uniwind.dev/llms-full.txt

Add a delay before an animation starts using `uw-{type}-delay-{value}`. Preset values range from 75ms to 1000ms, and arbitrary integers are supported. The example delays a fade-in by 500ms.

```tsx
// Fade in after 500ms delay
<View className="uw-entering-fade-in uw-entering-delay-500" />
```

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

### Using useCSSVariable with LinearGradient

Source: https://docs.uniwind.dev/faq

This example shows the recommended approach: use multiple useCSSVariable calls to get color values and pass them to the colors array of LinearGradient.

```jsx
import { LinearGradient } from 'expo-linear-gradient'
import { useCSSVariable } from 'uniwind'

export const GradientComponent = () => {
  const startColor = useCSSVariable('--color-indigo-500')
  const midColor = useCSSVariable('--color-pink-200')
  const endColor = useCSSVariable('--color-pink-500')

  return (
    <LinearGradient colors={[startColor, midColor, endColor]}/>
  )
}
```

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

### Mobile-first approach (recommended)

Source: https://docs.uniwind.dev/breakpoints

Shows the recommended mobile-first styling pattern, starting with no prefix and then using sm:, md:, and lg: to progressively enhance for larger screens.

```jsx
import { View } from 'react-native'

// Mobile-first approach (recommended)
<View className="w-full sm:w-3/4 md:w-1/2 lg:w-1/3">
  {/* Content */}
</View>

```

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

### Install peer dependencies with pnpm

Source: https://docs.uniwind.dev/pro/installation

Installs required peer dependencies using pnpm. The first installation attempt will fail until you are authorized.

```bash
pnpm add react-native-nitro-modules react-native-reanimated react-native-worklets
```

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

### Install peer dependencies with yarn

Source: https://docs.uniwind.dev/pro/installation

Installs required peer dependencies using yarn. The first installation attempt will fail until you are authorized.

```bash
yarn add react-native-nitro-modules react-native-reanimated react-native-worklets
```

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

### Not Recommended: Platform.select() Example

Source: https://docs.uniwind.dev/api/platform-select

Shows the verbose `Platform.select()` approach for platform-specific styles. Requires importing the `Platform` API and is less readable when multiple conditions are needed.

```jsx
import { Platform } from 'react-native'
import { View } from 'react-native'

<View
  className={Platform.select({
    ios: 'bg-red-500',
    android: 'bg-blue-500',
  })}
/>

```

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

### Install peer dependencies with npm

Source: https://docs.uniwind.dev/pro/installation

Installs required peer dependencies using npm. The first installation attempt will fail until you are authorized.

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

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

### Scaffold a new project with Uniwind starter templates

Source: https://docs.uniwind.dev/llms-full.txt

Use a starter template to scaffold a new project with Uniwind. Two templates are available: better-t-stack and create-expo-app.

```bash
npx create-better-t-stack@latest --template uniwind
```

```bash
npx create-expo-app -e with-router-uniwind
```

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

### isTV configuration example

Source: https://docs.uniwind.dev/api/metro-config

Enables TV platform support for Apple TV and Android TV. Recognizes tv:, apple-tv:, and android-tv: selectors and @variant directives.

```javascript
module.exports = withUniwindConfig(config, {
  cssEntryFile: './src/global.css',
  isTV: true,
});
```

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

### Create Uniwind starter template with better-t-stack

Source: https://docs.uniwind.dev/quickstart

Scaffolds a new project using the better-t-stack template with Uniwind preconfigured.

```bash
npx create-better-t-stack@latest --template uniwind

```

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

### Complete Uniwind Metro configuration example

Source: https://docs.uniwind.dev/api/metro-config

Full example showing all Uniwind Metro configuration options: cssEntryFile (required), extraThemes, dtsFile, polyfills, isTV, and debug. Includes custom themes, TypeScript definitions path, rem polyfill base size, TV support, and debug mode.

```javascript
const { getDefaultConfig } = require('expo/metro-config');
const { withUniwindConfig } = require('uniwind/metro');

const config = getDefaultConfig(__dirname);

// Your custom Metro modifications
// ...

module.exports = withUniwindConfig(config, {
  // Required: Path to your CSS entry file
  cssEntryFile: './src/global.css',

  // Optional: Custom themes beyond light/dark
  extraThemes: ['ocean', 'sunset', 'premium', 'high-contrast'],

  // Optional: TypeScript definitions path
  dtsFile: './src/uniwind-types.d.ts',

  // Optional: CSS polyfills
  polyfills: {
    rem: 14, // Custom rem base size
  },

  // Optional: Enable TV platform support
  isTV: false,

  // Optional: Enable debug mode for troubleshooting
  debug: true,
});
```

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

### Basic Usage: ResponsiveCard component with breakpoint prefixes

Source: https://docs.uniwind.dev/breakpoints

Example component using breakpoint prefixes (sm:, lg:) to apply responsive padding and text sizes. On screens < 640px uses p-4 and text-base; on screens ≥ 640px uses p-6 and text-lg; on screens ≥ 1024px uses p-8 and text-xl.

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

export const ResponsiveCard = () => (
  <View className="p-4 sm:p-6 lg:p-8 bg-white rounded-lg">
    <Text className="text-base sm:text-lg lg:text-xl font-bold">
      Responsive Typography
    </Text>
    <Text className="text-sm sm:text-base lg:text-lg text-gray-600">
      This text size adapts to screen width
    </Text>
  </View>
)
```

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

### Toggle Example

Source: https://docs.uniwind.dev/api/data-selectors

Example of using data selectors for a toggle component.

```javascript
import { Pressable, View } from 'react-native'

<Pressable
  data-checked={enabled}
  className="
    h-6 w-10 rounded-full bg-muted
    data-[checked=true]:bg-primary
  "
>
  <View
    className="h-5 w-5 rounded-full bg-background translate-x-0 data-[checked=true]:translate-x-4"
  />
</Pressable>
```

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

### Tabs Example

Source: https://docs.uniwind.dev/api/data-selectors

Example of using data selectors for tab selection states.

```javascript
import { Pressable, Text } from 'react-native'

<Pressable
  data-selected={route.key === current}
  className="
    px-4 py-2 rounded-md text-foreground/60
    data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground
  "
>
  <Text>{route.title}</Text>
</Pressable>
```

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

### Usage reference for generate-artifacts

Source: https://docs.uniwind.dev/api/generate-artifacts

Shows the full command syntax with placeholders for CSS file, theme names, and dts file.

```bash
uniwind generate-artifacts --css <file> [--theme <name>...] [--dts <file>]

```

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

### package.json example for Team License project matching

Source: https://docs.uniwind.dev/pro/team-license

Shows the required package.json structure. The 'name' field must exactly match the project name in the dashboard, and matching is case-sensitive.

```json
{
  "name": "my-awesome-app",  // This must match your project name in the dashboard
  "version": "1.0.0"
}
```

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

### Show help for generate-artifacts

Source: https://docs.uniwind.dev/api/generate-artifacts

Displays help for the `generate-artifacts` command.

```bash
uniwind generate-artifacts --help

```

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

### RefreshControl Usage Example

Source: https://docs.uniwind.dev/components/refresh-control

Example of using RefreshControl with Uniwind className props for styling.

```APIDOC
## RefreshControl

### Description
Provides pull-to-refresh functionality for ScrollView and FlatList. Uniwind provides className prop support for styling this component.

### Styling Convention
- For `style` props: Use regular Tailwind classes directly (e.g., `className="p-4"`).
- For non-style props (like `tintColor`): Use the `accent-` prefix (e.g., `tintColorClassName="accent-blue-500"`).
- Since 1.6.2: Passing a className without the `accent-` prefix to a color prop will log a warning to the development console.

### Uniwind Bindings

#### className
- Type: `string`
- Maps to the `style` prop. Use any Tailwind utility classes.

#### colorsClassName
- Type: `string`
- Maps to the `colors` prop (Android only). The resolved color is passed as a single-item array. Requires `accent-` prefix for color values.

#### tintColorClassName
- Type: `string`
- Maps to the `tintColor` prop (iOS only). Requires `accent-` prefix for color values.

#### titleColorClassName
- Type: `string`
- Maps to the `titleColor` prop (iOS only). Requires `accent-` prefix for color values.

#### progressBackgroundColorClassName
- Type: `string`
- Maps to the `progressBackgroundColor` prop (Android only). Requires `accent-` prefix for color values.

### Usage Example
```jsx
import { ScrollView, RefreshControl } from 'react-native'

<ScrollView
  refreshControl={
    <RefreshControl
      refreshing={refreshing}
      onRefresh={onRefresh}
      tintColorClassName="accent-blue-500"
      colorsClassName="accent-blue-500"
      progressBackgroundColorClassName="accent-white dark:accent-gray-800"
    />
  }
>
  {/* Content */}
</ScrollView>
```
```

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

### InputAccessoryView Usage Example

Source: https://docs.uniwind.dev/components/input-accessory-view

Example of using InputAccessoryView with Uniwind className and backgroundColorClassName props.

```APIDOC
## InputAccessoryView

### Description
Displays a custom view above the keyboard on iOS. Supports styling via className and backgroundColorClassName.

### Props

#### className
- Type: string
- Maps to the `style` prop. Use any Tailwind utility classes.

#### backgroundColorClassName
- Type: string
- Maps to the `backgroundColor` prop (native only). Requires `accent-` prefix for color values.

### Usage Example
```jsx
import { InputAccessoryView, Button } from 'react-native'

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

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

### VirtualizedList Usage Example

Source: https://docs.uniwind.dev/llms-full.txt

An example of using the VirtualizedList component with Uniwind className props for styling.

```APIDOC
## VirtualizedList Usage Example

### Description
Example of using the VirtualizedList component with Uniwind className props.

### Component
VirtualizedList

### Props
- **className** (string) - Maps to the `style` prop. Use any Tailwind utility classes.
- **contentContainerClassName** (string) - Maps to the `contentContainerStyle` prop. Use regular Tailwind classes (no `accent-` prefix needed).
- **endFillColorClassName** (string) - Maps to the `endFillColor` prop. Requires `accent-` prefix for color values.
- **ListFooterComponentClassName** (string) - Maps to the `ListFooterComponentStyle` prop. Use regular Tailwind classes (no `accent-` prefix needed).
- **ListHeaderComponentClassName** (string) - Maps to the `ListHeaderComponentStyle` prop. Use regular Tailwind classes (no `accent-` prefix needed).

### Usage Example
```tsx
import { VirtualizedList, Text } from 'react-native'

<VirtualizedList
  data={items}
  getItem={(data, index) => data[index]}
  getItemCount={(data) => data.length}
  renderItem={({ item }) => <Text className="p-4">{item.name}</Text>}
  className="flex-1"
  contentContainerClassName="p-4"
  endFillColorClassName="accent-gray-100 dark:accent-gray-900"
/>
```
```

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

### Example: Old tailwind.config.js

Source: https://docs.uniwind.dev/migration-from-nativewind

Shows the old tailwind.config.js file that should be deleted. All theme configuration should now be in global.css.

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./App.tsx'],
  presets: [require('nativewind/preset')],
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        gray: 'var(--color-gray)',
        typography: 'var(--color-typography)',
      },
    },
  },
  plugins: [],
}
```

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

### TextInput Usage Example

Source: https://docs.uniwind.dev/components/text-input

Example of using the TextInput component with className and color className bindings.

```APIDOC
## TextInput Component

### Description
A React Native component for text input with Uniwind className bindings for styling and color customization.

### Usage Example
```jsx
import { TextInput, View } from 'react-native'

<View className="p-4">
  <TextInput
    placeholder="Enter text..."
    className="border border-gray-300 rounded-lg p-3 text-base"
    cursorColorClassName="accent-blue-500"
    selectionColorClassName="accent-blue-200"
    placeholderTextColorClassName="accent-gray-400 dark:accent-gray-500"
    underlineColorAndroidClassName="accent-transparent"
  />
</View>
```

### Props

#### className
- **Type**: string
- **Description**: Maps to the `style` prop. Use any Tailwind utility classes.

#### cursorColorClassName
- **Type**: string
- **Description**: Maps to the `cursorColor` prop. Requires `accent-` prefix for color values.

#### selectionColorClassName
- **Type**: string
- **Description**: Maps to the `selectionColor` prop. Requires `accent-` prefix for color values.

#### placeholderTextColorClassName
- **Type**: string
- **Description**: Maps to the `placeholderTextColor` prop. Requires `accent-` prefix for color values.

#### selectionHandleColorClassName
- **Type**: string
- **Description**: Maps to the `selectionHandleColor` prop. Requires `accent-` prefix for color values.

#### underlineColorAndroidClassName
- **Type**: string
- **Description**: Maps to the `underlineColorAndroid` prop (Android only). Requires `accent-` prefix for color values.

### Styling Convention
- For `style` props: Use regular Tailwind classes directly (e.g., `className="p-4"`).
- For non-style props (like `color`): Use the `accent-` prefix (e.g., `colorClassName="accent-blue-500"`).
- Since 1.6.2: Passing a className without the `accent-` prefix to a color prop will log a warning to the development console.
```

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

### Platform-Specific Spacing Example

Source: https://docs.uniwind.dev/api/platform-select

Shows how to apply different top padding values for iOS, Android, and web using platform selectors.

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

export const PlatformSpacing = () => (
  <View className="ios:pt-12 android:pt-6 web:pt-4">
    <Text>Platform-specific top padding</Text>
  </View>
)
```

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

### FlatList Usage Example

Source: https://docs.uniwind.dev/components/flat-list

Example of using the FlatList component with Uniwind className bindings for styling.

```APIDOC
## FlatList Usage Example

### Description
Example of using the FlatList component with Uniwind className bindings for styling.

### Code Example
```jsx
import { FlatList, Text } from 'react-native'

<FlatList
  data={items}
  renderItem={({ item }) => <Text>{item.name}</Text>}
  className="flex-1"
  contentContainerClassName="p-4 gap-2"
  endFillColorClassName="accent-gray-100 dark:accent-gray-900"
/>
```
```
Tokens:
Raw