Skip to main content

​
Overview

React Native uses the Yoga layout engine, not browser CSS. Key differences to be aware of:
  • No CSS cascade/inheritance: Styles don’t inherit from parent components
  • Flexbox by default: All views use flexbox with flexDirection: 'column' by default
  • Limited CSS properties: Only a subset of CSS is supported (no floats, grid, pseudo-elements, etc.)
  • Different units: No em, rem, or percentage-based units for most properties
Uniwind supports the vast majority of Tailwind CSS utility classes out of the box. This page documents special cases, platform-specific classes, and differences between the free and pro versions.
Most Tailwind classes just work! If a class name isn’t listed below as unsupported or with special behavior, you can assume Uniwind fully supports it.
Found a class name that doesn’t work as expected? Please open an issue on GitHub to help us improve this documentation.

​
Standard Tailwind Classes

All standard Tailwind utility classes are supported, including:
  • Layout: container, flex, block, hidden, etc.
  • Spacing: p-*, m-*, space-*, gap-*
  • Sizing: w-*, h-*, min-w-*, max-w-*, etc.
  • Typography: text-*, font-*, leading-*, tracking-*, etc.
  • Colors: bg-*, text-*, border-*, shadow-*, etc.
  • Borders: border-*, rounded-*, ring-*
  • Effects: shadow-*, opacity-*
  • Flexbox: justify-*, items-*, content-*, etc.
  • Positioning: absolute, relative, top-*, left-*, etc.
  • Transforms: translate-*, rotate-*, scale-*, skew-*
  • Pseudo-elements: focus:, active:, disabled:

​
Platform-Specific Variants

Uniwind extends Tailwind with platform-specific variants for React Native: 
// Style only on iOS
<View className="ios:bg-blue-500" />

// Style only on Android
<View className="android:bg-green-500" />

// Style only on Web
<View className="web:bg-red-500" />
Learn more about platform variants in the Platform Selectors documentation.

​
Safe Area Classes

Safe area utilities are fully supported in Uniwind:
ClassDescription
p-safe, pt-safe, pb-safe, pl-safe, pr-safe, px-safe, py-safePadding based on safe area insets
m-safe, mt-safe, mb-safe, ml-safe, mr-safe, mx-safe, my-safeMargin based on safe area insets
inset-safe, top-safe, bottom-safe, left-safe, right-safe, x-safe, y-safePositioning based on safe area insets
{property}-safe-or-{value}Uses Math.max(inset, value) - ensures minimum spacing
{property}-safe-offset-{value}Uses inset + value - adds extra spacing on top of inset
Requires react-native-safe-area-context with SafeAreaListener setup:
import { SafeAreaListener } from 'react-native-safe-area-context'
import { Uniwind } from 'uniwind'

export const Root = () => (
  <SafeAreaListener
    onChange={({ insets }) => {
      Uniwind.updateInsets(insets)
    }}
  >
    {/* app content */}
  </SafeAreaListener>
)
Learn more in FAQ.

​
Work in Progress

The following classes are currently being worked on:
ClassStatusNotes
group-*🚧 WIPGroup variants for parent-child styling
data-*🚧 WIPData attribute variants
grid-*🚧 WIPCSS Grid support is being added by the React Native / Expo team

​
Unsupported Classes

Some Tailwind classes are not applicable to React Native and will be ignored:
The following web-specific classes have no React Native equivalent:
  • Pseudo-classes: hover:*, visited:* (use Pressable states instead)
  • Pseudo-elements: before:*, after:*, placeholder:*
  • Media queries: print:*, screen:*
  • Float & Clear: float-*, clear-*
  • Break: break-before-*, break-after-*, break-inside-*
  • Columns: columns-*, break-*
  • Aspect Ratio: Some variants may have limited support
For interactive states like hover and press, use the Pressable component’s built-in state management and apply classes conditionally.

​
Need More Information?

This page is continuously updated as we expand Uniwind’s capabilities.

Request Documentation Updates

Help us improve this documentation by reporting missing or incorrect information.