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.

​
Unsupported Classes

Class NameFree VersionPro VersionDescription
p-safe, pt-safe, pb-safe, pl-safe, pr-safe, m-safe, mt-safe, mb-safe, ml-safe, mr-safe, safe-, safe-or-*, safe-offset-*✅*✅Safe area padding/margin utilities. Free version requires react-native-safe-area-context with SafeAreaListener and Uniwind.updateInsets(insets); pro version auto-injects from native.
grid❌❌Not supported by Yoga (React Native)
For free users, enable safe area classNames by installing react-native-safe-area-context, wrapping your root layout with SafeAreaListener, and calling Uniwind.updateInsets(insets) on change. Find more in FAQ.
Some Tailwind classes are not applicable to React Native and are not supported:
The following web-specific classes have no React Native equivalent and will be ignored:
  • 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.