# Overview (https://www.nativewind.dev/v5)

Nativewind v5 is a release candidate using Tailwind CSS v4 and react-native-css.

Nativewind v5 is a release candidate. Start with the [RC installation](https://www.nativewind.dev/v5/getting-started/installation), [v4 migration](https://www.nativewind.dev/v5/guides/migrate-from-v4), or [preview upgrade](https://www.nativewind.dev/v5/guides/migrate-from-preview). For the stable Tailwind 3 release, see [v4.2.7 docs](https://www.nativewind.dev/docs).

## What is Nativewind?

Nativewind allows you to use [Tailwind CSS](https://tailwindcss.com) to style your components in React Native. Styled components can be shared between all React Native platforms, using the best style engine for that platform; CSS StyleSheet on web and StyleSheet.create for native. Its goals are to provide a consistent styling experience across all platforms, improving Developer UX, component performance and code maintainability.

On native platforms, Nativewind performs two functions. First, at build time, it compiles your Tailwind CSS styles into `StyleSheet.create` objects and determines the conditional logic of styles (e.g. hover, focus, active, etc). Second, it has an efficient runtime system that applies the styles to your components. This means you can use the full power of Tailwind CSS, including media queries, container queries, and custom values, while still having the performance of a native style system.

On web, Nativewind is a small polyfill for adding `className` support to React Native Web.

## Key Features

🌐 **Universal** Uses the best style system for each platform.

🖥️ **DevUX** Plugins for simple setup and improving intellisense support

✨ **Media & Container queries** Use modern mobile styling features like media and container queries [(docs)](https://www.nativewind.dev/v5/core-concepts/states#hover-focus-and-active)

👪 **Custom values (CSS Variables)** Create themes, sub-themes and dynamic styles using custom values

✨ **Pseudo classes** hover / focus / active on compatible components [(docs)](https://www.nativewind.dev/v5/core-concepts/states#hover-focus-and-active)

👪 **Parent state styles** automatically style children based upon parent pseudo classes [(docs)](https://www.nativewind.dev/v5/core-concepts/states#styling-based-on-parent-state)

🔥 **Lots of other features**

* dark mode
* arbitrary classes
* platform selectors
* plugins

## How is this different StyleSheet.create?

A full featured style system should have

* Static styles
* UI state styles (active, hover, focus, etc)
* Responsive styles (media queries, dynamic units)
* Container queries (styling based upon parent appearance)
* Device state styles (orientation, color scheme)
* Use the best rendering engine available

React Native's StyleSheet system only provides static styles, with other features left for the user to implement. By using Nativewind you can focus on writing your system instead of building your own custom style system.

On the web, it avoids injecting a StyleSheet at runtime by reusing the existing Tailwind CSS stylesheet, allowing you to use Server Side Rendering and much better initial page load performance.

## In action

Nativewind handles both the Tailwind CSS compilation and the runtime styles. Metro applies import rewrites for supported React Native components.

Third party components may need an explicit `styled` wrapper if they do not forward className.

```tsx
import { CustomText } from "third-party-text-component";

export function BoldText(props) {
  // You just need to write `className="<your styles>"`
  return <CustomText className="font-bold" {...props} />;
}
```

Styling can be dynamic and you can perform conditional logic and build up complex style objects.

```tsx
import { Text } from "react-native";

export function MyText({ bold, italic, lineThrough, ...props }) {
  const classNames = [];

  if (bold) classNames.push("font-bold");
  if (italic) classNames.push("italic");
  if (lineThrough) classNames.push("line-through");

  return <Text className={classNames.join(" ")} {...props} />;
}
```

For components that need explicit mapping, use the returned [styled wrapper](https://www.nativewind.dev/v5/api/styled). Nativewind RC0 does not export the v4 `cssInterop` or `remapProps` functions. See [third party components](https://www.nativewind.dev/v5/guides/third-party-components) for style and prop mapping examples.

# Migrating cssInterop and remapProps (https://www.nativewind.dev/v5/api/css-interop)

Nativewind v5 RC0 does not export `cssInterop` or `remapProps`. Those APIs belong to the [v4 documentation](https://www.nativewind.dev/docs/api/css-interop).

Use [styled](https://www.nativewind.dev/v5/api/styled) to create a wrapper for a component that needs className mapping, and render the returned wrapper:

```tsx
import { styled } from "nativewind";
import { ThirdPartyView } from "third-party-library";

const StyledView = styled(ThirdPartyView, { className: "style" });

<StyledView className="bg-blue-500 p-4" />;
```

`styled` does not globally register or mutate the original component. There is no `global` option. Do not mechanically rename a v4 call and keep rendering the original component.

For wrappers that forward styles to another styled component, `styled` accepts `{ passThrough: true }` as its third argument. This requires a compatible downstream consumer; it does not produce ordinary resolved styles for arbitrary third party code.

Review each prop destination, nested mapping and explicit prop precedence. Use `nativeStyleMapping` to extract styles into props; `nativeStyleToProp` is still a deprecated alias. See [third party components](https://www.nativewind.dev/v5/guides/third-party-components) and the [v4 migration guide](https://www.nativewind.dev/v5/guides/migrate-from-v4).

# styled (https://www.nativewind.dev/v5/api/styled)

`styled` is a function from `react-native-css` (re-exported by Nativewind) that creates a wrapper component with `className` support and optional prop/style mapping. It is primarily used for third-party native components that don't pass through the `className` prop.

## Basic Usage

```tsx
import { styled } from "nativewind";
import { SomeNativeComponent } from "third-party-library";

const StyledComponent = styled(SomeNativeComponent);

<StyledComponent className="bg-blue-500 p-4" />
```

Define the wrapper outside render and use the returned component. The original component is unchanged; `styled` does not register it globally and has no `global` option.

## Mapping Styles to Props

Some React Native components expect style values as direct props rather than inside a `style` object. Use `styled` to extract specific style properties and pass them as props:

```tsx
import { styled } from "nativewind";
import { Svg, Circle } from "react-native-svg";

const StyledSvg = styled(Svg, {
  className: {
    target: "style",
    nativeStyleMapping: {
      height: true,
      width: true,
    },
  },
});

const StyledCircle = styled(Circle, {
  className: {
    target: false,
    nativeStyleMapping: {
      fill: true,
      stroke: true,
      strokeWidth: true,
    },
  },
});

<StyledSvg className="w-24 h-24" viewBox="0 0 100 100">
  <StyledCircle
    className="fill-green-500 stroke-blue-500 stroke-2"
    cx="50"
    cy="50"
    r="45"
  />
</StyledSvg>
```

> For most custom components you write yourself, you don't need `styled`. Simply accept and pass through the `className` prop. `styled` is for third-party components that don't support `className`. See the [third-party components guide](https://www.nativewind.dev/v5/guides/third-party-components) for more details.

# useColorScheme (https://www.nativewind.dev/v5/api/use-color-scheme)

> Deprecated
>
> The `useColorScheme` hook from `nativewind` is deprecated in v5. Use `useColorScheme` from `react-native` and `Appearance.setColorScheme()` directly instead.

## Migration

Replace the Nativewind import with the React Native equivalent:

```diff
- import { useColorScheme } from "nativewind";
+ import { useColorScheme, Appearance } from "react-native";
```

The v4 API returned `{ colorScheme, setColorScheme, toggleColorScheme }`. In v5, use the React Native APIs directly:

```tsx
import { useColorScheme, Appearance, Pressable, Text } from "react-native";

function ThemeToggle() {
  const colorScheme = useColorScheme();

  const restoreSystemTheme = () => Appearance.setColorScheme("unspecified");

  const toggleColorScheme = () => {
    Appearance.setColorScheme(
      Appearance.getColorScheme() === "dark" ? "light" : "dark"
    );
  };

  return (
    <>
      <Pressable onPress={toggleColorScheme}>
        <Text>Current: {colorScheme}</Text>
      </Pressable>
      <Pressable onPress={restoreSystemTheme}>
        <Text>Use system theme</Text>
      </Pressable>
    </>
  );
}
```

The `"unspecified"` value restores system appearance on the Expo 57 native target. Browser manual theme controls need separate handling.

See the [Dark Mode](https://www.nativewind.dev/v5/core-concepts/dark-mode) guide for more details.

# vars() & useUnstableNativeVariable() (https://www.nativewind.dev/v5/api/vars)

`vars()` is deprecated but remains available in RC0. Prefer `VariableContextProvider` for new code. Preserve runtime variables with `inlineVariables.exclude` when the compiler would otherwise inline them; see [Dynamic Themes](https://www.nativewind.dev/v5/guides/themes).

## vars()

`vars` is a function that takes a dictionary of CSS variables and returns a style object. When applied to a component's `style` prop, the variables flow down the component tree, just like CSS custom properties.

```tsx
import { View, Text } from "react-native";
import { vars } from "nativewind";

function ThemedSection({ brandColor }) {
  return (
    <View style={vars({ "--brand-color": brandColor })}>
      <Text className="text-[var(--brand-color)]">Themed text</Text>
    </View>
  );
}
```

Variables set with `vars()` can be consumed by any descendant component using `var()` in their class names or CSS.

### Combining with styles

`vars()` returns a style object, so you can spread it alongside other styles:

```tsx
<View style={[{ padding: 16 }, vars({ "--accent": "blue" })]} />
```

## VariableContextProvider

`VariableContextProvider` sets CSS variables via React context rather than the `style` prop. This is useful when you need variables available to components that aren't direct style descendants:

```tsx
import { Text } from "react-native";
import { VariableContextProvider } from "nativewind";

function App() {
  return (
    <VariableContextProvider value={{ "--theme-color": "#3b82f6" }}>
      <Text className="text-[var(--theme-color)]">Blue text</Text>
    </VariableContextProvider>
  );
}
```

## useUnstableNativeVariable()

> This API is unstable and may change in future releases.

`useUnstableNativeVariable` reads the current value of a CSS variable from the nearest variable context. This is useful for cases where you need a variable value in JavaScript rather than in a class name:

```tsx
import { useUnstableNativeVariable } from "nativewind";

function MyComponent() {
  const themeColor = useUnstableNativeVariable("--theme-color");
  // Use themeColor in JavaScript logic
}
```

# withNativewind (https://www.nativewind.dev/v5/api/with-nativewind)

`withNativewind` is a function that wraps your Metro configuration to enable Nativewind. It is a thin wrapper around `react-native-css`'s `withReactNativeCSS`, with Nativewind-specific defaults.

```tsx title="metro.config.js"
const { getDefaultConfig } = require("expo/metro-config");
const { withNativewind } = require("nativewind/metro");

const config = getDefaultConfig(__dirname);

module.exports = withNativewind(config);
```

## Runtime variables

To keep a CSS variable dynamic instead of compiling its default value into native styles:

```js
module.exports = withNativewind(config, {
  inlineVariables: { exclude: ["--color-primary"] },
});
```

See [Dynamic Themes](https://www.nativewind.dev/v5/guides/themes) for provider examples.

## Options

`withNativewind` accepts an optional second argument with the same options as `withReactNativeCSS` from `react-native-css/metro`. The following defaults are applied:

| Option                    | Default                 | Description                                                                                                 |
| ------------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------- |
| `globalClassNamePolyfill` | `true`                  | Enables the babel transform that rewrites imports to add `className` support to all React Native components |
| `typescriptEnvPath`       | `"nativewind-env.d.ts"` | Path for the generated TypeScript declaration file that adds `className` types                              |

You can override any option:

```tsx title="metro.config.js"
module.exports = withNativewind(config, {
  globalClassNamePolyfill: false,
  typescriptEnvPath: "custom-env.d.ts",
});
```

> In v4 this function was called `withNativeWind` (capital W). Both spellings work in v5, but `withNativewind` is preferred.

# Dark Mode (https://www.nativewind.dev/v5/core-concepts/dark-mode)

Nativewind v5 supports dark mode through the system preference using the `prefers-color-scheme` media query. This works automatically with React Native's `Appearance` API on native and the CSS media query on web.

## System Preference (Automatic)

By default, Tailwind CSS's `dark:` variant uses the system color scheme. In Expo, install `expo-system-ui` and set `"userInterfaceStyle": "automatic"` in the `expo` object of `app.json`. Rebuild when native configuration changes:

```tsx
import { View, Text } from "react-native";

function Card() {
  return (
    <View className="bg-white dark:bg-gray-900">
      <Text className="text-black dark:text-white">
        Adapts to system theme
      </Text>
    </View>
  );
}
```

Under the hood, `dark:` maps to `@media (prefers-color-scheme: dark)`, which is reactive on both native and web. When the user changes their system theme, styles update automatically.

## Manual Selection (User Toggle)

To allow users to manually toggle between light and dark mode, use React Native's `Appearance` API:

```tsx
import { Appearance, Pressable, Text } from "react-native";

function ThemeToggle() {
  const toggleTheme = () => {
    Appearance.setColorScheme(
      Appearance.getColorScheme() === "dark" ? "light" : "dark"
    );
  };

  return (
    <Pressable onPress={toggleTheme} className="p-4 bg-gray-200 dark:bg-gray-800">
      <Text className="text-black dark:text-white">Toggle Theme</Text>
    </Pressable>
  );
}
```

On the Expo 57 target, restore the system preference with:

```tsx
Appearance.setColorScheme("unspecified");
```

This manual override is for native. React Native Web does not turn it into a browser theme selector. Keep browser theme selection separate if your app supports a manual browser toggle. Qualified selectors such as `:root.dark` are rejected by the native compiler; use media queries on native.

You can read the current color scheme using React Native's `useColorScheme` hook:

```tsx
import { useColorScheme } from "react-native";

function MyComponent() {
  const colorScheme = useColorScheme();
  // colorScheme is "light" | "dark" | null
}
```

See a full implementation with an animated toggle at [nativewind/theme-toggle-v5 on GitHub](https://github.com/nativewind/theme-toggle-v5).

> Nativewind v4 provided a custom `useColorScheme` hook from `nativewind`. In v5 this is deprecated -- use `useColorScheme` from `react-native` and `Appearance.setColorScheme()` directly instead.

## Best Practices

Always provide both light and dark mode styles. React Native can have issues with conditionally applied styles:

```tsx
{/* Always specify both variants */}
<Text className="text-black dark:text-white" />

{/* Avoid only specifying one */}
<Text className="dark:text-white" />
```

# Functions & Directives (https://www.nativewind.dev/v5/core-concepts/functions-and-directives)

## Overview

Nativewind v5 uses Tailwind CSS v4, which introduces a CSS-first configuration model. Please refer to the [Tailwind CSS v4 documentation](https://tailwindcss.com/docs/functions-and-directives) for the full directive reference.

## Tailwind CSS v4 Directives

| Directive         | Purpose                                             |
| ----------------- | --------------------------------------------------- |
| `@import`         | Import Tailwind layers and other CSS files          |
| `@theme`          | Define design tokens (colors, spacing, fonts, etc.) |
| `@utility`        | Define custom utilities                             |
| `@custom-variant` | Define custom variants                              |
| `@source`         | Specify content sources for class detection         |
| `@plugin`         | Load a Tailwind plugin                              |
| `@apply`          | Inline utility classes within custom CSS            |

### Example CSS setup

```css title="global.css"
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";

@import "nativewind/theme";
```

The `nativewind/theme` import adds React Native-specific theme values (elevation, platform fonts, safe area utilities) and custom variants (`ios:`, `android:`, `native:`, `web:`, `tv:`).

## CSS Functions

These CSS functions are polyfilled on native by `react-native-css`:

### var()

`var()` allows you to use CSS custom properties (variables). Variables can be set in CSS or from JavaScript using the `vars()` function.

```css
:root {
  --brand-color: #3b82f6;
}

.branded {
  color: var(--brand-color);
}
```

```tsx
import { View, Text } from "react-native";
import { vars } from "nativewind";

function ThemedSection({ brandColor }) {
  return (
    <View style={vars({ "--brand-color": brandColor })}>
      <Text className="text-[--brand-color]">Themed text</Text>
    </View>
  );
}
```

Variables are inherited through the component tree, just like CSS.

### calc()

`calc()` performs arithmetic in CSS values. Supported unit types:

* **Numerical** (`px`): `calc(10px + 100px)` resolves to `110`
* **Percentage** (`%`): `calc(var(--width) + 20%)` resolves correctly
* **`rem` units**: `calc(2rem * 5)` resolves using the platform rem value
* **`em` units**: `calc(2em * 2)` resolves relative to the element's font size
* **CSS variables**: `calc(var(--variable) + 20px)` resolves at runtime
* **Inside color functions**: `hsl(calc(var(--H) + 20), 50%, 50%)` works for dynamic colors

```css
.element {
  width: calc(10px + 100px);
  padding: calc(2rem * 3);
  margin: calc(var(--spacing) + 8px);
}
```

> Limitation: Mixing unit types
>
> React Native's layout engine does not support mixing numerical and percentage units. `calc(100% - 20px)` will not work. Ensure all operands use the same unit type.

### env()

`env()` accesses device-specific environment values. Supported values:

```css
env(safe-area-inset-top);
env(safe-area-inset-bottom);
env(safe-area-inset-left);
env(safe-area-inset-right);
```

See [Safe Area Insets](https://www.nativewind.dev/v5/tailwind/new-concepts/safe-area-insets) for more information.

### color-mix()

`color-mix()` blends two colors together in a given color space:

```css
.element {
  color: color-mix(in oklch, red 50%, blue);
}
```

## React Native Functions

Nativewind provides additional functions for React Native-specific values:

### hairlineWidth()

Returns the thinnest visible line width on the device (maps to `StyleSheet.hairlineWidth`):

```css
.thin-border {
  border-width: hairlineWidth();
}
```

### roundToNearestPixel()

Rounds a value to the nearest pixel boundary:

```css
.precise {
  height: roundToNearestPixel(32.4);
}
```

### getPixelSizeForLayoutSize()

Converts a layout size to pixel size:

```css
.pixel-precise {
  width: getPixelSizeForLayoutSize(100);
}
```

### platformColor()

Access platform-specific named colors:

```css
.system-blue {
  color: platformColor(systemBlue);
}
```

# Responsive Design (https://www.nativewind.dev/v5/core-concepts/responsive-design)

Nativewind supports responsive design using Tailwind CSS breakpoint variants and CSS media queries.

## Breakpoint Variants

Tailwind's responsive variants (`sm:`, `md:`, `lg:`, `xl:`, `2xl:`) work on native by using media queries based on window width. Please refer to the [Tailwind CSS responsive design documentation](https://tailwindcss.com/docs/responsive-design) for the full API.

```tsx
<Text className="text-sm md:text-base lg:text-lg">
  Responsive text
</Text>
```

## Media Queries

Nativewind supports the following media query types on native:

| Media Feature          | Example                               | Notes                            |
| ---------------------- | ------------------------------------- | -------------------------------- |
| `width`                | `@media (width: 500px)`               | Exact and range syntax supported |
| `min-width`            | `@media (min-width: 768px)`           |                                  |
| `max-width`            | `@media (max-width: 1024px)`          |                                  |
| `prefers-color-scheme` | `@media (prefers-color-scheme: dark)` | Uses React Native Appearance API |
| `resolution`           | `@media (resolution: 2dppx)`          | `dppx` and `dpi` units           |
| `min-resolution`       | `@media (min-resolution: 2dppx)`      |                                  |
| `max-resolution`       | `@media (max-resolution: 160dpi)`     |                                  |

### Platform Media Queries

Nativewind extends standard media queries with platform-specific selectors:

```css
@media ios { /* iOS only */ }
@media android { /* Android only */ }
@media native { /* All native platforms */ }
```

These are available as custom variants in your classes: `ios:`, `android:`, `native:`, `web:`, `tv:`.

```tsx
<Text className="font-sans ios:font-[System] android:font-[Roboto]">
  Platform-specific font
</Text>
```

## Reactive Updates

Media queries on native are reactive. When the window dimensions change (e.g. device rotation, split screen), styles update automatically without re-rendering.

# States & Pseudo-classes (https://www.nativewind.dev/v5/core-concepts/states)

## Hover, Focus, and Active

Nativewind supports the `:hover`, `:focus`, and `:active` pseudo-classes. These work by mapping to the corresponding React Native event props on the component.

| Pseudo-class | Tailwind Modifier | Activating Event | Deactivating Event |
| ------------ | ----------------- | ---------------- | ------------------ |
| `:hover`     | `hover:`          | `onHoverIn`      | `onHoverOut`       |
| `:active`    | `active:`         | `onPressIn`      | `onPressOut`       |
| `:focus`     | `focus:`          | `onFocus`        | `onBlur`           |

```tsx
import { Pressable, Text } from "react-native";

function MyButton() {
  return (
    <Pressable className="bg-blue-500 active:bg-blue-700">
      <Text className="text-white">Press Me</Text>
    </Pressable>
  );
}
```

> The component must support the relevant event prop for the modifier to work. For example, `hover:` requires `onHoverIn`/`onHoverOut`, which is available on `Pressable` and `TextInput` but not `View` or `Text`.

### Combining Pseudo-classes

Multiple pseudo-classes can be combined. All conditions must be met for the styles to apply:

```tsx
<TextInput className="hover:active:focus:border-blue-500" />
```

## Disabled and Empty

Nativewind supports the `:disabled` and `:empty` pseudo-classes.

| Pseudo-class | Tailwind Modifier | Condition                            |
| ------------ | ----------------- | ------------------------------------ |
| `:disabled`  | `disabled:`       | Component has `disabled={true}` prop |
| `:empty`     | `empty:`          | Component has no children            |

```tsx
import { TextInput } from "react-native";

function MyInput({ disabled }) {
  return (
    <TextInput
      className="border disabled:opacity-50 disabled:bg-gray-200"
      disabled={disabled}
    />
  );
}
```

## Selection and Placeholder

The `selection:` and `placeholder:` modifiers style text selection and placeholder text respectively:

```tsx
<TextInput
  className="selection:text-black placeholder:text-gray-400"
  placeholder="Enter text..."
/>
```

## Data Attribute Selectors

Nativewind supports `[data-*]` attribute selectors, allowing you to style components based on data attributes:

```tsx
import { View, Text } from "react-native";

function StatusBadge({ active }) {
  return (
    <View
      className="[&[data-active]]:bg-green-500 [&[data-active='false']]:bg-gray-500"
      {...{ dataSet: { active: active } }}
    >
      <Text>Status</Text>
    </View>
  );
}
```

## Styling Based on Parent State

You can style child components based on the state of a parent using the `group` utility. Add `group/{name}` to the parent and use `group-hover/{name}:`, `group-active/{name}:`, or `group-focus/{name}:` modifiers on children.

```tsx
import { Pressable, Text, View } from "react-native";

function Card() {
  return (
    <Pressable className="group/card">
      <View className="group-active/card:bg-blue-100">
        <Text className="group-active/card:text-blue-700">
          Press the card to see child styles change
        </Text>
      </View>
    </Pressable>
  );
}
```

### How it works

1. The parent component is tagged with `group/{name}` (e.g. `group/item`)
2. Children use `group-{modifier}/{name}:` to react to the parent's state
3. When the parent's state changes (e.g. pressed), child styles update automatically

### Arbitrary Group Selectors

You can use arbitrary values with groups to match specific class names or props:

```tsx
<View className="group-[.test]:text-white" />
<View className="group-[[accessibilityLabel=works]]:text-white" />
```

## LTR and RTL

Use `ltr:` and `rtl:` to apply styles based on the text direction:

```tsx
<Text className="ltr:text-left rtl:text-right">
  Direction-aware text
</Text>
```

## ARIA state modifiers in RC0

Use the public React Native prop, for example:

```tsx
<View aria-selected={selected} className="aria-selected:bg-blue-500" />
```

`accessibilityState={{ selected }}` does not activate `aria-selected:` in this RC, and `ariaSelected` is not the public React Native prop. The engine matches the incoming `aria-selected` prop before React Native translates it for the native host.

# Style Specificity (https://www.nativewind.dev/v5/core-concepts/style-specificity)

Nativewind employs a specificity model that aligns with CSS rules, augmented to accommodate the inline-style nature of React Native.

## How Specificity Works

When multiple classes target the same property, the last class in the stylesheet wins (following CSS source order), not the order in `className`:

```tsx
// Both "blue" and "red" set `color`. The one declared later in CSS wins.
<Text className="text-blue-500 text-red-500" />
```

## Specificity Order

Styles are applied in the following order of precedence (lowest to highest):

1. **Base styles** -- Regular utility classes (e.g. `text-red-500`)
2. **Modifier styles** -- Styles with pseudo-class modifiers (e.g. `hover:text-blue-500`) have higher specificity
3. **Inline styles** -- The `style` prop takes precedence over `className`
4. **Important styles** -- `!important` overrides everything, including inline styles

```tsx
// Inline style (color: "black") wins over className (text-white → color: "#fff")
<Text className="text-white" style={{ color: "black" }} />
```

## Important

The `!` suffix (Tailwind's `!important` syntax) overrides both normal class styles and inline styles:

```tsx
// text-white! overrides the inline style
<Text className="text-white!" style={{ color: "black" }} />
// Result: color is "#fff"
```

## Merging className and style

Nativewind automatically merges `className` styles with the `style` prop. When the same property is set in both, the `style` prop wins (unless `!important` is used in the class):

```tsx
// className sets padding, style sets color — both are applied
<View className="p-4" style={{ backgroundColor: "red" }} />
// Result: { padding: 14, backgroundColor: "red" }
```

When they target the same property, `style` takes precedence:

```tsx
// Both set color — inline style wins
<Text className="text-white" style={{ color: "black" }} />
// Result: { color: "black" }
```

## Component Composition

When building custom components that accept `className`, styles compose naturally through string concatenation:

```tsx
function MyText({ className, ...props }) {
  return <Text className={`text-base text-black ${className}`} {...props} />;
}

// User's className takes effect via CSS source order
<MyText className="text-red-500" />
```

# Built on Tailwind CSS (https://www.nativewind.dev/v5/core-concepts/tailwindcss)

Nativewind is built upon the Tailwind CSS style language. Nativewind v5 uses **Tailwind CSS v4**, which introduces a CSS-first configuration approach. We recommend reading the Tailwind CSS guides on:

* [Utility-First Fundamentals](https://tailwindcss.com/docs/utility-first)
* [Reusing Styles](https://tailwindcss.com/docs/reusing-styles)
* [Adding Custom Styles](https://tailwindcss.com/docs/adding-custom-styles)

Since Nativewind compiles your Tailwind CSS at build time, the full Tailwind CSS language is available. The entire set of utilities, variants, functions, and directives will work on web. On native, Nativewind applies the subset that React Native's style engine supports.

## Supporting React Native

Nativewind works similarly to CSS on the web: it accepts all classes but only applies styles that are supported on the current platform. For example, `grid` will work on web but not on native (where React Native only supports flexbox layout).

You can always use a platform variant to apply styles selectively:

```tsx
<View className="flex native:flex-col web:grid web:grid-cols-3">
  {/* flexbox on native, CSS grid on web */}
</View>
```

## Tailwind CSS v4 Changes

Nativewind v5 uses Tailwind CSS v4, which has significant differences from v3:

* **CSS-first configuration**: Theming is done via `@theme` blocks in CSS instead of `tailwind.config.js`
* **New directives**: `@import`, `@theme`, `@utility`, `@custom-variant`, `@source` replace `@tailwind`, `@apply`, `@layer`
* **No config file required**: `tailwind.config.js` is optional (use `@config` to reference one if needed)

See the [Configuration](https://www.nativewind.dev/v5/customization/configuration) page for details on setting up your project.

# Units (https://www.nativewind.dev/v5/core-concepts/units)

## Supported Units

Nativewind v5 supports the following CSS units on native:










## Ratios

Ratio values like `aspect-ratio: 16 / 9` are supported natively.

## dp vs px

React Native's default unit is density-independent pixels (dp) while the web uses pixels (px). Nativewind treats them as equivalent: `10px` in CSS becomes `10` in React Native's style system. When defining values in your theme, use `px` units and Nativewind will handle the conversion.

## rem Sizing

React Native's `<Text />` renders with a default `fontSize: 14`, while the web default is `16px`. Nativewind uses an `rem` value of `14` on native and `16` on web to maintain visual consistency with Tailwind's spacing scale.

You can override the `rem` value using CSS:

```css
:root {
  font-size: 16px;
}
```

The `rem` value is not a runtime JavaScript setting in v5. For dimensions that change at runtime, use a CSS variable through `VariableContextProvider` and preserve it with `inlineVariables.exclude`; see [Dynamic Themes](https://www.nativewind.dev/v5/guides/themes).

# Colors (https://www.nativewind.dev/v5/customization/colors)

Nativewind v5 supports all Tailwind CSS color utilities and several additional color features on native.

## Theme Colors

In Tailwind CSS v4, colors are defined in `@theme`:

```css
@theme {
  --color-brand: #3b82f6;
  --color-brand-dark: #1e40af;
  --color-surface: oklch(0.95 0 0);
}
```

These are available as `text-brand`, `bg-brand-dark`, `border-surface`, etc.

## CSS Variable Colors

Use CSS variables for dynamic colors that can change at runtime:

```css
:root {
  --color-primary: #3b82f6;
}
```

```tsx
import { vars } from "nativewind";

<View style={vars({ "--color-primary": userColor })}>
  <Text className="text-[--color-primary]">Dynamic color</Text>
</View>
```

## Special Values

| Value                      | Behavior                            |
| -------------------------- | ----------------------------------- |
| `transparent`              | Fully transparent (`rgba(0,0,0,0)`) |
| `currentColor` / `current` | Inherits the current text color     |
| `inherit`                  | Inherits the value from the parent  |

```tsx
<View className="text-red-500">
  <Text className="border-current">
    {/* border color is red, inherited from parent text color */}
  </Text>
</View>
```

## Color Functions

### color-mix()

Blend two colors in a given color space:

```css
.blended {
  color: color-mix(in oklch, red 50%, blue);
}
```

### Opacity Modifier

Tailwind's opacity modifier syntax works on native:

```tsx
<View className="bg-blue-500/50" />
{/* 50% opacity blue background */}
```

## HSL and HSLA

HSL color values are supported in various syntaxes:

```css
.element {
  color: hsl(200, 100%, 50%);
  background-color: hsla(200, 100%, 50%, 0.5);
  border-color: hsl(200 100% 50% / 0.8);
}
```

CSS variables can be used inside color functions:

```css
:root {
  --hue: 200;
}

.element {
  color: hsl(var(--hue), 100%, 50%);
}
```

# Configuration (https://www.nativewind.dev/v5/customization/configuration)

Nativewind v5 uses Tailwind CSS v4, which introduces a **CSS-first configuration** model. Instead of a `tailwind.config.js` file, you configure your project directly in CSS.

## CSS Setup

Your main CSS file should import Tailwind's layers and the Nativewind theme:

```css title="global.css"
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";

@import "nativewind/theme";
```

The `nativewind/theme` import provides:

* Elevation scale (`--elevation-xs` through `--elevation-2xl`)
* Platform-specific font families (System/Georgia/Menlo on iOS, system defaults on Android)
* Custom utilities (`elevation-*`, `tint-*`, `ripple-*`, `corner-*`, `color-*`)
* Custom variants (`ios:`, `android:`, `native:`, `web:`, `tv:`)
* A `leading-*` override for unit-less line-height values
* Safe area utilities via `tailwindcss-safe-area`

## Metro Configuration

Configure Metro using `withNativewind` in your Metro config:

```js title="metro.config.js"
const { getDefaultConfig } = require("expo/metro-config");
const { withNativewind } = require("nativewind/metro");

const config = getDefaultConfig(__dirname);

module.exports = withNativewind(config);
```

See the [withNativewind API reference](https://www.nativewind.dev/v5/api/with-nativewind) for available options.

## Babel Configuration

The Nativewind import rewrite plugin is applied by the Metro integration. Keep `babel-preset-expo` and unrelated Babel plugins. Remove the v4 `nativewind/babel` preset and Nativewind `jsxImportSource` setting.

## Optional: tailwind.config.js

Tailwind CSS v4 still supports a JavaScript config file for advanced use cases. Reference it with `@config`:

```css title="global.css"
@config "./tailwind.config.js";
```

However, most configuration can be done directly in CSS using `@theme`, `@utility`, and `@custom-variant`. See the [Theme](https://www.nativewind.dev/v5/customization/theme) page for details.

## Content Sources

Tailwind CSS v4 automatically detects your source files. You can explicitly configure content sources using `@source`:

```css title="global.css"
@source "../components/**/*.tsx";
@source "../screens/**/*.tsx";
```

# Theme (https://www.nativewind.dev/v5/customization/theme)

In Tailwind CSS v4, the theme is defined in CSS using the `@theme` directive instead of `tailwind.config.js`. Nativewind builds on this with additional React Native-specific theme values.

## Defining Theme Values

Use `@theme` to add design tokens:

```css title="global.css"
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";
@import "nativewind/theme";

@theme {
  --color-brand: #3b82f6;
  --color-brand-light: #93c5fd;
  --font-display: "CustomFont";
  --spacing-18: 4.5rem;
}
```

These become available as utilities: `text-brand`, `bg-brand-light`, `font-display`, `p-18`, etc.

## Nativewind Default Theme

The `nativewind/theme` import adds the following:

### Elevation Scale

```css
@theme {
  --elevation-xs: 1;
  --elevation-sm: 3;
  --elevation-md: 6;
  --elevation-lg: 8;
  --elevation-xl: 13;
  --elevation-2xl: 24;
  --elevation-none: 0;
}
```

Used via the `elevation-*` utilities (Android shadow elevation).

### Platform Fonts

Platform-specific default fonts are set on `:root`:

* **iOS**: `--font-sans: System`, `--font-serif: Georgia`, `--font-mono: Menlo`
* **Android**: `--font-sans: SystemAndroid`, `--font-serif: sans-serif`, `--font-mono: monospace`

## Custom Utilities

Define custom utilities with `@utility`:

```css
@utility my-shadow {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
```

Then use it as `className="my-shadow"`.

Nativewind's theme defines several custom utilities:

* `elevation-*` -- Android shadow elevation
* `tint-*` -- Image tint color
* `ripple-*` -- Android ripple effect (color, borderless, radius)
* `corner-*` -- Corner shape (`rounded`, `squircle`)
* `color-*` -- Shorthand for text color

## Custom Variants

Define custom variants with `@custom-variant`:

```css
@custom-variant dark (@media (prefers-color-scheme: dark));
@custom-variant landscape (@media (orientation: landscape));
```

Nativewind provides these platform variants:

```css
@custom-variant ios (@media ios);
@custom-variant android (@media android);
@custom-variant native (@media native);
@custom-variant tv (@media (display-mode: tv));
@custom-variant web (@supports selector(div > div));
```

Use them as modifiers: `ios:text-red-500`, `android:p-4`, `native:flex-col`, `web:grid`.

## Plugins

Load Tailwind plugins using `@plugin`:

```css
@plugin "./my-plugin.js";
@plugin "tailwindcss-safe-area";
```

# Editor Setup (https://www.nativewind.dev/v5/getting-started/editor-setup)

## Editor Support for Custom ClassName Props

When using non-className props (e.g `headerClassName`) you may need to configure your editor to recognize these new props for proper IntelliSense and autocomplete.

For detailed information about working with third-party components and creating custom className props, see the [Styling Third-Party Components](https://www.nativewind.dev/v5/guides/third-party-components) guide.

### VS Code Configuration

If you're using VS Code with the Tailwind CSS IntelliSense extension, you can add custom className props to the `tailwindCSS.classAttributes` setting:

```json
{
  (...)
  "files.associations": {
    "*.css": "tailwindcss",
  },
  "tailwindCSS.classAttributes": [
    "class",
    "className",
    "headerClassName"
  ]
}
```

This will enable autocomplete and IntelliSense for your custom className props

# Troubleshooting (https://www.nativewind.dev/v5/getting-started/troubleshooting)

## Check versions and restart

RC0 requires `nativewind@5.0.0-rc.0` and `react-native-css@3.1.0-rc.0` together. Check the resolved versions in your lockfile or with `npm ls nativewind react-native-css`. Use the equivalent command for your package manager.

After changing dependencies or configuration, restart Metro:

```bash
npx expo start --clear
```

Rebuild native apps when native dependencies change. The tested target is Expo 57.0.22 with React Native 0.86.3, Reanimated 4.5.1 and Worklets 0.10.1. Align native packages with Expo rather than bypassing peer errors.

## Build succeeds but styles are missing

V5 compiles Tailwind 4 through `@tailwindcss/postcss`. Expo 57 discovers `postcss.config.js` or `postcss.config.mjs`, but not `postcss.config.cjs`. Check the [installation guide](https://www.nativewind.dev/v5/getting-started/installation), root CSS import and Tailwind source discovery.

For an isolated Tailwind check using the same tested version:

```bash
npx @tailwindcss/cli@4.1.12 --input ./global.css --output output.css
```

Check that the expected utility exists in the output. This verifies Tailwind generation only; it does not verify Metro integration or native rendering.

On web, use the split theme, preflight and unlayered utility imports from the installation guide. A single `@import "tailwindcss"` can let React Native Web default styles win over your utilities.

## Legacy configuration errors

The RC rejects `@cssInterop`, `@react-native` configuration and qualified native root selectors such as `:root.dark`. Follow [Upgrade a v5 preview](https://www.nativewind.dev/v5/guides/migrate-from-preview) to translate their intent. Do not suppress these errors.

`verifyInstallation`, `cssInterop` and `remapProps` are not Nativewind RC0 exports. Use [styled](https://www.nativewind.dev/v5/api/styled) for component mapping and verify a visible styled element instead of calling the v4 installation helper.

## Runtime variables do not update

Use `VariableContextProvider` with its `value` prop. Preserve dynamic variables with `inlineVariables.exclude` in Metro options. See [Dynamic Themes](https://www.nativewind.dev/v5/guides/themes).

## Theme changes do not apply

Install `expo-system-ui`, set `expo.userInterfaceStyle` to `"automatic"`, and rebuild for native configuration changes. On the tested Expo 57 target, `Appearance.setColorScheme("unspecified")` restores system appearance. Browser manual theme controls need separate configuration. See [Dark Mode](https://www.nativewind.dev/v5/core-concepts/dark-mode).

## Unsupported component props

Adding a TypeScript declaration does not create a runtime mapping. Use supported native props or a `styled` wrapper for third party components. For TextInput placeholder color, use `className="placeholder:text-gray-500"`.

## Platform differences and bug reports

Apply text colors to Text components rather than expecting them to cascade through View. Native `px` values become density independent points, and the default native `rem` is 14. Compare intended layouts on each supported platform.

Check the [RC compatibility guide](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md), including the Android animation cancellation limitation. When reporting an issue, include exact package versions, Expo SDK, platform and OS, development or release mode, configuration, expected and actual behavior, and a minimal reproduction. Note whether direct React Native or Reanimated reproduces it.

# Typescript (https://www.nativewind.dev/v5/getting-started/typescript)

Nativewind extends the React Native types via declaration merging. The simplest method to include the types is to create a new `nativewind-env.d.ts` file and add a [triple-slash directive](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html) referencing the types.

```tsx
/// <reference types="react-native-css/types" />
```

> CAUTION
>
> Do not call this file:
>
> * `nativewind.d.ts`
> * The same name as a file or folder in the same directory e.g `app.d.ts` when an `/app` folder exists
> * The same name as a folder in `node_modules`, e.g `react.d.ts`
>
> By doing so, your types will not be picked up by the TypeScript compiler.

Ensure this declaration file is included by your tsconfig. If TypeScript reports an unresolved side effect CSS import, add `declare module "*.css";` to an application declaration file included by that project. Do not retain obsolete v4 declarations to silence missing RC props.

# Writing Custom Components (https://www.nativewind.dev/v5/guides/custom-components)

> This guide is about writing your own components. If you are looking for a guide on how to use Nativewind with third-party components, see the [third-party components](https://www.nativewind.dev/v5/guides/third-party-components) guide.
>
> Unless you are styling a custom native component, you should never have to use `styled` when writing your own components. These are only used when working with third-party components.

## Your first component

Nativewind works by passing class names to components. This is the same pattern as Tailwind CSS, which uses utility classes to style elements.

To create a component with default styles, simply merge the className string.

```tsx
function MyComponent({ className }) {
  const defaultStyles = "text-black dark:text-white";
  return <Text className={`${defaultStyles} ${className}`} />;
}

<MyComponent className="font-bold" />;
```

You can expand this pattern to create more complex components. For example, you can create a `Button` component with different variants.

```tsx
const variantStyles = {
  default: "rounded",
  primary: "bg-blue-500 text-white",
  secondary: "bg-white-500 text-black",
};

function MyComponent({ variant, className, ...props }) {
  return (
    <Text
      className={`
        ${variantStyles.default}
        ${variantStyles[variant]}
        ${className}
      `}
      {...props }
    />
  );
}
```

Creating your own variants can quickly become complex. We recommend using a class name management library to simplify the process.

* [tailwind-variants](https://www.tailwind-variants.org/)
* [cva](https://cva.style/docs)
* [tw-classed](https://tw-classed.vercel.app)
* [clsx](https://www.npmjs.com/package/clsx)
* [classnames](https://www.npmjs.com/package/classnames)

## Merging with inline styles

Nativewind will automatically merge with inline-styles. [Read more about style specificity](https://www.nativewind.dev/v5/core-concepts/style-specificity) documentation.

```tsx
<Text className="text-white" style={{ color: "black" }} /> // Will be black
```

## Handling components with multiple style props

Custom components can have multiple style props. For example, a `Button` component may have an `outerClassName` and an `innerClassName`.

```tsx title=MyComponent.tsx
function MyComponent({ className, textClassName }) {
  return (
    <View className={className}>
      <Text className={textClassName}>Hello, Nativewind!</Text>
    </View>
  );
}
```

# Custom Fonts (https://www.nativewind.dev/v5/guides/custom-fonts)

How to load and use custom fonts with Nativewind v5 and Expo

React Native handles fonts differently from the web. There is no `@font-face`, no automatic font discovery, and no fallback font stacks. Every font weight is a separate file, and the file name matters. This guide walks through the full setup.

> A complete working example is available at [nativewind/custom-fonts-example-v5](https://github.com/nativewind/custom-fonts-example-v5).

## Prerequisites

* An Expo project with Nativewind v5 installed
* A custom font you want to use (this guide uses [Inter](https://rsms.me/inter/))

## Step 1: Choose your font files

**Use OTF or TTF format.** OTF files render slightly better and have a smaller file size. Either format works across iOS, Android, and web.

**Variable fonts do not work on React Native.** You must download individual static weight files. For Inter, that means separate files for Regular, Bold, Italic, Medium, etc.

Download the static font files from your font's release page. For Inter, grab the OTF files from the [GitHub releases](https://github.com/rsms/inter/releases).

## Step 2: Name files correctly

Place font files in your project, for example `assets/fonts/`:

```
assets/
  fonts/
    Inter-Regular.otf
    Inter-Bold.otf
    Inter-Italic.otf
    Inter-BoldItalic.otf
    Inter-Medium.otf
    Inter-SemiBold.otf
```

**The file name must match the PostScript name of the font.** iOS uses the PostScript name to look up fonts at runtime. If the names don't match, the font silently fails to load on iOS while appearing to work on Android.

You can check a font's PostScript name by opening it in Font Book (macOS) or using a tool like [fontdrop.info](https://fontdrop.info).

## Step 3: Load fonts with expo-font

The simplest approach is to use the `expo-font` config plugin in `app.json`:

```bash
bun add expo-font
```

```json title="app.json"
{
  "expo": {
    "plugins": [
      [
        "expo-font",
        {
          "fonts": [
            "./assets/fonts/Inter-Regular.otf",
            "./assets/fonts/Inter-Bold.otf",
            "./assets/fonts/Inter-Italic.otf",
            "./assets/fonts/Inter-BoldItalic.otf",
            "./assets/fonts/Inter-Medium.otf",
            "./assets/fonts/Inter-SemiBold.otf"
          ]
        }
      ]
    ]
  }
}
```

Alternatively, load fonts at runtime with the `useFonts` hook:

```tsx title="App.tsx"
import { useFonts } from "expo-font";

export default function App() {
  const [fontsLoaded] = useFonts({
    "Inter-Regular": require("./assets/fonts/Inter-Regular.otf"),
    "Inter-Bold": require("./assets/fonts/Inter-Bold.otf"),
  });

  if (!fontsLoaded) return null;

  return <>{/* your app */}</>;
}
```

The `app.json` approach is preferred because fonts are available immediately without a loading state.

## Step 4: Verify with inline styles

Before touching your CSS theme, confirm the fonts actually loaded:

```tsx
<Text style={{ fontFamily: "Inter-Regular" }}>
  This should render in Inter
</Text>
```

If this does not work, the issue is with font loading, not with Nativewind. Check your file names and `app.json` config.

## Step 5: Add to your CSS theme

In v5, fonts are defined in CSS using the `@theme` directive in your `global.css`:

```css title="global.css"
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";

@import "nativewind/theme";

@theme {
  --font-inter: "Inter-Regular";
  --font-inter-bold: "Inter-Bold";
  --font-inter-italic: "Inter-Italic";
  --font-inter-bold-italic: "Inter-BoldItalic";
  --font-inter-medium: "Inter-Medium";
  --font-inter-semibold: "Inter-SemiBold";
}
```

Each `--font-*` variable becomes a `font-*` utility class automatically.

> React Native does not support fallback fonts. The value must be a single font name, not a comma-separated list.

## Step 6: Use in components

```tsx
<Text className="font-inter">Regular text</Text>
<Text className="font-inter-bold">Bold text</Text>
<Text className="font-inter-medium">Medium text</Text>
<Text className="font-inter-semibold">SemiBold text</Text>
<Text className="font-inter-italic">Italic text</Text>
```

## v5 vs v4

In v4, fonts were configured in JavaScript via `tailwind.config.js`:

```js
// v4 approach (tailwind.config.js)
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        inter: ["Inter-Regular"],
        "inter-bold": ["Inter-Bold"],
      },
    },
  },
};
```

In v5, this moves to CSS, which is simpler and consistent with how Tailwind CSS v4 works:

```css
/* v5 approach (global.css) */
@theme {
  --font-inter: "Inter-Regular";
  --font-inter-bold: "Inter-Bold";
}
```

The usage in components (`className="font-inter"`) is identical in both versions.

## Common pitfalls

| Problem                                   | Cause                                           | Fix                                                   |
| ----------------------------------------- | ----------------------------------------------- | ----------------------------------------------------- |
| Font works on Android but not iOS         | File name doesn't match PostScript name         | Rename the file to match exactly                      |
| Font doesn't render at all                | Font not loaded by expo-font                    | Check `app.json` plugin config or `useFonts` hook     |
| Using `font-bold` doesn't make Inter bold | `font-bold` sets `fontWeight`, not `fontFamily` | Use `font-inter-bold` to set the bold font family     |
| Variable font doesn't work                | React Native doesn't support variable fonts     | Download static weight files instead                  |
| Font renders as system default            | PostScript name mismatch                        | Open font in Font Book and verify the PostScript name |

## Platform-specific fonts

Use the `ios:` and `android:` variants for platform-specific font overrides:

```tsx
<Text className="font-inter ios:font-inter-medium android:font-inter-semibold">
  Different weights per platform
</Text>
```

Or override the default system fonts in your theme:

```css title="global.css"
@theme {
  --font-sans: "Inter-Regular";
}
```

This makes `font-sans` (the default) use Inter instead of the system font.

# Upgrade a v5 preview (https://www.nativewind.dev/v5/guides/migrate-from-preview)

This guide covers Nativewind 5.0.0-preview\.4 with react-native-css 3.0.7 to the v5 release candidate. Apps on Tailwind 3 need the [v4 migration](https://www.nativewind.dev/v5/guides/migrate-from-v4).

## Update the pair

Preserve your source, manifests, lockfile and configuration, and capture working screens before updating. Use your existing package manager. For npm:

```bash
npm install --save-exact nativewind@5.0.0-rc.0 react-native-css@3.1.0-rc.0
```

RC0 requires the exact engine candidate. Keep working Tailwind 4, PostCSS and `withNativewind` configuration. Use the [split Tailwind imports](https://www.nativewind.dev/v5/getting-started/installation) with unlayered utilities for React Native Web. Expo 57 requires a discovered PostCSS filename such as `postcss.config.mjs`, not `postcss.config.cjs`.

Expo 57.0.22 with React Native 0.86.3, React 19.2.3, Reanimated 4.5.1 and Worklets 0.10.1 is the tested target. An older SDK upgrade needs separate verification.

## Check changed contracts

1. Legacy `@cssInterop` and `@react-native` configuration now reports explicit errors. Use Appearance for native theme selection and `inlineVariables.exclude` for runtime variables.
2. Qualified root selectors such as `:root.dark` are rejected on native. Use `prefers-color-scheme` media queries. Preserve custom browser selectors separately.
3. Unsupported prop declarations were removed: `placeholderClassName`, `indicatorClassName`, `presentationClassName`, `cssInterop` and StatusBar `className`. Use supported native props or [styled mappings](https://www.nativewind.dev/v5/api/styled). TextInput placeholder color uses `placeholder:` utilities.
4. Recheck workarounds for line height, ripple, corner styling and prop mappings against the RC before removing them.

`vars()`, the deprecated Nativewind color scheme hook, `useUnstableNativeVariable` and the `nativeStyleToProp` alias are still available. They do not need to be replaced just to update the RC.

## Migration skill

```bash
npx skills add nativewind/nativewind --skill nativewind-preview-to-rc
```

The [skill](https://github.com/nativewind/nativewind/tree/main/skills/nativewind-preview-to-rc) checks the starting state, including interrupted upgrades, and records remaining verification. Its fixture tests do not replace checks in your application.

## Verify the result

Restart Metro after replacing the engine. Rebuild if native dependencies or configuration change. Check dependency alignment, types, production bundles and actual screens on each supported platform, including input, navigation, themes and animations. On the tested native target, `Appearance.setColorScheme("unspecified")` restores system appearance after an override.

See the [RC compatibility guide](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for platform limits. Android animation cancellation has a known upstream issue. Keep unavailable checks marked as pending.

To revert, restore only this migration's source, manifest, lockfile and configuration changes from the snapshot, reinstall, and rebuild if needed.

# Migrate from v4 (https://www.nativewind.dev/v5/guides/migrate-from-v4)

## Choose the migration path

This guide targets Nativewind 5.0.0-rc.0 and react-native-css 3.1.0-rc.0 from Nativewind v4, including v4.2.7. V4 remains stable and uses Tailwind CSS 3. If you are already on v5 preview\.4, follow [Upgrade a v5 preview](https://www.nativewind.dev/v5/guides/migrate-from-preview).

The RC was tested with Expo 57.0.22, React Native 0.86.3, React 19.2.3, Reanimated 4.5.1 and Worklets 0.10.1. Upgrade and verify an older Expo SDK separately. Do not force native dependency versions just to satisfy a styling migration.

NativewindUI v4 components should remain on Nativewind v4. Use their supported v4 setup instead of partially converting them to v5.

## Use the migration skill

```bash
npx skills add nativewind/nativewind --skill nativewind-v4-to-v5
```

Ask your agent to apply the skill to your app. It includes a read only preflight, checks for custom configuration and component mappings, and recovery instructions. Review the [skill and measured verification scope](https://github.com/nativewind/nativewind/tree/main/skills/nativewind-v4-to-v5). Fixture results do not establish that every application is verified.

## 1. Preserve a working baseline

Work on a branch. Preserve your source, package manifests, lockfile and configuration, including any uncommitted work. Record the package manager and exact starting versions. Capture representative screens and interactions before editing, including themes, animations, navigation and third party components.

## 2. Update the dependency group together

Update Nativewind, its engine and Tailwind/PostCSS together in your manifest before installing with your existing package manager:

```json
{
  "dependencies": {
    "nativewind": "5.0.0-rc.0",
    "react-native-css": "3.1.0-rc.0"
  },
  "devDependencies": {
    "tailwindcss": "4.1.12",
    "@tailwindcss/postcss": "4.1.12",
    "lightningcss": "1.30.1"
  }
}
```

Merge these entries into your existing manifest; do not replace it. Install PostCSS as shown in the [installation guide](https://www.nativewind.dev/v5/getting-started/installation), and let `npx expo install` align Reanimated, Worklets, safe area context and expo-system-ui with your SDK.

Nativewind RC0 requires the exact engine candidate above. The packages cannot be upgraded independently for this release. Remove direct `react-native-css-interop` dependencies only after checking that no application or workspace consumer still needs them.

If npm reports `ERESOLVE` from the stale v4/Tailwind 3 graph, do not use `--force` or `--legacy-peer-deps`. Follow the [tested recovery procedure](https://github.com/nativewind/nativewind/blob/main/skills/nativewind-v4-to-v5/references/installation.md), which saves the intended manifest and lets npm update the styling dependency group without deleting the lockfile. Workspaces require a consumer inventory first.

## 3. Convert Tailwind configuration

Translate custom theme values, plugins and utilities to Tailwind 4 CSS configuration. Preserve any customizations that do not have a verified replacement. Review the [Tailwind upgrade guide](https://tailwindcss.com/docs/upgrade-guide); utility renames alone do not prove the same native appearance.

Replace the Tailwind 3 directives in your root CSS:

```css title="global.css"
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";
@import "nativewind/theme";
```

Keep utilities unlayered so React Native Web defaults do not override them. Add `@source` paths for shared workspace components when needed.

Create or update `postcss.config.mjs`, preserving unrelated plugins:

```js title="postcss.config.mjs"
export default { plugins: { "@tailwindcss/postcss": {} } };
```

Expo 57 does not discover `postcss.config.cjs`. Follow the installation guide to pin lightningcss 1.30.1 through your package manager's overrides or resolutions.

## 4. Update Babel, Metro and TypeScript

Remove `nativewind/babel` and the Nativewind `jsxImportSource` setting from the v4 setup. Keep `babel-preset-expo` and unrelated plugins.

```js title="metro.config.js"
const { getDefaultConfig } = require("expo/metro-config");
const { withNativewind } = require("nativewind/metro");

module.exports = withNativewind(getDefaultConfig(__dirname));
```

Wrap your existing Metro config rather than discarding custom resolvers. The v4 `input` option is no longer needed. Import the root CSS once in `App.tsx` or `app/_layout.tsx`. Ensure the generated `nativewind-env.d.ts` belongs to your TypeScript project.

## 5. Review application contracts

Use [styled](https://www.nativewind.dev/v5/api/styled) for components that need explicit mapping. The RC does not export `cssInterop` or `remapProps` from Nativewind. Do not mechanically rename those functions: `styled` returns a wrapper that must be used, and prop destinations and precedence need to be checked. There is no `global` option. `nativeStyleMapping` is the current mapping option; `nativeStyleToProp` remains a deprecated alias.

For native theme overrides, use `Appearance.setColorScheme("dark")` or `"light"`. On the Expo 57 target, `"unspecified"` restores system appearance. Set `expo.userInterfaceStyle` to `"automatic"`. Preserve any custom browser theme selection separately. See [Dark Mode](https://www.nativewind.dev/v5/core-concepts/dark-mode).

Prefer [VariableContextProvider](https://www.nativewind.dev/v5/guides/themes) for runtime variables and exclude variables that must remain dynamic from compiler inlining. Cross platform lengths need units, for example `"80px"`. `vars()`, the Nativewind color scheme hook and `useUnstableNativeVariable` remain available; deprecated does not mean removed.

Remove legacy `@cssInterop` or `@react-native` configuration after translating its intent. Qualified native root selectors such as `:root.dark` are rejected; use media queries and Appearance on native.

Props such as `placeholderClassName`, `indicatorClassName`, `presentationClassName`, `cssInterop` and StatusBar `className` no longer have declarations for unsupported v5 mappings. Use native props or explicit supported wrappers. TextInput supports `className="placeholder:text-gray-500"`.

Shadows now use React Native `boxShadow`, and animations use Reanimated CSS animations. Compare the affected screens with your baseline. See the [RC compatibility guide](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value and platform limits, including the known Android animation cancellation issue.

## 6. Verify and recover

Restart Metro with `npx expo start --clear`. Rebuild native apps when native dependencies or configuration change. Run typechecks and production bundles, then compare actual rendering and interactions on every supported platform. Include theme override and system restoration, mappings, text entry, navigation and animations.

A successful export does not prove visual parity. Report unavailable or failing runtime checks as verification pending. A second migration pass should make no new source or dependency changes.

To revert, restore only this migration's changes from your source, manifest, lockfile and configuration snapshots. Reinstall with the same package manager and rebuild if native dependencies changed. Preserve unrelated user work.

# Other Bundlers (https://www.nativewind.dev/v5/guides/other-bundlers)

**Coming soon**

# Dynamic Themes (https://www.nativewind.dev/v5/guides/themes)

Nativewind v5 supports dynamic theming through CSS variables and the `VariableContextProvider` component. This lets you change colors, spacing, and other design tokens at runtime without rebuilding your stylesheet.

For static theme customization (adding custom colors, fonts, spacing), see the [Theme](https://www.nativewind.dev/v5/customization/theme) documentation. For dark mode specifically, see [Dark Mode](https://www.nativewind.dev/v5/core-concepts/dark-mode).

## How It Works

1. Define CSS variables in your `global.css` using `@theme` and `:root`
2. Reference those variables in your utility classes (e.g. `bg-primary`, `text-secondary`)
3. Override the variables at runtime using `VariableContextProvider`

The provider uses React context, so any component wrapped by it (and its children) will pick up the overridden values.

## Basic Example

First, define your theme variables in CSS:

```css title="global.css"
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";
@import "nativewind/theme";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
}

:root {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
}
```

> You need to define the variables in both `@theme` (so Tailwind generates the utility classes) and `:root` (so the CSS variables have default values at runtime).

Preserve each variable you override at runtime from native compiler inlining:

```js title="metro.config.js"
const { getDefaultConfig } = require("expo/metro-config");
const { withNativewind } = require("nativewind/metro");

module.exports = withNativewind(getDefaultConfig(__dirname), {
  inlineVariables: {
    exclude: ["--color-primary", "--color-secondary"],
  },
});
```

Add other dynamic tokens to this list, including `--color-foreground` and `--color-muted-foreground` in the multiple themes example below. Use units for cross platform length variables, such as `"80px"`.

Then override them at runtime:

```tsx title="App.tsx"
import { View, Text } from "react-native";
import { VariableContextProvider } from "nativewind";

const christmasTheme = {
  "--color-primary": "red",
  "--color-secondary": "green",
};

export default function App() {
  return (
    <View>
      <Text className="text-primary">Blue (default)</Text>

      <VariableContextProvider value={christmasTheme}>
        <Text className="text-primary">Red (christmas)</Text>
        <Text className="text-secondary">Green (christmas)</Text>
      </VariableContextProvider>
    </View>
  );
}
```

## Multiple Themes with Light/Dark Mode

Combine `VariableContextProvider` with `useColorScheme` from `react-native` to support multiple themes that each have light and dark variants:

```tsx title="components/ThemeProvider.tsx"
import { useColorScheme } from "react-native";
import { VariableContextProvider } from "nativewind";

const themes = {
  brand: {
    light: {
      "--color-foreground": "#000000",
      "--color-muted-foreground": "#64748b",
      "--color-primary": "#3b82f6",
      "--color-secondary": "#8b5cf6",
    },
    dark: {
      "--color-foreground": "#ffffff",
      "--color-muted-foreground": "#a1a1a1",
      "--color-primary": "#60a5fa",
      "--color-secondary": "#a78bfa",
    },
  },
  christmas: {
    light: {
      "--color-foreground": "#000000",
      "--color-muted-foreground": "#64748b",
      "--color-primary": "#dc2626",
      "--color-secondary": "#16a34a",
    },
    dark: {
      "--color-foreground": "#ffffff",
      "--color-muted-foreground": "#a1a1a1",
      "--color-primary": "#f87171",
      "--color-secondary": "#4ade80",
    },
  },
};

export function ThemeProvider({
  name,
  children,
}: {
  name: keyof typeof themes;
  children: React.ReactNode;
}) {
  const appearance = useColorScheme();
  const colorScheme = appearance === "dark" ? "dark" : "light";

  return (
    <VariableContextProvider value={themes[name][colorScheme]}>
      {children}
    </VariableContextProvider>
  );
}
```

```tsx title="app/_layout.tsx"
import "../global.css";
import { Stack } from "expo-router";
import { ThemeProvider } from "@/components/ThemeProvider";

export default function RootLayout() {
  return (
    <ThemeProvider name="brand">
      <Stack />
    </ThemeProvider>
  );
}
```

## Nesting Themes

`VariableContextProvider` inherits from its parent context. You can nest providers to override specific variables while keeping the rest:

```tsx
<VariableContextProvider value={{ "--color-primary": "blue" }}>
  <Text className="text-primary">Blue</Text>

  <VariableContextProvider value={{ "--color-primary": "red" }}>
    <Text className="text-primary">Red (overridden)</Text>
  </VariableContextProvider>
</VariableContextProvider>
```

## Migrating from v4

`vars()` remains available but deprecated in RC0. For new code or a planned refactor, use `VariableContextProvider`:

```diff
- import { vars } from "nativewind";
+ import { VariableContextProvider } from "nativewind";

- const theme = vars({ "--color-primary": "red" });

- <View style={theme}>
-   {children}
- </View>

+ <VariableContextProvider value={{ "--color-primary": "red" }}>
+   {children}
+ </VariableContextProvider>
```

`vars()` is deprecated and will be removed in a future release.

## Platform-Specific Theme Values

Use CSS media queries to set platform-specific defaults:

```css title="global.css"
@theme {
  --color-error: var(--error-color, green);
}

@media ios {
  :root {
    --error-color: red;
  }
}

@media android {
  :root {
    --error-color: blue;
  }
}
```

These can still be overridden at runtime via `VariableContextProvider`.

# Styling Third Party Components (https://www.nativewind.dev/v5/guides/third-party-components)

Components that forward `className` to a supported React Native component can use Nativewind directly. Components that consume only a `style` prop or require individual style values as props need an explicit [styled](https://www.nativewind.dev/v5/api/styled) wrapper.

## Map className to styles

```tsx
import { styled } from "nativewind";
import { ThirdPartyView } from "third-party-library";

const StyledView = styled(ThirdPartyView, { className: "style" });

<StyledView className="bg-blue-500 p-4" />;
```

Render `StyledView`, the returned component. The original component is unchanged. Define wrappers outside your render function to preserve component identity.

## Map styles to component props

The following component reads a color prop rather than forwarding className:

```tsx
import { View } from "react-native";
import { styled } from "nativewind";

function GaugeBase({ color }: { color?: string }) {
  return <View style={{ backgroundColor: color, width: 32, height: 32 }} />;
}

const Gauge = styled(GaugeBase, {
  className: {
    target: false,
    nativeStyleMapping: { color: true },
  },
});

<Gauge className="text-blue-500" />;
```

`target: false` omits a style destination. `color: true` sends the resolved color to the component's `color` prop. A string destination can rename it, for example `nativeStyleMapping: { color: "labelColor" }` for a component that accepts `labelColor`.

Explicit meaningful props can take precedence over generated props. Check both class derived values and explicit overrides in your application.

## Components with multiple style props

Map each class prop to the corresponding supported style prop:

```tsx
const StyledList = styled(ThirdPartyList, {
  className: "style",
  contentContainerClassName: "contentContainerStyle",
});
```

For components that forward styles to another styled consumer, the optional third argument `{ passThrough: true }` can defer resolution. Verify the downstream consumer supports it before using it.

## TypeScript and migration

Use the typed wrapper returned by `styled`. Adding a declaration for an unsupported prop does not implement its runtime mapping. In RC0, props such as `indicatorClassName` and `presentationClassName` are not built in mappings. Use the underlying native prop or an explicitly supported wrapper.

The v4 `cssInterop` and `remapProps` exports are not available from Nativewind RC0. `nativeStyleToProp` remains a deprecated alias for `nativeStyleMapping`, but there is no `global` option. Preserve component identity, verify nested destinations and test native and browser behavior when migrating.

# Using with Monorepos (https://www.nativewind.dev/v5/guides/using-with-monorepos)

Learn how to set up Nativewind in monorepo environments like NX

Nativewind can be used in an Nx Monorepo that is already configured to use Expo and the corresponding plugin [@nx/expo](https://nx.dev/nx-api/expo)

## NX Monorepo Setup

When working with Nativewind in an NX monorepo, there are some specific configurations needed to ensure proper integration. The main challenge is correctly configuring the Metro bundler to work with both NX and Nativewind.

### Prerequisites

Simply configure your Expo project in Nx as per [the Expo setup guide](https://www.nativewind.dev/v5/getting-started/installation)

> Skip the `metro.config.js` setup as we will address this part here.

### Modify your metro.config.js

Add the Nativewind plugin to your `metro.config.js` using a promise chain as shown below:

```js title="metro.config.js"
const { withNativewind } = require("nativewind/metro");

// ... existing Nx configuration

module.exports = withNxMetro(mergeConfig(defaultConfig, customConfig), {
  // ... existing Nx config
}).then((config) => withNativewind(config));
```

## Shared source files

Tailwind must see classes from shared packages. Add paths relative to the CSS file, for example:

```css
@source "../../packages/ui/src";
```

Keep existing Nx/Metro resolver settings and inspect sibling consumers before removing v4 dependencies from a workspace. Verify shared component styles in native and web output.

## Additional Resources

For more complex monorepo setups or specific issues, refer to:

* [NX documentation for React Native](https://nx.dev/recipes/react/react-native)
* [NX documentation for Expo](https://nx.dev/nx-api/expo)
* [Expo documentation for monorepos](https://docs.expo.dev/guides/monorepos/)

# Installation (https://www.nativewind.dev/v5/getting-started/installation/frameworkless)

> Nativewind v5[Expo](https://www.nativewind.dev/v5/getting-started/installation) | [Framework-less](https://www.nativewind.dev/v5/getting-started/installation/frameworkless)## Installation with Framework-less React NativeFramework-less Metro does not parse CSS files and without modification it is incompatible with Nativewind. As the Expo SDK is modular, you can add the Expo Metro config to enable this functionality. This does not require you to switch to the Expo CLI or use an Expo clients.### Install @expo/metro-confignpm```bash
npm install @expo/metro-config
```yarn```bash
yarn add @expo/metro-config
```pnpm```bash
pnpm add @expo/metro-config
```bun```bash
bun add @expo/metro-config
```After installation, follow the [Expo](https://www.nativewind.dev/v5/getting-started/) installation guide, but replace `expo/metro-config` with `@expo/metro-config` inside your Metro config file.

# Installation (https://www.nativewind.dev/v5/getting-started/installation)

> If you'd like to skip manual setup and use Nativewind, you can use the following command to initialize a new Expo project with Nativewind v5 and Tailwind CSS. Check the generated package versions against the RC target below.
>
> npm
>
> ```bash
> npx rn-new@next --nativewind
> ```
>
> yarn
>
> ```bash
> yarn dlx rn-new@next --nativewind
> ```
>
> pnpm
>
> ```bash
> pnpx rn-new@next --nativewind
> ```
>
> bun
>
> ```bash
> bunx rn-new@next --nativewind
> ```

## Nativewind v5 RC0

These instructions target `nativewind@5.0.0-rc.0` with `react-native-css@3.1.0-rc.0`. V4 remains the stable release. Existing apps should follow [Migrate from v4](https://www.nativewind.dev/v5/guides/migrate-from-v4) or [Upgrade a v5 preview](https://www.nativewind.dev/v5/guides/migrate-from-preview).

## Installation with Expo

### 1. Install Nativewind

Install the exact RC pair together. Nativewind 5.0.0-rc.0 requires react-native-css 3.1.0-rc.0; do not combine the RC with an unpinned engine.

npm

```bash
npm install --save-exact nativewind@5.0.0-rc.0 react-native-css@3.1.0-rc.0
```

yarn

```bash
yarn add --exact nativewind@5.0.0-rc.0 react-native-css@3.1.0-rc.0
```

pnpm

```bash
pnpm add --save-exact nativewind@5.0.0-rc.0 react-native-css@3.1.0-rc.0
```

bun

```bash
bun add --exact nativewind@5.0.0-rc.0 react-native-css@3.1.0-rc.0
```

In an Expo project, let Expo select compatible native dependencies:

```bash
npx expo install react-native-reanimated react-native-worklets react-native-safe-area-context expo-system-ui
```

The tested target is Expo 57.0.22, React Native 0.86.3, React 19.2.3, Reanimated 4.5.1 and Worklets 0.10.1. The engine declares React Native >=0.81 and @expo/metro-config >=54 minimums; those minimums do not establish RC verification on every older SDK. Handle an Expo SDK upgrade separately from the styling migration.

### 2. Setup Tailwind CSS

**Install Tailwind CSS**

npm

```bash
npm install --save-dev --save-exact tailwindcss@4.1.12 @tailwindcss/postcss@4.1.12 postcss lightningcss@1.30.1
```

yarn

```bash
yarn add --dev --exact tailwindcss@4.1.12 @tailwindcss/postcss@4.1.12 postcss lightningcss@1.30.1
```

pnpm

```bash
pnpm add --save-dev --save-exact tailwindcss@4.1.12 @tailwindcss/postcss@4.1.12 postcss lightningcss@1.30.1
```

bun

```bash
bun add --dev --exact tailwindcss@4.1.12 @tailwindcss/postcss@4.1.12 postcss lightningcss@1.30.1
```

Optionally, install `prettier-plugin-tailwindcss` as a dev dependency to automatically format your Tailwind CSS code.

**Add Tailwind to your PostCSS configuration**

Create a `postcss.config.mjs` file in the root of your Expo project if you don't already have one, then add `@tailwindcss/postcss` there, or wherever PostCSS is configured in your project.

```js title="postcss.config.mjs"
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
```

Expo 57 discovers `postcss.config.js` and `postcss.config.mjs`; do not name this file `postcss.config.cjs`.

Create a `global.css` file and add the Tailwind directives.

```css title="global.css"
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";

@import "nativewind/theme";
```

> From here onwards, replace `./global.css` with the relative path to the CSS file you just created.

> Keep utilities unlayered as shown above. A single `@import "tailwindcss"` can put utilities below React Native Web defaults in the CSS cascade, even when the build succeeds.

### 3. Create or modify your metro.config.js

Run `npx expo customize metro.config.js` to create a `metro.config.js` file if you don't already have one, then wrap the default config with `withNativewind`.

```js title="metro.config.js"
const { getDefaultConfig } = require("expo/metro-config");
const { withNativewind } = require("nativewind/metro");

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

module.exports = withNativewind(config);
```

### 4. Import your CSS file

```js title="App.js"
import "./global.css";

export default function App() {
  return null; // Replace with your app.
}
```

> You should import your CSS file inside the same file as the top-most component of
> your app. Do **not** import it in the same file that calls
> `AppRegistry.registerComponent` or your app will not Fast Refresh properly.

For Expo Router, import the CSS once in `app/_layout.tsx`. Keep `babel-preset-expo` and any unrelated Babel plugins; remove only the v4 Nativewind preset and JSX import source settings.

For system appearance, install `expo-system-ui` as above and set `"userInterfaceStyle": "automatic"` inside the `expo` object in `app.json`. Rebuild after changing native dependencies or native configuration.

### 5. Override the lightningcss version

Force `lightningcss` to a specific version in your `package.json`:

npm

```json title="package.json"
{
  "overrides": {
    "lightningcss": "1.30.1"
  }
}
```

yarn

```json title="package.json"
{
  "resolutions": {
    "lightningcss": "1.30.1"
  }
}
```

pnpm

```json title="package.json"
{
  "pnpm": {
    "overrides": {
      "lightningcss": "1.30.1"
    }
  }
}
```

bun

```json title="package.json"
{
  "overrides": {
    "lightningcss": "1.30.1"
  }
}
```

> If you don't pin the `lightningcss` version, you may encounter deserialization errors with respect to `global.css` when building your app.

### 6. TypeScript setup (optional)

> You can bypass manually creating this file by running `npx expo start --clear` in your Expo project's root directory.

If you're using TypeScript in your project, you'll need to set up the type definitions. Nativewind extends the React Native types via declaration merging. The simplest method to include the types is to create a new `nativewind-env.d.ts` file and add a [triple-slash directive](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html) referencing the types.

```tsx
/// <reference types="react-native-css/types" />

// NOTE: This file should not be edited and should be committed with your source code. It is generated by react-native-css. If you need to move or disable this file, please see the documentation.
```

> CAUTION
>
> Do not call this file:
>
> * `nativewind.d.ts`
> * The same name as a file or folder in the same directory e.g `app.d.ts` when an `/app` folder exists
> * The same name as a folder in `node_modules`, e.g `react.d.ts`
>
> By doing so, your types will not be picked up by the TypeScript compiler.

Ensure this declaration file is included by your tsconfig. If TypeScript reports an unresolved side effect CSS import, add `declare module "*.css";` to an application declaration file included by that project. Do not retain obsolete v4 declarations to silence missing RC props.

## Try it out!

Create a simple component to test your Nativewind setup:

```tsx title="App.tsx"
import "./global.css"
import { Text, View } from "react-native";

export default function App() {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <Text className="text-xl font-bold text-blue-500">
        Welcome to Nativewind!
      </Text>
    </View>
  );
}
```

This example shows:

* Using `className` prop to style components
* Tailwind utility classes like `flex-1`, `items-center`, `justify-center`
* Color utilities like `bg-white`, `text-blue-500`
* Typography utilities like `text-xl`, `font-bold`

If you see the styled text centered on a white background, Nativewind is working correctly!

## Additional Setup Guides

* [Editor Setup](https://www.nativewind.dev/v5/getting-started/editor-setup) - Learn how to set up your editor to use Nativewind
* [Other Bundlers](https://www.nativewind.dev/v5/guides/other-bundlers) - Learn how to use Nativewind with other bundlers

# Next.js (https://www.nativewind.dev/v5/getting-started/installation/nextjs)

The v5 RC is verified with the Expo 57 Metro integration. A complete Next.js integration has not been verified for this candidate.

The v4 recipe using `nativewind/preset`, `jsxImportSource: "nativewind"` and `react-native-css-interop` does not apply to v5. Do not copy that setup into an RC project.

For a supported starting point, use the [Expo installation](https://www.nativewind.dev/v5/getting-started/installation), including its web target. Projects maintaining a v4 Next.js integration should use the [v4 Next.js guide](https://www.nativewind.dev/docs/getting-started/installation/nextjs).

A v5 integration outside Metro needs Tailwind 4/PostCSS compilation, React Native Web setup and the appropriate component import transforms. Installing the package pair alone does not provide those pieces. Verify rendering, navigation and production output before treating a custom integration as supported.

# Screen Readers (https://www.nativewind.dev/v5/tailwind/accessibility/screen-readers)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/screen-readers)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class         | Support     |
| ------------- | ----------- |
| `sr-only`     | ✅ Supported |
| `not-sr-only` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Background Attachment (https://www.nativewind.dev/v5/tailwind/backgrounds/background-attachment)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/background-attachment)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class       | Support     |
| ----------- | ----------- |
| `bg-fixed`  | 🌐 Web only |
| `bg-local`  | 🌐 Web only |
| `bg-scroll` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Background Clip (https://www.nativewind.dev/v5/tailwind/backgrounds/background-clip)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/background-clip)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class             | Support     |
| ----------------- | ----------- |
| `bg-clip-border`  | 🌐 Web only |
| `bg-clip-padding` | 🌐 Web only |
| `bg-clip-content` | 🌐 Web only |
| `bg-clip-text`    | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Background Color (https://www.nativewind.dev/v5/tailwind/backgrounds/background-color)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/background-color)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class            | Support     |
| ---------------- | ----------- |
| `bg-{color}`     | ✅ Supported |
| `bg-[color]`     | ✅ Supported |
| `bg-current`     | ✅ Supported |
| `bg-transparent` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Background Image (https://www.nativewind.dev/v5/tailwind/backgrounds/background-image)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/background-image)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class               | Support     |
| ------------------- | ----------- |
| `bg-none`           | 🌐 Web only |
| `bg-gradient-to-t`  | 🌐 Web only |
| `bg-gradient-to-tr` | 🌐 Web only |
| `bg-gradient-to-r`  | 🌐 Web only |
| `bg-gradient-to-br` | 🌐 Web only |
| `bg-gradient-to-b`  | 🌐 Web only |
| `bg-gradient-to-bl` | 🌐 Web only |
| `bg-gradient-to-l`  | 🌐 Web only |
| `bg-gradient-to-tl` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Background Origin (https://www.nativewind.dev/v5/tailwind/backgrounds/background-origin)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/background-origin)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class               | Support     |
| ------------------- | ----------- |
| `bg-origin-border`  | 🌐 Web only |
| `bg-origin-padding` | 🌐 Web only |
| `bg-origin-content` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Background Position (https://www.nativewind.dev/v5/tailwind/backgrounds/background-position)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/background-position)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class             | Support     |
| ----------------- | ----------- |
| `bg-bottom`       | 🌐 Web only |
| `bg-center`       | 🌐 Web only |
| `bg-left`         | 🌐 Web only |
| `bg-left-bottom`  | 🌐 Web only |
| `bg-left-top`     | 🌐 Web only |
| `bg-right`        | 🌐 Web only |
| `bg-right-bottom` | 🌐 Web only |
| `bg-right-top`    | 🌐 Web only |
| `bg-top`          | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Background Repeat (https://www.nativewind.dev/v5/tailwind/backgrounds/background-repeat)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/background-repeat)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class             | Support     |
| ----------------- | ----------- |
| `bg-repeat`       | 🌐 Web only |
| `bg-no-repeat`    | 🌐 Web only |
| `bg-repeat-x`     | 🌐 Web only |
| `bg-repeat-y`     | 🌐 Web only |
| `bg-repeat-round` | 🌐 Web only |
| `bg-repeat-space` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Background Size (https://www.nativewind.dev/v5/tailwind/backgrounds/background-size)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/background-size)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class        | Support     |
| ------------ | ----------- |
| `bg-auto`    | 🌐 Web only |
| `bg-cover`   | 🌐 Web only |
| `bg-contain` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Gradient Color Stops (https://www.nativewind.dev/v5/tailwind/backgrounds/gradient-color-stops)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/gradient-color-stops)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class          | Support     |
| -------------- | ----------- |
| `from-{color}` | 🌐 Web only |
| `via-{color}`  | 🌐 Web only |
| `to-{color}`   | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Border Color (https://www.nativewind.dev/v5/tailwind/borders/border-color)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/border-color)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class              | Support                 |
| ------------------ | ----------------------- |
| `border-{color}`   | ✅ Supported             |
| `border-[color]`   | ✅ Supported             |
| `border-x-{color}` | ✅ Supported             |
| `border-y-{color}` | ✅ Supported             |
| `border-t-{color}` | ✅ Supported             |
| `border-r-{color}` | ✅ Supported             |
| `border-b-{color}` | ✅ Supported             |
| `border-l-{color}` | ✅ Supported             |
| `border-current`   | ✅ Supported             |
| `border-inherit`   | Not supported on native |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Border Radius (https://www.nativewind.dev/v5/tailwind/borders/border-radius)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/border-radius)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class            | Support     |
| ---------------- | ----------- |
| `rounded-{n}`    | ✅ Supported |
| `rounded-[n]`    | ✅ Supported |
| `rounded-t-{n}`  | ✅ Supported |
| `rounded-b-{n}`  | ✅ Supported |
| `rounded-l-{n}`  | ✅ Supported |
| `rounded-r-{n}`  | ✅ Supported |
| `rounded-tl-{n}` | ✅ Supported |
| `rounded-tr-{n}` | ✅ Supported |
| `rounded-bl-{n}` | ✅ Supported |
| `rounded-br-{n}` | ✅ Supported |
| `rounded-full`   | ✅ Supported |
| `rounded-none`   | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Border Style (https://www.nativewind.dev/v5/tailwind/borders/border-style)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/border-style)

## RC notes

Use `border-0` to remove a native border by setting its width. The CSS `border-none` style is rejected.

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class           | Support                 |
| --------------- | ----------------------- |
| `border-solid`  | ✅ Supported             |
| `border-dashed` | ✅ Supported             |
| `border-dotted` | ✅ Supported             |
| `border-none`   | Not supported on native |
| `border-double` | 🌐 Web only             |
| `border-hidden` | 🌐 Web only             |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Border Width (https://www.nativewind.dev/v5/tailwind/borders/border-width)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/border-width)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class          | Support     |
| -------------- | ----------- |
| `border-{n}`   | ✅ Supported |
| `border-[n]`   | ✅ Supported |
| `border-x-{n}` | ✅ Supported |
| `border-y-{n}` | ✅ Supported |
| `border-t-{n}` | ✅ Supported |
| `border-r-{n}` | ✅ Supported |
| `border-b-{n}` | ✅ Supported |
| `border-l-{n}` | ✅ Supported |
| `border-s-{n}` | ✅ Supported |
| `border-e-{n}` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Divide Color (https://www.nativewind.dev/v5/tailwind/borders/divide-color)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/divide-color)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class            | Support     |
| ---------------- | ----------- |
| `divide-{color}` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Divide Style (https://www.nativewind.dev/v5/tailwind/borders/divide-style)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/divide-style)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class           | Support     |
| --------------- | ----------- |
| `divide-solid`  | 🌐 Web only |
| `divide-dashed` | 🌐 Web only |
| `divide-dotted` | 🌐 Web only |
| `divide-double` | 🌐 Web only |
| `divide-none`   | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Divide Width (https://www.nativewind.dev/v5/tailwind/borders/divide-width)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/divide-width)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class          | Support     |
| -------------- | ----------- |
| `divide-x-{n}` | 🌐 Web only |
| `divide-y-{n}` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Outline Color (https://www.nativewind.dev/v5/tailwind/borders/outline-color)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/outline-color)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class             | Support     |
| ----------------- | ----------- |
| `outline-{color}` | ✅ Supported |
| `outline-[color]` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Outline Offset (https://www.nativewind.dev/v5/tailwind/borders/outline-offset)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/outline-offset)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                 | Support     |
| --------------------- | ----------- |
| `outline-offset-{n}`  | ✅ Supported |
| `-outline-offset-{n}` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Outline Style (https://www.nativewind.dev/v5/tailwind/borders/outline-style)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/outline-style)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class            | Support                 |
| ---------------- | ----------------------- |
| `outline-solid`  | ✅ Supported             |
| `outline-dashed` | ✅ Supported             |
| `outline-dotted` | ✅ Supported             |
| `outline-double` | Not supported on native |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Outline Width (https://www.nativewind.dev/v5/tailwind/borders/outline-width)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/outline-width)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class         | Support     |
| ------------- | ----------- |
| `outline-{n}` | ✅ Supported |
| `outline-[n]` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Ring Color (https://www.nativewind.dev/v5/tailwind/borders/ring-color)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/ring-color)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class          | Support     |
| -------------- | ----------- |
| `ring-{color}` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Ring Offset Color (https://www.nativewind.dev/v5/tailwind/borders/ring-offset-color)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/ring-offset-color)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                 | Support     |
| --------------------- | ----------- |
| `ring-offset-{color}` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Ring Offset Width (https://www.nativewind.dev/v5/tailwind/borders/ring-offset-width)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/ring-offset-width)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class             | Support     |
| ----------------- | ----------- |
| `ring-offset-{n}` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Ring Width (https://www.nativewind.dev/v5/tailwind/borders/ring-width)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/ring-width)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class      | Support     |
| ---------- | ----------- |
| `ring-{n}` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Background Blend Mode (https://www.nativewind.dev/v5/tailwind/effects/background-blend-mode)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/background-blend-mode)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                  | Support     |
| ---------------------- | ----------- |
| `bg-blend-normal`      | 🌐 Web only |
| `bg-blend-multiply`    | 🌐 Web only |
| `bg-blend-screen`      | 🌐 Web only |
| `bg-blend-overlay`     | 🌐 Web only |
| `bg-blend-darken`      | 🌐 Web only |
| `bg-blend-lighten`     | 🌐 Web only |
| `bg-blend-color-dodge` | 🌐 Web only |
| `bg-blend-color-burn`  | 🌐 Web only |
| `bg-blend-hard-light`  | 🌐 Web only |
| `bg-blend-soft-light`  | 🌐 Web only |
| `bg-blend-difference`  | 🌐 Web only |
| `bg-blend-exclusion`   | 🌐 Web only |
| `bg-blend-hue`         | 🌐 Web only |
| `bg-blend-saturation`  | 🌐 Web only |
| `bg-blend-color`       | 🌐 Web only |
| `bg-blend-luminosity`  | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Box Shadow Color (https://www.nativewind.dev/v5/tailwind/effects/box-shadow-color)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/box-shadow-color)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class            | Support     |
| ---------------- | ----------- |
| `shadow-{color}` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Box Shadow (https://www.nativewind.dev/v5/tailwind/effects/box-shadow)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/box-shadow)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class         | Support     |
| ------------- | ----------- |
| `shadow-sm`   | ✅ Supported |
| `shadow`      | ✅ Supported |
| `shadow-md`   | ✅ Supported |
| `shadow-lg`   | ✅ Supported |
| `shadow-xl`   | ✅ Supported |
| `shadow-2xl`  | ✅ Supported |
| `shadow-none` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Mix Blend Mode (https://www.nativewind.dev/v5/tailwind/effects/mix-blend-mode)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/mix-blend-mode)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                    | Support     |
| ------------------------ | ----------- |
| `mix-blend-normal`       | 🌐 Web only |
| `mix-blend-multiply`     | 🌐 Web only |
| `mix-blend-screen`       | 🌐 Web only |
| `mix-blend-overlay`      | 🌐 Web only |
| `mix-blend-darken`       | 🌐 Web only |
| `mix-blend-lighten`      | 🌐 Web only |
| `mix-blend-color-dodge`  | 🌐 Web only |
| `mix-blend-color-burn`   | 🌐 Web only |
| `mix-blend-hard-light`   | 🌐 Web only |
| `mix-blend-soft-light`   | 🌐 Web only |
| `mix-blend-difference`   | 🌐 Web only |
| `mix-blend-exclusion`    | 🌐 Web only |
| `mix-blend-hue`          | 🌐 Web only |
| `mix-blend-saturation`   | 🌐 Web only |
| `mix-blend-color`        | 🌐 Web only |
| `mix-blend-luminosity`   | 🌐 Web only |
| `mix-blend-plus-darker`  | 🌐 Web only |
| `mix-blend-plus-lighter` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Opacity (https://www.nativewind.dev/v5/tailwind/effects/opacity)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/opacity)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class         | Support     |
| ------------- | ----------- |
| `opacity-{n}` | ✅ Supported |
| `opacity-[n]` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Backdrop Blur (https://www.nativewind.dev/v5/tailwind/filters/backdrop-blur)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/backdrop-blur)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                | Support     |
| -------------------- | ----------- |
| `backdrop-blur-none` | 🌐 Web only |
| `backdrop-blur-sm`   | 🌐 Web only |
| `backdrop-blur`      | 🌐 Web only |
| `backdrop-blur-md`   | 🌐 Web only |
| `backdrop-blur-lg`   | 🌐 Web only |
| `backdrop-blur-xl`   | 🌐 Web only |
| `backdrop-blur-2xl`  | 🌐 Web only |
| `backdrop-blur-3xl`  | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Backdrop Brightness (https://www.nativewind.dev/v5/tailwind/filters/backdrop-brightness)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/backdrop-brightness)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                     | Support     |
| ------------------------- | ----------- |
| `backdrop-brightness-{n}` | 🌐 Web only |
| `backdrop-brightness-[n]` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Backdrop Contrast (https://www.nativewind.dev/v5/tailwind/filters/backdrop-contrast)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/backdrop-contrast)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                   | Support     |
| ----------------------- | ----------- |
| `backdrop-contrast-{n}` | 🌐 Web only |
| `backdrop-contrast-[n]` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Backdrop Grayscale (https://www.nativewind.dev/v5/tailwind/filters/backdrop-grayscale)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/backdrop-grayscale)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                  | Support     |
| ---------------------- | ----------- |
| `backdrop-grayscale`   | 🌐 Web only |
| `backdrop-grayscale-0` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Backdrop Hue Rotate (https://www.nativewind.dev/v5/tailwind/filters/backdrop-hue-rotate)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/backdrop-hue-rotate)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                     | Support     |
| ------------------------- | ----------- |
| `backdrop-hue-rotate-{n}` | 🌐 Web only |
| `backdrop-hue-rotate-[n]` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Backdrop Invert (https://www.nativewind.dev/v5/tailwind/filters/backdrop-invert)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/backdrop-invert)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class               | Support     |
| ------------------- | ----------- |
| `backdrop-invert`   | 🌐 Web only |
| `backdrop-invert-0` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Backdrop Opacity (https://www.nativewind.dev/v5/tailwind/filters/backdrop-opacity)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/backdrop-opacity)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                  | Support     |
| ---------------------- | ----------- |
| `backdrop-opacity-{n}` | 🌐 Web only |
| `backdrop-opacity-[n]` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Backdrop Saturate (https://www.nativewind.dev/v5/tailwind/filters/backdrop-saturate)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/backdrop-saturate)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                   | Support     |
| ----------------------- | ----------- |
| `backdrop-saturate-{n}` | 🌐 Web only |
| `backdrop-saturate-[n]` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Backdrop Sepia (https://www.nativewind.dev/v5/tailwind/filters/backdrop-sepia)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/backdrop-sepia)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class              | Support     |
| ------------------ | ----------- |
| `backdrop-sepia`   | 🌐 Web only |
| `backdrop-sepia-0` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Blur (https://www.nativewind.dev/v5/tailwind/filters/blur)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/blur)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class       | Support     |
| ----------- | ----------- |
| `blur-none` | ✅ Supported |
| `blur-sm`   | ✅ Supported |
| `blur`      | ✅ Supported |
| `blur-md`   | ✅ Supported |
| `blur-lg`   | ✅ Supported |
| `blur-xl`   | ✅ Supported |
| `blur-2xl`  | ✅ Supported |
| `blur-3xl`  | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Brightness (https://www.nativewind.dev/v5/tailwind/filters/brightness)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/brightness)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class            | Support     |
| ---------------- | ----------- |
| `brightness-{n}` | ✅ Supported |
| `brightness-[n]` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Contrast (https://www.nativewind.dev/v5/tailwind/filters/contrast)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/contrast)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class          | Support     |
| -------------- | ----------- |
| `contrast-{n}` | ✅ Supported |
| `contrast-[n]` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Drop Shadow (https://www.nativewind.dev/v5/tailwind/filters/drop-shadow)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/drop-shadow)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class              | Support     |
| ------------------ | ----------- |
| `drop-shadow`      | ✅ Supported |
| `drop-shadow-sm`   | ✅ Supported |
| `drop-shadow-md`   | ✅ Supported |
| `drop-shadow-lg`   | ✅ Supported |
| `drop-shadow-xl`   | ✅ Supported |
| `drop-shadow-2xl`  | ✅ Supported |
| `drop-shadow-none` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Grayscale (https://www.nativewind.dev/v5/tailwind/filters/grayscale)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/grayscale)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class         | Support     |
| ------------- | ----------- |
| `grayscale`   | ✅ Supported |
| `grayscale-0` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Hue Rotate (https://www.nativewind.dev/v5/tailwind/filters/hue-rotate)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/hue-rotate)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class            | Support     |
| ---------------- | ----------- |
| `hue-rotate-{n}` | ✅ Supported |
| `hue-rotate-[n]` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Invert (https://www.nativewind.dev/v5/tailwind/filters/invert)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/invert)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class      | Support     |
| ---------- | ----------- |
| `invert`   | ✅ Supported |
| `invert-0` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Saturate (https://www.nativewind.dev/v5/tailwind/filters/saturate)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/saturate)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class          | Support     |
| -------------- | ----------- |
| `saturate-{n}` | ✅ Supported |
| `saturate-[n]` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Sepia (https://www.nativewind.dev/v5/tailwind/filters/sepia)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/sepia)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class     | Support     |
| --------- | ----------- |
| `sepia`   | ✅ Supported |
| `sepia-0` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Align Content (https://www.nativewind.dev/v5/tailwind/flexbox/align-content)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/align-content)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class             | Support     |
| ----------------- | ----------- |
| `content-center`  | ✅ Supported |
| `content-start`   | ✅ Supported |
| `content-end`     | ✅ Supported |
| `content-between` | ✅ Supported |
| `content-around`  | ✅ Supported |
| `content-evenly`  | ✅ Supported |
| `content-stretch` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Align Items (https://www.nativewind.dev/v5/tailwind/flexbox/align-items)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/align-items)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class            | Support     |
| ---------------- | ----------- |
| `items-center`   | ✅ Supported |
| `items-start`    | ✅ Supported |
| `items-end`      | ✅ Supported |
| `items-baseline` | ✅ Supported |
| `items-stretch`  | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Align Self (https://www.nativewind.dev/v5/tailwind/flexbox/align-self)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/align-self)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class           | Support     |
| --------------- | ----------- |
| `self-auto`     | ✅ Supported |
| `self-start`    | ✅ Supported |
| `self-end`      | ✅ Supported |
| `self-center`   | ✅ Supported |
| `self-stretch`  | ✅ Supported |
| `self-baseline` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Flex Basis (https://www.nativewind.dev/v5/tailwind/flexbox/flex-basis)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/flex-basis)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class        | Support                 |
| ------------ | ----------------------- |
| `basis-{n}`  | ✅ Supported             |
| `basis-[n]`  | ✅ Supported             |
| `basis-auto` | Not supported on native |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Flex Direction (https://www.nativewind.dev/v5/tailwind/flexbox/flex-direction)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/flex-direction)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class              | Support     |
| ------------------ | ----------- |
| `flex-row`         | ✅ Supported |
| `flex-col`         | ✅ Supported |
| `flex-row-reverse` | ✅ Supported |
| `flex-col-reverse` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Flex Grow (https://www.nativewind.dev/v5/tailwind/flexbox/flex-grow)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/flex-grow)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class      | Support     |
| ---------- | ----------- |
| `grow`     | ✅ Supported |
| `grow-0`   | ✅ Supported |
| `grow-[n]` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Flex Shrink (https://www.nativewind.dev/v5/tailwind/flexbox/flex-shrink)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/flex-shrink)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class      | Support     |
| ---------- | ----------- |
| `shrink`   | ✅ Supported |
| `shrink-0` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Flex Wrap (https://www.nativewind.dev/v5/tailwind/flexbox/flex-wrap)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/flex-wrap)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class               | Support     |
| ------------------- | ----------- |
| `flex-wrap`         | ✅ Supported |
| `flex-nowrap`       | ✅ Supported |
| `flex-wrap-reverse` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Flex (https://www.nativewind.dev/v5/tailwind/flexbox/flex)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/flex)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class          | Support     |
| -------------- | ----------- |
| `flex-1`       | ✅ Supported |
| `flex-auto`    | ✅ Supported |
| `flex-initial` | ✅ Supported |
| `flex-none`    | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Gap (https://www.nativewind.dev/v5/tailwind/flexbox/gap)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/gap)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class       | Support     |
| ----------- | ----------- |
| `gap-{n}`   | ✅ Supported |
| `gap-[n]`   | ✅ Supported |
| `gap-x-{n}` | ✅ Supported |
| `gap-x-[n]` | ✅ Supported |
| `gap-y-{n}` | ✅ Supported |
| `gap-y-[n]` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Grid Auto Columns (https://www.nativewind.dev/v5/tailwind/flexbox/grid-auto-columns)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/grid-auto-columns)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class            | Support     |
| ---------------- | ----------- |
| `auto-cols-auto` | 🌐 Web only |
| `auto-cols-min`  | 🌐 Web only |
| `auto-cols-max`  | 🌐 Web only |
| `auto-cols-fr`   | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Grid Auto Flow (https://www.nativewind.dev/v5/tailwind/flexbox/grid-auto-flow)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/grid-auto-flow)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                 | Support     |
| --------------------- | ----------- |
| `grid-flow-row`       | 🌐 Web only |
| `grid-flow-col`       | 🌐 Web only |
| `grid-flow-dense`     | 🌐 Web only |
| `grid-flow-row-dense` | 🌐 Web only |
| `grid-flow-col-dense` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Grid Auto Rows (https://www.nativewind.dev/v5/tailwind/flexbox/grid-auto-rows)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/grid-auto-rows)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class            | Support     |
| ---------------- | ----------- |
| `auto-rows-auto` | 🌐 Web only |
| `auto-rows-min`  | 🌐 Web only |
| `auto-rows-max`  | 🌐 Web only |
| `auto-rows-fr`   | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Grid Column Start / End (https://www.nativewind.dev/v5/tailwind/flexbox/grid-column)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/grid-column)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class           | Support     |
| --------------- | ----------- |
| `col-span-{n}`  | 🌐 Web only |
| `col-start-{n}` | 🌐 Web only |
| `col-end-{n}`   | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Grid Row Start / End (https://www.nativewind.dev/v5/tailwind/flexbox/grid-row)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/grid-row)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class           | Support     |
| --------------- | ----------- |
| `row-span-{n}`  | 🌐 Web only |
| `row-start-{n}` | 🌐 Web only |
| `row-end-{n}`   | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Grid Template Columns (https://www.nativewind.dev/v5/tailwind/flexbox/grid-template-columns)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/grid-template-columns)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class           | Support     |
| --------------- | ----------- |
| `grid-cols-{n}` | 🌐 Web only |
| `grid-cols-[n]` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Grid Template Rows (https://www.nativewind.dev/v5/tailwind/flexbox/grid-template-rows)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/grid-template-rows)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class           | Support     |
| --------------- | ----------- |
| `grid-rows-{n}` | 🌐 Web only |
| `grid-rows-[n]` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Justify Content (https://www.nativewind.dev/v5/tailwind/flexbox/justify-content)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/justify-content)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class             | Support     |
| ----------------- | ----------- |
| `justify-start`   | ✅ Supported |
| `justify-end`     | ✅ Supported |
| `justify-center`  | ✅ Supported |
| `justify-between` | ✅ Supported |
| `justify-around`  | ✅ Supported |
| `justify-evenly`  | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Justify Items (https://www.nativewind.dev/v5/tailwind/flexbox/justify-items)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/justify-items)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                   | Support     |
| ----------------------- | ----------- |
| `justify-items-start`   | 🌐 Web only |
| `justify-items-end`     | 🌐 Web only |
| `justify-items-center`  | 🌐 Web only |
| `justify-items-stretch` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Justify Self (https://www.nativewind.dev/v5/tailwind/flexbox/justify-self)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/justify-self)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                  | Support     |
| ---------------------- | ----------- |
| `justify-self-auto`    | 🌐 Web only |
| `justify-self-start`   | 🌐 Web only |
| `justify-self-end`     | 🌐 Web only |
| `justify-self-center`  | 🌐 Web only |
| `justify-self-stretch` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Order (https://www.nativewind.dev/v5/tailwind/flexbox/order)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/order)

## RC notes

Arrange native children in their intended order. CSS flex order does not reorder native views.

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class         | Support                 |
| ------------- | ----------------------- |
| `order-{n}`   | Not supported on native |
| `order-first` | Not supported on native |
| `order-last`  | Not supported on native |
| `order-none`  | Not supported on native |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Place Content (https://www.nativewind.dev/v5/tailwind/flexbox/place-content)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/place-content)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                   | Support     |
| ----------------------- | ----------- |
| `place-content-center`  | 🌐 Web only |
| `place-content-start`   | 🌐 Web only |
| `place-content-end`     | 🌐 Web only |
| `place-content-between` | 🌐 Web only |
| `place-content-around`  | 🌐 Web only |
| `place-content-evenly`  | 🌐 Web only |
| `place-content-stretch` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Place Items (https://www.nativewind.dev/v5/tailwind/flexbox/place-items)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/place-items)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                 | Support     |
| --------------------- | ----------- |
| `place-items-start`   | 🌐 Web only |
| `place-items-end`     | 🌐 Web only |
| `place-items-center`  | 🌐 Web only |
| `place-items-stretch` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Place Self (https://www.nativewind.dev/v5/tailwind/flexbox/place-self)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/place-self)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                | Support     |
| -------------------- | ----------- |
| `place-self-auto`    | 🌐 Web only |
| `place-self-start`   | 🌐 Web only |
| `place-self-end`     | 🌐 Web only |
| `place-self-center`  | 🌐 Web only |
| `place-self-stretch` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Accent Color (https://www.nativewind.dev/v5/tailwind/interactivity/accent-color)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/accent-color)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class            | Support     |
| ---------------- | ----------- |
| `accent-{color}` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Appearance (https://www.nativewind.dev/v5/tailwind/interactivity/appearance)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/appearance)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class             | Support     |
| ----------------- | ----------- |
| `appearance-none` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Caret Color (https://www.nativewind.dev/v5/tailwind/interactivity/caret-color)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/caret-color)

## RC notes

The RC caret mapping uses Android TextInput `cursorColor`. This does not establish iOS support for that prop.

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class           | Support                 |
| --------------- | ----------------------- |
| `caret-{color}` | ✔️ Partial Support      |
| `caret-[color]` | ✔️ Partial Support      |
| `caret-current` | ✔️ Partial Support      |
| `caret-inherit` | Not supported on native |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Cursor (https://www.nativewind.dev/v5/tailwind/interactivity/cursor)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/cursor)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                  | Support     |
| ---------------------- | ----------- |
| `cursor-auto`          | 🌐 Web only |
| `cursor-default`       | 🌐 Web only |
| `cursor-pointer`       | 🌐 Web only |
| `cursor-wait`          | 🌐 Web only |
| `cursor-text`          | 🌐 Web only |
| `cursor-move`          | 🌐 Web only |
| `cursor-help`          | 🌐 Web only |
| `cursor-not-allowed`   | 🌐 Web only |
| `cursor-none`          | 🌐 Web only |
| `cursor-context-menu`  | 🌐 Web only |
| `cursor-progress`      | 🌐 Web only |
| `cursor-cell`          | 🌐 Web only |
| `cursor-crosshair`     | 🌐 Web only |
| `cursor-vertical-text` | 🌐 Web only |
| `cursor-alias`         | 🌐 Web only |
| `cursor-copy`          | 🌐 Web only |
| `cursor-no-drop`       | 🌐 Web only |
| `cursor-grab`          | 🌐 Web only |
| `cursor-grabbing`      | 🌐 Web only |
| `cursor-all-scroll`    | 🌐 Web only |
| `cursor-col-resize`    | 🌐 Web only |
| `cursor-row-resize`    | 🌐 Web only |
| `cursor-n-resize`      | 🌐 Web only |
| `cursor-e-resize`      | 🌐 Web only |
| `cursor-s-resize`      | 🌐 Web only |
| `cursor-w-resize`      | 🌐 Web only |
| `cursor-ne-resize`     | 🌐 Web only |
| `cursor-nw-resize`     | 🌐 Web only |
| `cursor-se-resize`     | 🌐 Web only |
| `cursor-sw-resize`     | 🌐 Web only |
| `cursor-ew-resize`     | 🌐 Web only |
| `cursor-ns-resize`     | 🌐 Web only |
| `cursor-nesw-resize`   | 🌐 Web only |
| `cursor-nwse-resize`   | 🌐 Web only |
| `cursor-zoom-in`       | 🌐 Web only |
| `cursor-zoom-out`      | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Pointer Events (https://www.nativewind.dev/v5/tailwind/interactivity/pointer-events)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/pointer-events)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                 | Support     |
| --------------------- | ----------- |
| `pointer-events-none` | ✅ Supported |
| `pointer-events-auto` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Resize (https://www.nativewind.dev/v5/tailwind/interactivity/resize)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/resize)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class         | Support     |
| ------------- | ----------- |
| `resize-none` | 🌐 Web only |
| `resize-y`    | 🌐 Web only |
| `resize-x`    | 🌐 Web only |
| `resize`      | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Scroll Behavior (https://www.nativewind.dev/v5/tailwind/interactivity/scroll-behavior)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/scroll-behavior)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class           | Support     |
| --------------- | ----------- |
| `scroll-auto`   | 🌐 Web only |
| `scroll-smooth` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Scroll Margin (https://www.nativewind.dev/v5/tailwind/interactivity/scroll-margin)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/scroll-margin)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class           | Support     |
| --------------- | ----------- |
| `scroll-m-{n}`  | 🌐 Web only |
| `scroll-mx-{n}` | 🌐 Web only |
| `scroll-my-{n}` | 🌐 Web only |
| `scroll-ms-{n}` | 🌐 Web only |
| `scroll-me-{n}` | 🌐 Web only |
| `scroll-mt-{n}` | 🌐 Web only |
| `scroll-mr-{n}` | 🌐 Web only |
| `scroll-mb-{n}` | 🌐 Web only |
| `scroll-ml-{n}` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Scroll Padding (https://www.nativewind.dev/v5/tailwind/interactivity/scroll-padding)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/scroll-padding)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class           | Support     |
| --------------- | ----------- |
| `scroll-p-{n}`  | 🌐 Web only |
| `scroll-px-{n}` | 🌐 Web only |
| `scroll-py-{n}` | 🌐 Web only |
| `scroll-ps-{n}` | 🌐 Web only |
| `scroll-pe-{n}` | 🌐 Web only |
| `scroll-pt-{n}` | 🌐 Web only |
| `scroll-pr-{n}` | 🌐 Web only |
| `scroll-pb-{n}` | 🌐 Web only |
| `scroll-pl-{n}` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Scroll Snap Align (https://www.nativewind.dev/v5/tailwind/interactivity/scroll-snap-align)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/scroll-snap-align)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class             | Support     |
| ----------------- | ----------- |
| `snap-start`      | 🌐 Web only |
| `snap-end`        | 🌐 Web only |
| `snap-center`     | 🌐 Web only |
| `snap-align-none` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Scroll Snap Stop (https://www.nativewind.dev/v5/tailwind/interactivity/scroll-snap-stop)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/scroll-snap-stop)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class         | Support     |
| ------------- | ----------- |
| `snap-normal` | 🌐 Web only |
| `snap-always` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Scroll Snap Type (https://www.nativewind.dev/v5/tailwind/interactivity/scroll-snap-type)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/scroll-snap-type)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class            | Support     |
| ---------------- | ----------- |
| `snap-none`      | 🌐 Web only |
| `snap-x`         | 🌐 Web only |
| `snap-y`         | 🌐 Web only |
| `snap-both`      | 🌐 Web only |
| `snap-mandatory` | 🌐 Web only |
| `snap-proximity` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Touch Action (https://www.nativewind.dev/v5/tailwind/interactivity/touch-action)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/touch-action)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                | Support     |
| -------------------- | ----------- |
| `touch-auto`         | 🌐 Web only |
| `touch-none`         | 🌐 Web only |
| `touch-pan-x`        | 🌐 Web only |
| `touch-pan-left`     | 🌐 Web only |
| `touch-pan-right`    | 🌐 Web only |
| `touch-pan-y`        | 🌐 Web only |
| `touch-pan-up`       | 🌐 Web only |
| `touch-pan-down`     | 🌐 Web only |
| `touch-pinch-zoom`   | 🌐 Web only |
| `touch-manipulation` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# User Select (https://www.nativewind.dev/v5/tailwind/interactivity/user-select)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/user-select)

## RC notes

The RC maps native `select-all` and `select-auto` to enabled Text selection, without promising CSS selection expansion semantics. In the pinned WebKit engine, `select-none` needs an explicit `WebkitUserSelect: "none"` style. The original Firefox select-all interaction remains unverified.

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class         | Support            |
| ------------- | ------------------ |
| `select-none` | ✔️ Partial Support |
| `select-text` | ✔️ Partial Support |
| `select-all`  | ✔️ Partial Support |
| `select-auto` | ✔️ Partial Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Will Change (https://www.nativewind.dev/v5/tailwind/interactivity/will-change)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/will-change)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                   | Support     |
| ----------------------- | ----------- |
| `will-change-auto`      | 🌐 Web only |
| `will-change-scroll`    | 🌐 Web only |
| `will-change-contents`  | 🌐 Web only |
| `will-change-transform` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Aspect Ratio (https://www.nativewind.dev/v5/tailwind/layout/aspect-ratio)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/aspect-ratio)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class           | Support     |
| --------------- | ----------- |
| `aspect-square` | ✅ Supported |
| `aspect-video`  | ✅ Supported |
| `aspect-{n}`    | ✅ Supported |
| `aspect-[n]`    | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Box Decoration Break (https://www.nativewind.dev/v5/tailwind/layout/box-decoration-break)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/box-decoration-break)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                  | Support     |
| ---------------------- | ----------- |
| `box-decoration-clone` | 🌐 Web only |
| `box-decoration-slice` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Box Sizing (https://www.nativewind.dev/v5/tailwind/layout/box-sizing)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/box-sizing)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class         | Support     |
| ------------- | ----------- |
| `box-border`  | 🌐 Web only |
| `box-content` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Break After (https://www.nativewind.dev/v5/tailwind/layout/break-after)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/break-after)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                    | Support     |
| ------------------------ | ----------- |
| `break-after-auto`       | 🌐 Web only |
| `break-after-avoid`      | 🌐 Web only |
| `break-after-all`        | 🌐 Web only |
| `break-after-avoid-page` | 🌐 Web only |
| `break-after-page`       | 🌐 Web only |
| `break-after-left`       | 🌐 Web only |
| `break-after-right`      | 🌐 Web only |
| `break-after-column`     | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Break Before (https://www.nativewind.dev/v5/tailwind/layout/break-before)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/break-before)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                     | Support     |
| ------------------------- | ----------- |
| `break-before-auto`       | 🌐 Web only |
| `break-before-avoid`      | 🌐 Web only |
| `break-before-all`        | 🌐 Web only |
| `break-before-avoid-page` | 🌐 Web only |
| `break-before-page`       | 🌐 Web only |
| `break-before-left`       | 🌐 Web only |
| `break-before-right`      | 🌐 Web only |
| `break-before-column`     | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Break Inside (https://www.nativewind.dev/v5/tailwind/layout/break-inside)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/break-inside)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                       | Support     |
| --------------------------- | ----------- |
| `break-inside-auto`         | 🌐 Web only |
| `break-inside-avoid`        | 🌐 Web only |
| `break-inside-avoid-page`   | 🌐 Web only |
| `break-inside-avoid-column` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Clear (https://www.nativewind.dev/v5/tailwind/layout/clear)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/clear)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class         | Support     |
| ------------- | ----------- |
| `clear-left`  | 🌐 Web only |
| `clear-right` | 🌐 Web only |
| `clear-both`  | 🌐 Web only |
| `clear-none`  | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Columns (https://www.nativewind.dev/v5/tailwind/layout/columns)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/columns)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class         | Support     |
| ------------- | ----------- |
| `columns-{n}` | 🌐 Web only |
| `columns-[n]` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Container (https://www.nativewind.dev/v5/tailwind/layout/container)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/container)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class       | Support     |
| ----------- | ----------- |
| `container` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Display (https://www.nativewind.dev/v5/tailwind/layout/display)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/display)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                | Support     |
| -------------------- | ----------- |
| `flex`               | ✅ Supported |
| `hidden`             | ✅ Supported |
| `contents`           | ✅ Supported |
| `block`              | 🌐 Web only |
| `inline-block`       | 🌐 Web only |
| `inline`             | 🌐 Web only |
| `inline-flex`        | 🌐 Web only |
| `table`              | 🌐 Web only |
| `inline-table`       | 🌐 Web only |
| `table-caption`      | 🌐 Web only |
| `table-cell`         | 🌐 Web only |
| `table-column`       | 🌐 Web only |
| `table-column-group` | 🌐 Web only |
| `table-footer-group` | 🌐 Web only |
| `table-header-group` | 🌐 Web only |
| `table-row-group`    | 🌐 Web only |
| `table-row`          | 🌐 Web only |
| `flow-root`          | 🌐 Web only |
| `grid`               | 🌐 Web only |
| `inline-grid`        | 🌐 Web only |
| `list-item`          | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Float (https://www.nativewind.dev/v5/tailwind/layout/float)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/float)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class         | Support     |
| ------------- | ----------- |
| `float-right` | 🌐 Web only |
| `float-left`  | 🌐 Web only |
| `float-none`  | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Isolation (https://www.nativewind.dev/v5/tailwind/layout/isolation)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/isolation)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class            | Support     |
| ---------------- | ----------- |
| `isolate`        | 🌐 Web only |
| `isolation-auto` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Object Fit (https://www.nativewind.dev/v5/tailwind/layout/object-fit)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/object-fit)

## RC notes

For React Native Web Image and Expo Image, use explicit `resizeMode` or `contentFit` props. A utility on the outer View does not establish the nested image fit. Native image adapters and HTML img elements have separate contracts.

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class               | Support     |
| ------------------- | ----------- |
| `object-contain`    | 🌐 Web only |
| `object-cover`      | 🌐 Web only |
| `object-fill`       | 🌐 Web only |
| `object-none`       | 🌐 Web only |
| `object-scale-down` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Object Position (https://www.nativewind.dev/v5/tailwind/layout/object-position)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/object-position)

## RC notes

For Expo Image on web, use `contentPosition` explicitly and verify the rendered image. An outer View class does not establish the nested image position.

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                 | Support     |
| --------------------- | ----------- |
| `object-bottom`       | 🌐 Web only |
| `object-center`       | 🌐 Web only |
| `object-left`         | 🌐 Web only |
| `object-left-bottom`  | 🌐 Web only |
| `object-left-top`     | 🌐 Web only |
| `object-right`        | 🌐 Web only |
| `object-right-bottom` | 🌐 Web only |
| `object-right-top`    | 🌐 Web only |
| `object-top`          | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Overflow (https://www.nativewind.dev/v5/tailwind/layout/overflow)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/overflow)

## RC notes

Use ScrollView or other React Native scrolling components for scrolling. Whole view `overflow-hidden` and `overflow-visible` are distinct from CSS scroll containers.

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                | Support                 |
| -------------------- | ----------------------- |
| `overflow-hidden`    | ✅ Supported             |
| `overflow-visible`   | ✅ Supported             |
| `overflow-auto`      | Not supported on native |
| `overflow-clip`      | Not supported on native |
| `overflow-scroll`    | Not supported on native |
| `overflow-x-auto`    | Not supported on native |
| `overflow-x-clip`    | Not supported on native |
| `overflow-x-scroll`  | Not supported on native |
| `overflow-x-hidden`  | Not supported on native |
| `overflow-x-visible` | Not supported on native |
| `overflow-y-auto`    | Not supported on native |
| `overflow-y-clip`    | Not supported on native |
| `overflow-y-scroll`  | Not supported on native |
| `overflow-y-hidden`  | Not supported on native |
| `overflow-y-visible` | Not supported on native |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Overscroll Behavior (https://www.nativewind.dev/v5/tailwind/layout/overscroll-behavior)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/overscroll-behavior)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                  | Support     |
| ---------------------- | ----------- |
| `overscroll-auto`      | 🌐 Web only |
| `overscroll-contain`   | 🌐 Web only |
| `overscroll-none`      | 🌐 Web only |
| `overscroll-x-auto`    | 🌐 Web only |
| `overscroll-x-contain` | 🌐 Web only |
| `overscroll-x-none`    | 🌐 Web only |
| `overscroll-y-auto`    | 🌐 Web only |
| `overscroll-y-contain` | 🌐 Web only |
| `overscroll-y-none`    | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Position (https://www.nativewind.dev/v5/tailwind/layout/position)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/position)

## RC notes

Use native layout, overlay or sticky header APIs for fixed or sticky behavior; CSS viewport positioning is not interchangeable.

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class      | Support                 |
| ---------- | ----------------------- |
| `absolute` | ✅ Supported             |
| `relative` | ✅ Supported             |
| `static`   | ✅ Supported             |
| `fixed`    | Not supported on native |
| `sticky`   | Not supported on native |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Top / Right / Bottom / Left (https://www.nativewind.dev/v5/tailwind/layout/top-right-bottom-left)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/top-right-bottom-left)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class          | Support                 |
| -------------- | ----------------------- |
| `top-{n}`      | ✅ Supported             |
| `top-[n]`      | ✅ Supported             |
| `right-{n}`    | ✅ Supported             |
| `right-[n]`    | ✅ Supported             |
| `bottom-{n}`   | ✅ Supported             |
| `bottom-[n]`   | ✅ Supported             |
| `left-{n}`     | ✅ Supported             |
| `left-[n]`     | ✅ Supported             |
| `inset-{n}`    | ✅ Supported             |
| `inset-[n]`    | ✅ Supported             |
| `inset-x-{n}`  | ✅ Supported             |
| `inset-x-[n]`  | ✅ Supported             |
| `inset-y-{n}`  | ✅ Supported             |
| `inset-y-[n]`  | ✅ Supported             |
| `inset-auto`   | Not supported on native |
| `inset-x-auto` | Not supported on native |
| `inset-y-auto` | Not supported on native |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Visibility (https://www.nativewind.dev/v5/tailwind/layout/visibility)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/visibility)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class       | Support     |
| ----------- | ----------- |
| `visible`   | ✅ Supported |
| `invisible` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Z-Index (https://www.nativewind.dev/v5/tailwind/layout/z-index)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/z-index)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class    | Support     |
| -------- | ----------- |
| `z-{n}`  | ✅ Supported |
| `z-[n]`  | ✅ Supported |
| `z-auto` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Safe Area Insets (https://www.nativewind.dev/v5/tailwind/new-concepts/safe-area-insets)

These utilities come from the `tailwindcss-safe-area` plugin, which is included automatically via `nativewind/theme`. They use `env(safe-area-inset-*)` values to ensure your content respects device safe areas such as notches, home indicators, and rounded corners.

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                | Support     |
| -------------------- | ----------- |
| `m-safe`             | ✅ Supported |
| `mx-safe`            | ✅ Supported |
| `my-safe`            | ✅ Supported |
| `ms-safe`            | ✅ Supported |
| `me-safe`            | ✅ Supported |
| `mt-safe`            | ✅ Supported |
| `mr-safe`            | ✅ Supported |
| `mb-safe`            | ✅ Supported |
| `ml-safe`            | ✅ Supported |
| `p-safe`             | ✅ Supported |
| `px-safe`            | ✅ Supported |
| `py-safe`            | ✅ Supported |
| `ps-safe`            | ✅ Supported |
| `pe-safe`            | ✅ Supported |
| `pt-safe`            | ✅ Supported |
| `pr-safe`            | ✅ Supported |
| `pb-safe`            | ✅ Supported |
| `pl-safe`            | ✅ Supported |
| `min-h-screen-safe`  | ✅ Supported |
| `max-h-screen-safe`  | ✅ Supported |
| `h-screen-safe`      | ✅ Supported |
| `inset-safe`         | ✅ Supported |
| `top-safe`           | ✅ Supported |
| `right-safe`         | ✅ Supported |
| `bottom-safe`        | ✅ Supported |
| `left-safe`          | ✅ Supported |
| `pb-safe-offset-{n}` | ✅ Supported |
| `pb-safe-or-{n}`     | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Container Queries (https://www.nativewind.dev/v5/tailwind/plugins/container-queries)

Nativewind supports container queries, allowing you to style elements based on the size of a parent container rather than the viewport. Use `@container` to mark an element as a query container, then apply responsive styles with container query variants like `@sm:`, `@md:`, `@lg:`, etc.

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/container-queries)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class               | Support     |
| ------------------- | ----------- |
| `@container`        | ✅ Supported |
| `@container/{name}` | ✅ Supported |
| `@sm:`              | ✅ Supported |
| `@md:`              | ✅ Supported |
| `@lg:`              | ✅ Supported |
| `@xl:`              | ✅ Supported |
| `@2xl:`             | ✅ Supported |
| `@3xl:`             | ✅ Supported |
| `@4xl:`             | ✅ Supported |
| `@5xl:`             | ✅ Supported |
| `@6xl:`             | ✅ Supported |
| `@7xl:`             | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Height (https://www.nativewind.dev/v5/tailwind/sizing/height)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/height)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class      | Support                 |
| ---------- | ----------------------- |
| `h-{n}`    | ✅ Supported             |
| `h-[n]`    | ✅ Supported             |
| `h-auto`   | ✅ Supported             |
| `h-full`   | ✅ Supported             |
| `h-screen` | ✅ Supported             |
| `h-min`    | Not supported on native |
| `h-max`    | Not supported on native |
| `h-fit`    | Not supported on native |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Max-Height (https://www.nativewind.dev/v5/tailwind/sizing/max-height)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/max-height)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class          | Support                 |
| -------------- | ----------------------- |
| `max-h-{n}`    | ✅ Supported             |
| `max-h-[n]`    | ✅ Supported             |
| `max-h-full`   | ✅ Supported             |
| `max-h-screen` | ✅ Supported             |
| `max-h-none`   | ✅ Supported             |
| `max-h-min`    | Not supported on native |
| `max-h-max`    | Not supported on native |
| `max-h-fit`    | Not supported on native |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Max-Width (https://www.nativewind.dev/v5/tailwind/sizing/max-width)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/max-width)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class        | Support                 |
| ------------ | ----------------------- |
| `max-w-{n}`  | ✅ Supported             |
| `max-w-[n]`  | ✅ Supported             |
| `max-w-full` | ✅ Supported             |
| `max-w-none` | ✅ Supported             |
| `max-w-min`  | Not supported on native |
| `max-w-max`  | Not supported on native |
| `max-w-fit`  | Not supported on native |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Min-Height (https://www.nativewind.dev/v5/tailwind/sizing/min-height)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/min-height)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class          | Support                 |
| -------------- | ----------------------- |
| `min-h-{n}`    | ✅ Supported             |
| `min-h-[n]`    | ✅ Supported             |
| `min-h-full`   | ✅ Supported             |
| `min-h-screen` | ✅ Supported             |
| `min-h-min`    | Not supported on native |
| `min-h-max`    | Not supported on native |
| `min-h-fit`    | Not supported on native |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Min-Width (https://www.nativewind.dev/v5/tailwind/sizing/min-width)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/min-width)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class        | Support                 |
| ------------ | ----------------------- |
| `min-w-{n}`  | ✅ Supported             |
| `min-w-[n]`  | ✅ Supported             |
| `min-w-full` | ✅ Supported             |
| `min-w-min`  | Not supported on native |
| `min-w-max`  | Not supported on native |
| `min-w-fit`  | Not supported on native |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Width (https://www.nativewind.dev/v5/tailwind/sizing/width)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/width)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class      | Support                 |
| ---------- | ----------------------- |
| `w-{n}`    | ✅ Supported             |
| `w-[n]`    | ✅ Supported             |
| `w-auto`   | ✅ Supported             |
| `w-full`   | ✅ Supported             |
| `w-screen` | ✅ Supported             |
| `w-1/2`    | ✅ Supported             |
| `w-min`    | Not supported on native |
| `w-max`    | Not supported on native |
| `w-fit`    | Not supported on native |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Margin (https://www.nativewind.dev/v5/tailwind/spacing/margin)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/margin)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class     | Support     |
| --------- | ----------- |
| `m-{n}`   | ✅ Supported |
| `m-[n]`   | ✅ Supported |
| `mx-{n}`  | ✅ Supported |
| `mx-[n]`  | ✅ Supported |
| `my-{n}`  | ✅ Supported |
| `my-[n]`  | ✅ Supported |
| `mt-{n}`  | ✅ Supported |
| `mt-[n]`  | ✅ Supported |
| `mr-{n}`  | ✅ Supported |
| `mr-[n]`  | ✅ Supported |
| `mb-{n}`  | ✅ Supported |
| `mb-[n]`  | ✅ Supported |
| `ml-{n}`  | ✅ Supported |
| `ml-[n]`  | ✅ Supported |
| `ms-{n}`  | ✅ Supported |
| `ms-[n]`  | ✅ Supported |
| `me-{n}`  | ✅ Supported |
| `me-[n]`  | ✅ Supported |
| `m-auto`  | ✅ Supported |
| `mx-auto` | ✅ Supported |
| `mt-auto` | ✅ Supported |
| `mb-auto` | ✅ Supported |
| `ms-auto` | ✅ Supported |
| `me-auto` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Padding (https://www.nativewind.dev/v5/tailwind/spacing/padding)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/padding)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class    | Support     |
| -------- | ----------- |
| `p-{n}`  | ✅ Supported |
| `p-[n]`  | ✅ Supported |
| `px-{n}` | ✅ Supported |
| `px-[n]` | ✅ Supported |
| `py-{n}` | ✅ Supported |
| `py-[n]` | ✅ Supported |
| `pt-{n}` | ✅ Supported |
| `pt-[n]` | ✅ Supported |
| `pr-{n}` | ✅ Supported |
| `pr-[n]` | ✅ Supported |
| `pb-{n}` | ✅ Supported |
| `pb-[n]` | ✅ Supported |
| `pl-{n}` | ✅ Supported |
| `pl-[n]` | ✅ Supported |
| `ps-{n}` | ✅ Supported |
| `ps-[n]` | ✅ Supported |
| `pe-{n}` | ✅ Supported |
| `pe-[n]` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Space Between (https://www.nativewind.dev/v5/tailwind/spacing/space-between)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/space)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class         | Support     |
| ------------- | ----------- |
| `space-x-{n}` | 🌐 Web only |
| `space-x-[n]` | 🌐 Web only |
| `space-y-{n}` | 🌐 Web only |
| `space-y-[n]` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Fill (https://www.nativewind.dev/v5/tailwind/svg/fill)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/fill)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class          | Support     |
| -------------- | ----------- |
| `fill-{color}` | ✅ Supported |
| `fill-[color]` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Stroke Width (https://www.nativewind.dev/v5/tailwind/svg/stroke-width)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/stroke-width)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class        | Support     |
| ------------ | ----------- |
| `stroke-{n}` | ✅ Supported |
| `stroke-[n]` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Stroke (https://www.nativewind.dev/v5/tailwind/svg/stroke)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/stroke)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class            | Support     |
| ---------------- | ----------- |
| `stroke-{color}` | ✅ Supported |
| `stroke-[color]` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Border Collapse (https://www.nativewind.dev/v5/tailwind/tables/border-collapse)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/border-collapse)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class             | Support     |
| ----------------- | ----------- |
| `border-collapse` | 🌐 Web only |
| `border-separate` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Border Spacing (https://www.nativewind.dev/v5/tailwind/tables/border-spacing)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/border-spacing)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                  | Support     |
| ---------------------- | ----------- |
| `border-spacing-{n}`   | 🌐 Web only |
| `border-spacing-x-{n}` | 🌐 Web only |
| `border-spacing-y-{n}` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Caption Side (https://www.nativewind.dev/v5/tailwind/tables/caption-side)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/caption-side)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class            | Support     |
| ---------------- | ----------- |
| `caption-top`    | 🌐 Web only |
| `caption-bottom` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Table Layout (https://www.nativewind.dev/v5/tailwind/tables/table-layout)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/table-layout)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class         | Support     |
| ------------- | ----------- |
| `table-auto`  | 🌐 Web only |
| `table-fixed` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Rotate (https://www.nativewind.dev/v5/tailwind/transforms/rotate)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/rotate)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class        | Support     |
| ------------ | ----------- |
| `rotate-{n}` | ✅ Supported |
| `rotate-[n]` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Scale (https://www.nativewind.dev/v5/tailwind/transforms/scale)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/scale)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class         | Support     |
| ------------- | ----------- |
| `scale-{n}`   | ✅ Supported |
| `scale-[n]`   | ✅ Supported |
| `scale-x-{n}` | ✅ Supported |
| `scale-y-{n}` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Skew (https://www.nativewind.dev/v5/tailwind/transforms/skew)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/skew)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class        | Support     |
| ------------ | ----------- |
| `skew-x-{n}` | ✅ Supported |
| `skew-y-{n}` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Transform Origin (https://www.nativewind.dev/v5/tailwind/transforms/transform-origin)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/transform-origin)

## RC notes

Use React Native’s `transformOrigin` style directly when needed; this RC compiler rejects the named CSS transform origin utilities.

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                 | Support                 |
| --------------------- | ----------------------- |
| `origin-center`       | Not supported on native |
| `origin-top`          | Not supported on native |
| `origin-top-right`    | Not supported on native |
| `origin-right`        | Not supported on native |
| `origin-bottom-right` | Not supported on native |
| `origin-bottom`       | Not supported on native |
| `origin-bottom-left`  | Not supported on native |
| `origin-left`         | Not supported on native |
| `origin-top-left`     | Not supported on native |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Translate (https://www.nativewind.dev/v5/tailwind/transforms/translate)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/translate)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class              | Support     |
| ------------------ | ----------- |
| `translate-x-{n}`  | ✅ Supported |
| `translate-x-[n]`  | ✅ Supported |
| `translate-y-{n}`  | ✅ Supported |
| `translate-y-[n]`  | ✅ Supported |
| `translate-x-full` | ✅ Supported |
| `translate-y-full` | ✅ Supported |
| `translate-x-1/2`  | ✅ Supported |
| `translate-y-1/2`  | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Animation (https://www.nativewind.dev/v5/tailwind/transitions-animation/animation)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/animation)

## RC limitation on Android

On the tested Reanimated 4.5.1 target, cancelling a running rotation with `animate-none` or removing its animation styles can leave the final transform in place on Android. This is tracked in [Reanimated issue 10507](https://github.com/software-mansion/react-native-reanimated/issues/10507) and reproduces with direct Reanimated controls. Do not assume cancellation resets the transform; verify the affected interaction in your app. See the [RC compatibility guide](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md).

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class            | Support                 |
| ---------------- | ----------------------- |
| `animate-spin`   | 🧪 Experimental Support |
| `animate-ping`   | 🧪 Experimental Support |
| `animate-pulse`  | 🧪 Experimental Support |
| `animate-bounce` | 🧪 Experimental Support |
| `animate-none`   | 🧪 Experimental Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Transition Delay (https://www.nativewind.dev/v5/tailwind/transitions-animation/transition-delay)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/transition-delay)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class       | Support                 |
| ----------- | ----------------------- |
| `delay-{n}` | 🧪 Experimental Support |
| `delay-[n]` | 🧪 Experimental Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Transition Duration (https://www.nativewind.dev/v5/tailwind/transitions-animation/transition-duration)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/transition-duration)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class          | Support                 |
| -------------- | ----------------------- |
| `duration-{n}` | 🧪 Experimental Support |
| `duration-[n]` | 🧪 Experimental Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Transition Property (https://www.nativewind.dev/v5/tailwind/transitions-animation/transition-property)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/transition-property)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                  | Support                 |
| ---------------------- | ----------------------- |
| `transition`           | 🧪 Experimental Support |
| `transition-all`       | 🧪 Experimental Support |
| `transition-colors`    | 🧪 Experimental Support |
| `transition-opacity`   | 🧪 Experimental Support |
| `transition-shadow`    | 🧪 Experimental Support |
| `transition-transform` | 🧪 Experimental Support |
| `transition-none`      | 🧪 Experimental Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Transition Timing Function (https://www.nativewind.dev/v5/tailwind/transitions-animation/transition-timing-function)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/transition-timing-function)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class         | Support                 |
| ------------- | ----------------------- |
| `ease-linear` | 🧪 Experimental Support |
| `ease-in`     | 🧪 Experimental Support |
| `ease-out`    | 🧪 Experimental Support |
| `ease-in-out` | 🧪 Experimental Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Content (https://www.nativewind.dev/v5/tailwind/typography/content)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/content)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class          | Support     |
| -------------- | ----------- |
| `content-none` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Font Family (https://www.nativewind.dev/v5/tailwind/typography/font-family)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/font-family)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class        | Support     |
| ------------ | ----------- |
| `font-sans`  | ✅ Supported |
| `font-serif` | ✅ Supported |
| `font-mono`  | ✅ Supported |
| `font-{n}`   | ✅ Supported |
| `font-[n]`   | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Font Size (https://www.nativewind.dev/v5/tailwind/typography/font-size)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/font-size)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class       | Support     |
| ----------- | ----------- |
| `text-xs`   | ✅ Supported |
| `text-sm`   | ✅ Supported |
| `text-base` | ✅ Supported |
| `text-lg`   | ✅ Supported |
| `text-xl`   | ✅ Supported |
| `text-{n}`  | ✅ Supported |
| `text-[n]`  | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Font Smoothing (https://www.nativewind.dev/v5/tailwind/typography/font-smoothing)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/font-smoothing)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                  | Support     |
| ---------------------- | ----------- |
| `antialiased`          | 🌐 Web only |
| `subpixel-antialiased` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Font Style (https://www.nativewind.dev/v5/tailwind/typography/font-style)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/font-style)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class        | Support     |
| ------------ | ----------- |
| `italic`     | ✅ Supported |
| `not-italic` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Font Variant Numeric (https://www.nativewind.dev/v5/tailwind/typography/font-variant-numeric)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/font-variant-numeric)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                | Support     |
| -------------------- | ----------- |
| `normal-nums`        | 🌐 Web only |
| `ordinal`            | 🌐 Web only |
| `slashed-zero`       | 🌐 Web only |
| `lining-nums`        | 🌐 Web only |
| `oldstyle-nums`      | 🌐 Web only |
| `proportional-nums`  | 🌐 Web only |
| `tabular-nums`       | 🌐 Web only |
| `diagonal-fractions` | 🌐 Web only |
| `stacked-fractions`  | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Font Weight (https://www.nativewind.dev/v5/tailwind/typography/font-weight)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/font-weight)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class             | Support     |
| ----------------- | ----------- |
| `font-thin`       | ✅ Supported |
| `font-extralight` | ✅ Supported |
| `font-light`      | ✅ Supported |
| `font-normal`     | ✅ Supported |
| `font-medium`     | ✅ Supported |
| `font-semibold`   | ✅ Supported |
| `font-bold`       | ✅ Supported |
| `font-extrabold`  | ✅ Supported |
| `font-black`      | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Hyphens (https://www.nativewind.dev/v5/tailwind/typography/hyphens)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/hyphens)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class            | Support     |
| ---------------- | ----------- |
| `hyphens-none`   | 🌐 Web only |
| `hyphens-manual` | 🌐 Web only |
| `hyphens-auto`   | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Letter Spacing (https://www.nativewind.dev/v5/tailwind/typography/letter-spacing)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/letter-spacing)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class              | Support     |
| ------------------ | ----------- |
| `tracking-tighter` | ✅ Supported |
| `tracking-tight`   | ✅ Supported |
| `tracking-normal`  | ✅ Supported |
| `tracking-wide`    | ✅ Supported |
| `tracking-wider`   | ✅ Supported |
| `tracking-widest`  | ✅ Supported |
| `tracking-{n}`     | ✅ Supported |
| `tracking-[n]`     | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Line Clamp (https://www.nativewind.dev/v5/tailwind/typography/line-clamp)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/line-clamp)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class             | Support     |
| ----------------- | ----------- |
| `line-clamp-{n}`  | ✅ Supported |
| `line-clamp-none` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Line Height (https://www.nativewind.dev/v5/tailwind/typography/line-height)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/line-height)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class         | Support     |
| ------------- | ----------- |
| `leading-{n}` | ✅ Supported |
| `leading-[n]` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# List Style Image (https://www.nativewind.dev/v5/tailwind/typography/list-style-image)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/list-style-image)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class              | Support     |
| ------------------ | ----------- |
| `list-image-none`  | 🌐 Web only |
| `list-image-[url]` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# List Style Position (https://www.nativewind.dev/v5/tailwind/typography/list-style-position)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/list-style-position)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class          | Support     |
| -------------- | ----------- |
| `list-inside`  | 🌐 Web only |
| `list-outside` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# List Style Type (https://www.nativewind.dev/v5/tailwind/typography/list-style-type)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/list-style-type)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class          | Support     |
| -------------- | ----------- |
| `list-none`    | 🌐 Web only |
| `list-disc`    | 🌐 Web only |
| `list-decimal` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Text Align (https://www.nativewind.dev/v5/tailwind/typography/text-align)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/text-align)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class          | Support     |
| -------------- | ----------- |
| `text-left`    | ✅ Supported |
| `text-center`  | ✅ Supported |
| `text-right`   | ✅ Supported |
| `text-justify` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Text Color (https://www.nativewind.dev/v5/tailwind/typography/text-color)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/text-color)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class              | Support                 |
| ------------------ | ----------------------- |
| `text-{color}`     | ✅ Supported             |
| `text-[color]`     | ✅ Supported             |
| `text-current`     | ✅ Supported             |
| `text-transparent` | ✅ Supported             |
| `text-inherit`     | Not supported on native |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Text Decoration Color (https://www.nativewind.dev/v5/tailwind/typography/text-decoration-color)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/text-decoration-color)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                    | Support                 |
| ------------------------ | ----------------------- |
| `decoration-{color}`     | ✅ Supported             |
| `decoration-[color]`     | ✅ Supported             |
| `decoration-current`     | ✅ Supported             |
| `decoration-transparent` | ✅ Supported             |
| `decoration-inherit`     | Not supported on native |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Text Decoration Style (https://www.nativewind.dev/v5/tailwind/typography/text-decoration-style)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/text-decoration-style)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class               | Support                 |
| ------------------- | ----------------------- |
| `decoration-solid`  | ✅ Supported             |
| `decoration-double` | ✅ Supported             |
| `decoration-dotted` | ✅ Supported             |
| `decoration-dashed` | ✅ Supported             |
| `decoration-wavy`   | Not supported on native |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Text Decoration Thickness (https://www.nativewind.dev/v5/tailwind/typography/text-decoration-thickness)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/text-decoration-thickness)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                  | Support     |
| ---------------------- | ----------- |
| `decoration-auto`      | 🌐 Web only |
| `decoration-from-font` | 🌐 Web only |
| `decoration-{n}`       | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Text Decoration (https://www.nativewind.dev/v5/tailwind/typography/text-decoration)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/text-decoration)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class          | Support                 |
| -------------- | ----------------------- |
| `underline`    | ✅ Supported             |
| `line-through` | ✅ Supported             |
| `no-underline` | ✅ Supported             |
| `overline`     | Not supported on native |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Text Indent (https://www.nativewind.dev/v5/tailwind/typography/text-indent)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/text-indent)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class        | Support     |
| ------------ | ----------- |
| `indent-{n}` | 🌐 Web only |
| `indent-[n]` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Text Overflow (https://www.nativewind.dev/v5/tailwind/typography/text-overflow)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/text-overflow)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class           | Support     |
| --------------- | ----------- |
| `text-ellipsis` | 🌐 Web only |
| `text-clip`     | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Text Transform (https://www.nativewind.dev/v5/tailwind/typography/text-transform)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/text-transform)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class         | Support     |
| ------------- | ----------- |
| `uppercase`   | ✅ Supported |
| `lowercase`   | ✅ Supported |
| `capitalize`  | ✅ Supported |
| `normal-case` | ✅ Supported |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Text Underline Offset (https://www.nativewind.dev/v5/tailwind/typography/text-underline-offset)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/text-underline-offset)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                   | Support     |
| ----------------------- | ----------- |
| `underline-offset-auto` | 🌐 Web only |
| `underline-offset-{n}`  | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Vertical Align (https://www.nativewind.dev/v5/tailwind/typography/vertical-align)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/vertical-align)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class               | Support                 |
| ------------------- | ----------------------- |
| `align-top`         | ✅ Supported             |
| `align-middle`      | ✅ Supported             |
| `align-bottom`      | ✅ Supported             |
| `align-baseline`    | Not supported on native |
| `align-text-top`    | Not supported on native |
| `align-text-bottom` | Not supported on native |
| `align-sub`         | Not supported on native |
| `align-super`       | Not supported on native |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Whitespace (https://www.nativewind.dev/v5/tailwind/typography/whitespace)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/whitespace)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class                     | Support     |
| ------------------------- | ----------- |
| `whitespace-normal`       | 🌐 Web only |
| `whitespace-nowrap`       | 🌐 Web only |
| `whitespace-pre`          | 🌐 Web only |
| `whitespace-pre-line`     | 🌐 Web only |
| `whitespace-pre-wrap`     | 🌐 Web only |
| `whitespace-break-spaces` | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

# Word Break (https://www.nativewind.dev/v5/tailwind/typography/word-break)

## Usage

[Tailwind CSS documentation](https://tailwindcss.com/docs/word-break)

## Compatibility

Support applies to the documented values and platforms. See the [RC compatibility notes](https://github.com/nativewind/nativewind/blob/main/docs/rc-compatibility.md) for value limits and native migration alternatives. Browser behavior is evaluated separately.

| Class          | Support     |
| -------------- | ----------- |
| `break-normal` | 🌐 Web only |
| `break-words`  | 🌐 Web only |
| `break-all`    | 🌐 Web only |
| `break-keep`   | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only