> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uniwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Supported classNames

> Comprehensive guide to Tailwind class names supported in Uniwind

## Overview

<Warning>
  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
</Warning>

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.

<Info>
  **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.
</Info>

<Tip>
  Found a class name that doesn't work as expected? Please [open an issue on GitHub](https://github.com/uni-stack/uniwind/issues) to help us improve this documentation.
</Tip>

## 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:

```tsx theme={null}
// 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](/api/platform-select) 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.

<Info>
  **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"`).
</Info>

### 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:

```tsx theme={null}
<Button
  colorClassName="accent-blue-500 dark:accent-blue-400 ios:accent-indigo-500"
  title="Press me"
/>
```

<Warning>
  **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.
</Warning>

## 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                     |
| `{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 |

<Tabs>
  <Tab title="Free Version">
    Requires `react-native-safe-area-context` with `SafeAreaListener` setup:

    ```tsx theme={null}
    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](/faq#how-do-i-enable-safe-area-classnames).
  </Tab>

  <Tab title="Pro Version">
    Safe area insets are automatically injected from the native layer - no setup required.
  </Tab>
</Tabs>

## Group Variants

<Tabs>
  <Tab title="Free Version">
    Not supported. `group-*` classes are parsed but have no runtime effect.
  </Tab>

  <Tab title="Pro Version">
    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](/pro/group-variants).
  </Tab>
</Tabs>

## 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

<Info>
  Data selectors are supported. Use `data-[prop=value]:...` to style based on component props. See the full guide in [Data Selectors](/api/data-selectors).
</Info>

## Unsupported Classes

Some Tailwind classes are not applicable to React Native and will be ignored:

<Warning>
  The following web-specific classes have no React Native equivalent:
</Warning>

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

<Tip>
  For interactive states like hover and press, use the `Pressable` component's built-in state management and apply classes conditionally.
</Tip>

## Need More Information?

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

<Card title="Request Documentation Updates" icon="message" href="https://github.com/uni-stack/uniwind/issues">
  Help us improve this documentation by reporting missing or incorrect information.
</Card>