Supported classNames

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.

Direction Variants (`rtl:` / `ltr:`)

Style based on the layout direction:

<Text className="ltr:text-left rtl:text-right">
  Aligned with the reading direction
</Text>

<View className="ltr:pl-4 rtl:pr-4" />

By default, the variants follow the global RTL state. To force a direction for a specific subtree, wrap it in LayoutDirection (available in Uniwind 1.9.0+, Pro 1.4.0+):

import { LayoutDirection } from 'uniwind'

<LayoutDirection rtl>
  <Text className="ltr:text-left rtl:text-right">Forced RTL</Text>
</LayoutDirection>

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-*`

Prop	Component Examples
`colorClassName`	ActivityIndicator, Button, Image
`tintColorClassName`	Image, RefreshControl
`underlayColorClassName`	TouchableHighlight
`selectionColorClassName`	TextInput, Text
`cursorColorClassName`	TextInput
`placeholderTextColorClassName`	TextInput
`thumbColorClassName`	Switch
`trackColorOnClassName` / `trackColorOffClassName`	Switch
`backdropColorClassName`	Modal
`endFillColorClassName`	ScrollView, 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:

Class	Description
`p-safe`, `pt-safe`, `pb-safe`, `pl-safe`, `pr-safe`, `px-safe`, `py-safe`	Padding based on safe area insets
`m-safe`, `mt-safe`, `mb-safe`, `ml-safe`, `mr-safe`, `mx-safe`, `my-safe`	Margin based on safe area insets
`inset-safe`, `top-safe`, `bottom-safe`, `left-safe`, `right-safe`, `x-safe`, `y-safe`	Positioning based on safe area insets
`ps-safe`, `pe-safe`, `ms-safe`, `me-safe`, `start-safe`, `end-safe`	RTL-aware safe area insets for the logical start and end edges
`{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

Free Version
Pro Version

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.

Group Variants

Free Version
Pro Version

Not supported. group-* classes are parsed but have no runtime effect.

Supported. Use group on a parent and group-active:* / group-focus:* on descendants. State propagates through the C++ shadow tree with no re-renders. See Group Variants.

Work in Progress

The following classes are currently being worked on:

Class	Status	Notes
`grid-*`	🚧 WIP	CSS 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.

Getting started

API

Theming

Supported classNames

Overview

Standard Tailwind Classes

Platform-Specific Variants

Direction Variants (`rtl:` / `ltr:`)

The `accent-*` Prefix

Why Use `accent-*`?

How It Works

Common Color Props Requiring `accent-*`

Selector Support

Safe Area Classes

Group Variants

Work in Progress

Data Selectors

Unsupported Classes

Need More Information?

Request Documentation Updates

​Overview

​Standard Tailwind Classes

​Platform-Specific Variants

​Direction Variants (rtl: / ltr:)

​The accent-* Prefix

​Why Use accent-*?

​How It Works

​Common Color Props Requiring accent-*

​Selector Support

​Safe Area Classes

​Group Variants

​Work in Progress

​Data Selectors

​Unsupported Classes

​Need More Information?

Request Documentation Updates

Overview

Standard Tailwind Classes

Platform-Specific Variants

Direction Variants (`rtl:` / `ltr:`)

The `accent-*` Prefix

Why Use `accent-*`?

How It Works

Common Color Props Requiring `accent-*`

Selector Support

Safe Area Classes

Group Variants

Work in Progress

Data Selectors

Unsupported Classes

Need More Information?