Skip to main content

​
Overview

Uniwind provides built-in platform selectors that allow you to apply styles conditionally based on the platform your app is running on. This is essential for creating platform-specific user experiences in React Native.
Platform selectors are resolved at runtime and automatically apply the correct styles for the current platform.

​
Basic Usage

Use platform selectors directly in your className prop with the syntax platform:utility: 
import { View, Text } from 'react-native'

export const PlatformExample = () => (
  <View className="ios:bg-red-500 android:bg-blue-500 web:bg-green-500">
    <Text className="ios:text-white android:text-white web:text-black">
      This component has different styles on each platform
    </Text>
  </View>
)

​
Why Use Platform Selectors?

Platform selectors are superior to React Native’s Platform.select() API for several reasons:

​
❌ Not Recommended: Platform.select()

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

<View
  className={Platform.select({
    ios: 'bg-red-500',
    android: 'bg-blue-500',
  })}
/>
Downsides:
  • Requires importing Platform API
  • More verbose syntax
  • Cannot combine with other utilities easily
  • Less readable when multiple platform conditions are needed

​
✅ Recommended: Platform Selectors

import { View } from 'react-native'

<View className="ios:bg-red-500 android:bg-blue-500" />
Benefits:
  • Clean, declarative syntax
  • No extra imports needed
  • Easy to combine with other Tailwind utilities
  • Better readability and maintainability
  • Works seamlessly with theme variants

​
Supported Platforms

​
ios
selector
Targets iOS devices (iPhone, iPad). Styles are applied only when running on iOS.
​
android
selector
Targets Android devices. Styles are applied only when running on Android.
​
web
selector
Targets web browsers. Styles are applied only when running in a web environment (e.g., React Native Web).

​
Examples

​
Platform-Specific Colors

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

export const PlatformColors = () => (
  <View className="ios:bg-blue-500 android:bg-green-500 web:bg-purple-500 p-4">
    <Text className="ios:text-white android:text-white web:text-white">
      Different background color on each platform
    </Text>
  </View>
)

​
Platform-Specific Spacing

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>
)

Supported Class Names

Learn about all supported Tailwind classes in Uniwind

Theming

Combine platform selectors with theme variants
⌘I