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-*
  • State selectors: active:, disabled:, focus:

​
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" />

// TV platforms (requires isTV: true in metro.config.js)
<View className="tv:p-8 android-tv:bg-black apple-tv:bg-gray-900" />
Learn more about platform variants in the Platform Selectors documentation.

​
The accent-* Prefix

React Native components often have color props that are separate from the style prop (like color, tintColor, underlayColor). These props expect a plain color string, not a style object. Uniwind uses the accent-* prefix to handle these cases.

​
Why Use accent-*?

When you use a *ClassName prop that maps to a color prop (e.g., colorClassName, tintColorClassName), you must use the accent-* prefix to indicate that you want to extract a color value, not a style object.
For style props: Use regular Tailwind classes directly (e.g., className="bg-blue-500").For non-style color props: Use the accent- prefix (e.g., colorClassName="accent-blue-500").

​
How It Works

Under the hood, Uniwind resolves accent-* classes to the accentColor style property, then extracts the raw color value and passes it as a string to the native prop.

​
Common Color Props Requiring accent-*

PropComponent Examples
colorClassNameActivityIndicator, Button, Image
tintColorClassNameImage, RefreshControl
underlayColorClassNameTouchableHighlight
selectionColorClassNameTextInput, Text
cursorColorClassNameTextInput
placeholderTextColorClassNameTextInput
thumbColorClassNameSwitch
trackColorOnClassName / trackColorOffClassNameSwitch
backdropColorClassNameModal
endFillColorClassNameScrollView, FlatList, SectionList

​
Selector Support

accent-* classes support all the same selectors as regular Tailwind classes — including theme variants, platform variants, and state selectors: 
<Button
  colorClassName="accent-blue-500 dark:accent-blue-400 ios:accent-indigo-500"
  title="Press me"
/>
Since 1.6.2: Passing a className without the accent- prefix to a color prop (e.g., colorClassName="blue-500" instead of colorClassName="accent-blue-500") will log a warning to the development console.

​
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
grid-*🚧 WIPCSS Grid support is being added by the React Native / Expo team

​
Data Selectors

Data selectors are supported. Use data-[prop=value]:... to style based on component props. See the full guide in Data Selectors.

​
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 active: and focus: state selectors 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.