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❌✅Applies safe area padding. The free version doesn’t depend on react-native-safe-area-context. The pro version injects safe area values directly from C++ for better performance.
m-safe, mt-safe, mb-safe, ml-safe, mr-safe❌✅Applies safe area margins. Similar to padding variants, pro version provides optimized C++ implementation.
grid❌❌Not supported by Yoga (React Native)
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.
⌘I