# Table of Contents

- [Box Decoration Break](#box-decoration-break)
- [Object Fit](#object-fit)
- [Aspect Ratio](#aspect-ratio)
- [Break After](#break-after)
- [Safe Area Insets](#safe-area-insets)
- [Break Inside](#break-inside)
- [Object Position](#object-position)
- [Box Sizing](#box-sizing)
- [Break Before](#break-before)
- [Overflow](#overflow)
- [Position](#position)
- [Overscroll Behavior](#overscroll-behavior)
- [Top / Right / Bottom / Left](#top-right-bottom-left)
- [Z-Index](#z-index)
- [Align Content](#align-content)
- [Align Items](#align-items)
- [Visibility](#visibility)
- [Align Self](#align-self)
- [Flex](#flex)
- [Flex Basis](#flex-basis)
- [Flex Direction](#flex-direction)
- [Clear](#clear)
- [Columns](#columns)
- [Container](#container)
- [Display](#display)
- [Floats](#floats)
- [Isolation](#isolation)
- [Flex Grow](#flex-grow)
- [Flex Shrink](#flex-shrink)
- [Flex Wrap](#flex-wrap)
- [Gap](#gap)
- [Grid Auto Columns](#grid-auto-columns)
- [Grid Auto Flow](#grid-auto-flow)
- [Grid Auto Rows](#grid-auto-rows)
- [Grid Row Start / End](#grid-row-start-end)
- [Grid Template Columns](#grid-template-columns)
- [Grid Template Rows](#grid-template-rows)
- [Justify Items](#justify-items)
- [Justify Content](#justify-content)
- [Justify Self](#justify-self)
- [Place Items](#place-items)
- [Place Content](#place-content)
- [Order](#order)
- [Place Self](#place-self)
- [Margin](#margin)
- [Grid Column Start / End](#grid-column-start-end)
- [Padding](#padding)
- [Space Between](#space-between)
- [Max-Height](#max-height)
- [Height](#height)
- [Max-Width](#max-width)
- [Min-Height](#min-height)
- [Min-Width](#min-width)
- [Content](#content)
- [Width](#width)
- [Font Smoothing](#font-smoothing)
- [Font Family](#font-family)
- [Hyphens](#hyphens)
- [Font Style](#font-style)
- [Font Size](#font-size)
- [Font Variant Numeric](#font-variant-numeric)
- [Font Weight](#font-weight)
- [Line Clamp](#line-clamp)
- [Line Height](#line-height)
- [List Style Position](#list-style-position)
- [List Style Image](#list-style-image)
- [List Style Type](#list-style-type)
- [Text Decoration](#text-decoration)
- [Text Transform](#text-transform)
- [Text Color](#text-color)
- [Letter Spacing](#letter-spacing)
- [Text Decoration Color](#text-decoration-color)
- [Text Overflow](#text-overflow)
- [Text Indent](#text-indent)
- [Text Decoration Style](#text-decoration-style)
- [Text Decoration Thickness](#text-decoration-thickness)
- [Whitespace](#whitespace)
- [Text Underline Offset](#text-underline-offset)
- [Text Align](#text-align)
- [Vertical Align](#vertical-align)
- [Background Attachment](#background-attachment)
- [Word Break](#word-break)
- [Background Clip](#background-clip)
- [Background Color](#background-color)
- [Background Origin](#background-origin)
- [Background Image](#background-image)
- [Background Position](#background-position)
- [Background Repeat](#background-repeat)
- [Background Size](#background-size)
- [Gradient Color Stops](#gradient-color-stops)
- [Border Color](#border-color)
- [Divide Style](#divide-style)
- [Border Width](#border-width)
- [Border Style](#border-style)
- [Border Radius](#border-radius)
- [Outline Color](#outline-color)
- [Divide Color](#divide-color)
- [Outline Offset](#outline-offset)
- [Divide Width](#divide-width)
- [Outline Width](#outline-width)
- [Ring Offset Width](#ring-offset-width)
- [Ring Color](#ring-color)
- [Ring Offset Color](#ring-offset-color)
- [Outline Style](#outline-style)
- [Box Shadow Color](#box-shadow-color)
- [Background Blend Mode](#background-blend-mode)
- [Ring Width](#ring-width)
- [Mix Blend Mode](#mix-blend-mode)
- [Transition Delay](#transition-delay)
- [Box Shadow](#box-shadow)
- [Transition Duration](#transition-duration)
- [Transition Property](#transition-property)
- [Transition Timing Function](#transition-timing-function)
- [Opacity](#opacity)
- [Scale](#scale)
- [Skew](#skew)
- [Rotate](#rotate)
- [Translate](#translate)
- [Caret Color](#caret-color)
- [Appearance](#appearance)
- [Animation](#animation)
- [Cursor](#cursor)
- [Accent Color](#accent-color)
- [Transform Origin](#transform-origin)
- [Scroll Margin](#scroll-margin)
- [Pointer Events](#pointer-events)
- [Scroll Padding](#scroll-padding)
- [Scroll Behavior](#scroll-behavior)
- [Scroll Snap Type](#scroll-snap-type)
- [Resize](#resize)
- [Scroll Snap Stop](#scroll-snap-stop)
- [Scroll Snap Align](#scroll-snap-align)
- [Touch Action](#touch-action)
- [Will Change](#will-change)
- [User Select](#user-select)
- [Stroke](#stroke)
- [Container Queries](#container-queries)
- [Fill](#fill)
- [Screen Readers](#screen-readers)
- [Stroke Width](#stroke-width)

---

# Box Decoration Break

Last updated on June 26, 2025

Box Decoration Break
====================

[Usage](https://www.nativewind.dev/docs/tailwind/layout/box-decoration-break#usage)

------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/box-decoration-break)

[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/box-decoration-break#compatibility)

----------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| box-decoration-clone | 🌐 Web only |
| box-decoration-slice | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Aspect Ratio\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/layout/aspect-ratio)
[Box Sizing\
\
Next Page](https://www.nativewind.dev/docs/tailwind/layout/box-sizing)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/layout/box-decoration-break#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/box-decoration-break#compatibility)

---

# Object Fit

Last updated on June 26, 2025

Object Fit
==========

[Usage](https://www.nativewind.dev/docs/tailwind/layout/object-fit#usage)

--------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/object-fit)

[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/object-fit#compatibility)

------------------------------------------------------------------------------------------

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Contributors](https://www.nativewind.dev/docs/tailwind/layout/object-fit#contributors)

----------------------------------------------------------------------------------------

We are looking for contributors for the following:

### [Add `object-fit`](https://www.nativewind.dev/docs/tailwind/layout/object-fit#add-object-fit)

`object-fit` was added in [React Native 0.71](https://reactnative.dev/blog/2023/01/12/version-071#styles)

[Isolation\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/layout/isolation)
[Object Position\
\
Next Page](https://www.nativewind.dev/docs/tailwind/layout/object-position)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/layout/object-fit#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/object-fit#compatibility)
[Contributors](https://www.nativewind.dev/docs/tailwind/layout/object-fit#contributors)
[Add `object-fit`](https://www.nativewind.dev/docs/tailwind/layout/object-fit#add-object-fit)

---

# Aspect Ratio

Last updated on June 26, 2025

Aspect Ratio
============

[Usage](https://www.nativewind.dev/docs/tailwind/layout/aspect-ratio#usage)

----------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/aspect-ratio)

[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/aspect-ratio#compatibility)

--------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| aspect-auto | ✅ Full Support |
| aspect-video | ✅ Full Support |
| aspect-square | ✅ Full Support |
| aspect-[n] | ✅ Full Support |
| aspect-{n} | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[cssInterop\
\
Previous Page](https://www.nativewind.dev/docs/api/css-interop)
[Box Decoration Break\
\
Next Page](https://www.nativewind.dev/docs/tailwind/layout/box-decoration-break)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/layout/aspect-ratio#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/aspect-ratio#compatibility)

---

# Break After

Last updated on June 26, 2025

Break After
===========

[Usage](https://www.nativewind.dev/docs/tailwind/layout/break-after#usage)

---------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/break-after)

[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/break-after#compatibility)

-------------------------------------------------------------------------------------------

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Box Sizing\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/layout/box-sizing)
[Break Before\
\
Next Page](https://www.nativewind.dev/docs/tailwind/layout/break-before)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/layout/break-after#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/break-after#compatibility)

---

# Safe Area Insets

Last updated on June 26, 2025

Safe Area Insets
================

[Overview](https://www.nativewind.dev/docs/tailwind/new-concepts/safe-area-insets#overview)

--------------------------------------------------------------------------------------------

Safe Area Insets are the area of the screen that is not covered by the notch, home indicator, or rounded corners. This is the area where you should place your content to ensure it is not obscured by the system UI.

[Usage (native)](https://www.nativewind.dev/docs/tailwind/new-concepts/safe-area-insets#usage-native)

------------------------------------------------------------------------------------------------------

On native, the safe area measurements are provided by [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context)
. You will need to wrap your app with the `SafeAreaProvider` and use the `useSafeAreaEnv` hook to get the safe area insets.

    import { View } from "react-native";
    import { SafeAreaProvider } from "react-native-safe-area-context";
     
    export function MyApp(props) {
      // Make sure you have the SafeAreaProvider at the root of your app
      return (
        <SafeAreaProvider>
          <View className="p-safe" {...props} />
        </SafeAreaProvider>
      );
    }

Expo Router adds the <SafeAreaProvider /> to every route. This setup is not needed

[Usage (web)](https://www.nativewind.dev/docs/tailwind/new-concepts/safe-area-insets#usage-web)

------------------------------------------------------------------------------------------------

On web, your CSS StyleSheet will use the [CSS `env()` function](https://developer.mozilla.org/en-US/docs/Web/CSS/env)
 and no extra setup is needed.

The `h-screen-safe` and `min-h-screen-safe` utilities may not work as expected on Google Chrome. Add height: `-webkit-fill-available` on parent nodes:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
     
    @layer base {
      html {
        height: -webkit-fill-available;
      }
     
      body {
        height: -webkit-fill-available;
      }
     
      #root {
        height: -webkit-fill-available;
      }
    }

[Compatibility](https://www.nativewind.dev/docs/tailwind/new-concepts/safe-area-insets#compatibility)

------------------------------------------------------------------------------------------------------

| Class | Support | Comments |
| --- | --- | --- |
| m-safe | ✅ Full Support | `margin-top: env(safe-area-inset-top); margin-bottom: env(safe-area-inset-bottom); margin-left: env(safe-area-inset-left); margin-right: env(safe-area-inset-right);` |
| p-safe | ✅ Full Support | `padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);` |
| mx-safe | ✅ Full Support | `margin-left: env(safe-area-inset-left); margin-right: env(safe-area-inset-right);` |
| px-safe | ✅ Full Support | `padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);` |
| my-safe | ✅ Full Support | `margin-top: env(safe-area-inset-top); margin-bottom: env(safe-area-inset-bottom);` |
| py-safe | ✅ Full Support | `padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);` |
| mt-safe | ✅ Full Support | `margin-top: env(safe-area-inset-top);` |
| pt-safe | ✅ Full Support | `padding-top: env(safe-area-inset-top);` |
| mr-safe | ✅ Full Support | `margin-right: env(safe-area-inset-top);` |
| pr-safe | ✅ Full Support | `padding-right: env(safe-area-inset-top);` |
| mb-safe | ✅ Full Support | `margin-bottom: env(safe-area-inset-top);` |
| pb-safe | ✅ Full Support | `padding-bottom: env(safe-area-inset-top);` |
| ml-safe | ✅ Full Support | `margin-left: env(safe-area-inset-top);` |
| pl-safe | ✅ Full Support | `padding-left: env(safe-area-inset-top);` |
| *-safe-or-[n] | ✅ Full Support | `*` can be substituted for any spacing utility.  <br>`[n]` can be substituted for any spacing value.`// example using mt-safe-or-4 margin-top: max(env(safe-area-inset-top), 1rem); // example using mt-safe-or-[2px] margin-top: max(env(safe-area-inset-top), 2px);` |
| h-screen-safe | 🌐 Web only | `height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))` |
| *-safe-offset-[n] | 🌐 Web only | `*` can be substituted for any spacing utility.  <br>`[n]` can be substituted for any spacing value.`// example using mt-safe-offset-4 margin-top: calc(env(safe-area-inset-top) + 1rem); // example using mt-safe-offset-[2px] margin-top: calc(env(safe-area-inset-top) + 2px);` |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Style Specificity\
\
Previous Page](https://www.nativewind.dev/docs/core-concepts/style-specificity)
[Configuration\
\
Next Page](https://www.nativewind.dev/docs/customization/configuration)

### On this page

[Overview](https://www.nativewind.dev/docs/tailwind/new-concepts/safe-area-insets#overview)
[Usage (native)](https://www.nativewind.dev/docs/tailwind/new-concepts/safe-area-insets#usage-native)
[Usage (web)](https://www.nativewind.dev/docs/tailwind/new-concepts/safe-area-insets#usage-web)
[Compatibility](https://www.nativewind.dev/docs/tailwind/new-concepts/safe-area-insets#compatibility)

---

# Break Inside

Last updated on June 26, 2025

Break Inside
============

[Usage](https://www.nativewind.dev/docs/tailwind/layout/break-inside#usage)

----------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/break-inside)

[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/break-inside#compatibility)

--------------------------------------------------------------------------------------------

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Break Before\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/layout/break-before)
[Clear\
\
Next Page](https://www.nativewind.dev/docs/tailwind/layout/clear)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/layout/break-inside#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/break-inside#compatibility)

---

# Object Position

Last updated on June 26, 2025

Object Position
===============

[Usage](https://www.nativewind.dev/docs/tailwind/layout/object-position#usage)

-------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/object-position)

[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/object-position#compatibility)

-----------------------------------------------------------------------------------------------

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Object Fit\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/layout/object-fit)
[Overflow\
\
Next Page](https://www.nativewind.dev/docs/tailwind/layout/overflow)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/layout/object-position#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/object-position#compatibility)

---

# Box Sizing

Last updated on June 26, 2025

Box Sizing
==========

[Usage](https://www.nativewind.dev/docs/tailwind/layout/box-sizing#usage)

--------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/box-sizing)

[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/box-sizing#compatibility)

------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| box-border | 🌐 Web only |
| box-content | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Box Decoration Break\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/layout/box-decoration-break)
[Break After\
\
Next Page](https://www.nativewind.dev/docs/tailwind/layout/break-after)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/layout/box-sizing#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/box-sizing#compatibility)

---

# Break Before

Last updated on June 26, 2025

Break Before
============

[Usage](https://www.nativewind.dev/docs/tailwind/layout/break-before#usage)

----------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/break-before)

[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/break-before#compatibility)

--------------------------------------------------------------------------------------------

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Break After\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/layout/break-after)
[Break Inside\
\
Next Page](https://www.nativewind.dev/docs/tailwind/layout/break-inside)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/layout/break-before#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/break-before#compatibility)

---

# Overflow

Last updated on June 26, 2025

Overflow
========

[Usage](https://www.nativewind.dev/docs/tailwind/layout/overflow#usage)

------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/overflow)

[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/overflow#compatibility)

----------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| visible | ✅ Full Support |
| hidden | ✅ Full Support |
| scroll | ✅ Full Support |
| overflow-auto | 🌐 Web only |
| overflow-clip | 🌐 Web only |
| overflow-x-auto | 🌐 Web only |
| overflow-y-auto | 🌐 Web only |
| overflow-x-hidden | 🌐 Web only |
| overflow-y-hidden | 🌐 Web only |
| overflow-x-clip | 🌐 Web only |
| overflow-y-clip | 🌐 Web only |
| overflow-x-visible | 🌐 Web only |
| overflow-y-visible | 🌐 Web only |
| overflow-x-scroll | 🌐 Web only |
| overflow-y-scroll | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Object Position\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/layout/object-position)
[Overscroll Behavior\
\
Next Page](https://www.nativewind.dev/docs/tailwind/layout/overscroll-behavior)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/layout/overflow#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/overflow#compatibility)

---

# Position

Last updated on June 26, 2025

Position
========

[Usage](https://www.nativewind.dev/docs/tailwind/layout/position#usage)

------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/position)

[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/position#compatibility)

----------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| absolute | ✅ Full Support |
| relative | ✅ Full Support |
| fixed | 🌐 Web only |
| sticky | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Overscroll Behavior\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/layout/overscroll-behavior)
[Top / Right / Bottom / Left\
\
Next Page](https://www.nativewind.dev/docs/tailwind/layout/top-right-bottom-left)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/layout/position#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/position#compatibility)

---

# Overscroll Behavior

Last updated on June 26, 2025

Overscroll Behavior
===================

[Usage](https://www.nativewind.dev/docs/tailwind/layout/overscroll-behavior#usage)

-----------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/overscroll-behavior)

[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/overscroll-behavior#compatibility)

---------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| overscroll-auto | 🌐 Web only |
| overscroll-contain | 🌐 Web only |
| overscroll-none | 🌐 Web only |
| overscroll-y-auto | 🌐 Web only |
| overscroll-y-contain | 🌐 Web only |
| overscroll-y-none | 🌐 Web only |
| overscroll-x-auto | 🌐 Web only |
| overscroll-x-contain | 🌐 Web only |
| overscroll-x-none | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Overflow\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/layout/overflow)
[Position\
\
Next Page](https://www.nativewind.dev/docs/tailwind/layout/position)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/layout/overscroll-behavior#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/overscroll-behavior#compatibility)

---

# Top / Right / Bottom / Left

Last updated on June 26, 2025

Top / Right / Bottom / Left
===========================

[Usage](https://www.nativewind.dev/docs/tailwind/layout/top-right-bottom-left#usage)

-------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/top-right-bottom-left)

[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/top-right-bottom-left#compatibility)

-----------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| inset-{n} | ✅ Full Support |
| inset-[n] | ✅ Full Support |
| inset-x-{n} | ✅ Full Support |
| inset-y-[n] | ✅ Full Support |
| top-{n} | ✅ Full Support |
| top-[n] | ✅ Full Support |
| bottom-{n} | ✅ Full Support |
| bottom-[n] | ✅ Full Support |
| left-{n} | ✅ Full Support |
| left-[n] | ✅ Full Support |
| right-{n} | ✅ Full Support |
| right-[n] | ✅ Full Support |
| inset-auto | 🌐 Web only |
| inset-x-auto | 🌐 Web only |
| inset-y-auto | 🌐 Web only |
| top-auto | 🌐 Web only |
| bottom-auto | 🌐 Web only |
| left-auto | 🌐 Web only |
| right-auto | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Position\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/layout/position)
[Visibility\
\
Next Page](https://www.nativewind.dev/docs/tailwind/layout/visibility)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/layout/top-right-bottom-left#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/top-right-bottom-left#compatibility)

---

# Z-Index

Last updated on June 26, 2025

Z-Index
=======

[Usage](https://www.nativewind.dev/docs/tailwind/layout/z-index#usage)

-----------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/z-index)

[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/z-index#compatibility)

---------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| z-{n} | ✅ Full Support |
| z-[n] | ✅ Full Support |
| z-auto | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Visibility\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/layout/visibility)
[Align Content\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/align-content)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/layout/z-index#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/z-index#compatibility)

---

# Align Content

Last updated on June 26, 2025

Align Content
=============

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/align-content#usage)

------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/align-content)

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/align-content#compatibility)

----------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| content-center | ✅ Full Support |
| content-start | ✅ Full Support |
| content-end | ✅ Full Support |
| content-between | ✅ Full Support |
| content-around | ✅ Full Support |
| content-evenly | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Z-Index\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/layout/z-index)
[Align Items\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/align-items)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/align-content#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/align-content#compatibility)

---

# Align Items

Last updated on June 26, 2025

Align Items
===========

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/align-items#usage)

----------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/align-items)

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/align-items#compatibility)

--------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| items-start | ✅ Full Support |
| items-end | ✅ Full Support |
| items-center | ✅ Full Support |
| items-baseline | ✅ Full Support |
| items-stretch | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Align Content\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/align-content)
[Align Self\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/align-self)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/align-items#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/align-items#compatibility)

---

# Visibility

Last updated on June 26, 2025

Visibility
==========

On native, the Visibility class names map to `opacity` instead of `visibility`.

[Usage](https://www.nativewind.dev/docs/tailwind/layout/visibility#usage)

--------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/visibility)

[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/visibility#compatibility)

------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| visible | ✅ Full Support |
| invisible | ✅ Full Support |
| collapse | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Top / Right / Bottom / Left\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/layout/top-right-bottom-left)
[Z-Index\
\
Next Page](https://www.nativewind.dev/docs/tailwind/layout/z-index)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/layout/visibility#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/visibility#compatibility)

---

# Align Self

Last updated on June 26, 2025

Align Self
==========

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/align-self#usage)

---------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/align-self)

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/align-self#compatibility)

-------------------------------------------------------------------------------------------

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

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Align Items\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/align-items)
[Flex\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/flex)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/align-self#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/align-self#compatibility)

---

# Flex

Last updated on June 26, 2025

Flex
====

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/flex#usage)

---------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/flex)

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/flex#compatibility)

-------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| flex-1 | ✅ Full Support |
| basis-[n] | ✅ Full Support |
| flex-auto | 🌐 Web only |
| flex-initial | 🌐 Web only |
| flex-none | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Align Self\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/align-self)
[Flex Basis\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/flex-basis)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/flex#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/flex#compatibility)

---

# Flex Basis

Last updated on June 26, 2025

Flex Basis
==========

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/flex-basis#usage)

---------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/flex-basis)

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/flex-basis#compatibility)

-------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| basis-{n} | ✅ Full Support |
| basis-[n] | ✅ Full Support |
| basis-auto | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Flex\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/flex)
[Flex Direction\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/flex-direction)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/flex-basis#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/flex-basis#compatibility)

---

# Flex Direction

Last updated on June 26, 2025

Flex Direction
==============

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/flex-direction#usage)

-------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/flex-direction)

:::tip React Native has a different default flex direction to web. We highly recommend explicting setting the Flex Direction on your components. :::

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/flex-direction#compatibility)

-----------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| flex-row | ✅ Full Support |
| flex-row-reverse | ✅ Full Support |
| flex-col | ✅ Full Support |
| flex-col-reverse | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Flex Basis\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/flex-basis)
[Flex Grow\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/flex-grow)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/flex-direction#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/flex-direction#compatibility)

---

# Clear

Last updated on June 26, 2025

Clear
=====

[Usage](https://www.nativewind.dev/docs/tailwind/layout/clear#usage)

---------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/clear)

[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/clear#compatibility)

-------------------------------------------------------------------------------------

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Break Inside\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/layout/break-inside)
[Columns\
\
Next Page](https://www.nativewind.dev/docs/tailwind/layout/columns)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/layout/clear#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/clear#compatibility)

---

# Columns

Last updated on June 26, 2025

Columns
=======

[Usage](https://www.nativewind.dev/docs/tailwind/layout/columns#usage)

-----------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/columns)

[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/columns#compatibility)

---------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| columns-[n] | 🌐 Web only |
| columns-{n} | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Clear\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/layout/clear)
[Container\
\
Next Page](https://www.nativewind.dev/docs/tailwind/layout/container)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/layout/columns#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/columns#compatibility)

---

# Container

Last updated on June 26, 2025

Container
=========

Nativewind's default breakpoints are not yet designed for native devices and still uses the web defaults.

[Usage](https://www.nativewind.dev/docs/tailwind/layout/container#usage)

-------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/container)

[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/container#compatibility)

-----------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| container | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Columns\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/layout/columns)
[Display\
\
Next Page](https://www.nativewind.dev/docs/tailwind/layout/display)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/layout/container#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/container#compatibility)

---

# Display

Last updated on June 26, 2025

Display
=======

[Usage](https://www.nativewind.dev/docs/tailwind/layout/display#usage)

-----------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/display)

[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/display#compatibility)

---------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| flex | ✅ Full Support |
| hidden | ✅ Full Support |
| 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 |
| contents | 🌐 Web only |
| list-item | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Container\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/layout/container)
[Floats\
\
Next Page](https://www.nativewind.dev/docs/tailwind/layout/float)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/layout/display#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/display#compatibility)

---

# Floats

Last updated on June 26, 2025

Floats
======

[Usage](https://www.nativewind.dev/docs/tailwind/layout/float#usage)

---------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/float)

[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/float#compatibility)

-------------------------------------------------------------------------------------

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Display\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/layout/display)
[Isolation\
\
Next Page](https://www.nativewind.dev/docs/tailwind/layout/isolation)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/layout/float#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/float#compatibility)

---

# Isolation

Last updated on June 26, 2025

Isolation
=========

[Usage](https://www.nativewind.dev/docs/tailwind/layout/isolation#usage)

-------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/isolation)

[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/isolation#compatibility)

-----------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| isolate | 🌐 Web only |
| isolation-auto | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Floats\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/layout/float)
[Object Fit\
\
Next Page](https://www.nativewind.dev/docs/tailwind/layout/object-fit)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/layout/isolation#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/layout/isolation#compatibility)

---

# Flex Grow

Last updated on June 26, 2025

Flex Grow
=========

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/flex-grow#usage)

--------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/flex-grow)

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/flex-grow#compatibility)

------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| grow | ✅ Full Support |
| grow-0 | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Flex Direction\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/flex-direction)
[Flex Shrink\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/flex-shrink)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/flex-grow#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/flex-grow#compatibility)

---

# Flex Shrink

Last updated on June 26, 2025

Flex Shrink
===========

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/flex-shrink#usage)

----------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/flex-shrink)

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/flex-shrink#compatibility)

--------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| shrink | ✅ Full Support |
| shrink-0 | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Flex Grow\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/flex-grow)
[Flex Wrap\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/flex-wrap)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/flex-shrink#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/flex-shrink#compatibility)

---

# Flex Wrap

Last updated on June 26, 2025

Flex Wrap
=========

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/flex-wrap#usage)

--------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/flex-wrap)

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/flex-wrap#compatibility)

------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| flex-wrap | ✅ Full Support |
| flex-wrap-reverse | ✅ Full Support |
| flex-nowrap | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Flex Shrink\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/flex-shrink)
[Gap\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/gap)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/flex-wrap#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/flex-wrap#compatibility)

---

# Gap

Last updated on June 26, 2025

Gap
===

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/gap#usage)

--------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/gap)

CAUTION

`gap` requires React Native 0.71

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/gap#compatibility)

------------------------------------------------------------------------------------

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

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Flex Wrap\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/flex-wrap)
[Grid Auto Columns\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/grid-auto-columns)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/gap#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/gap#compatibility)

---

# Grid Auto Columns

Last updated on June 26, 2025

Grid Auto Columns
=================

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/grid-auto-columns#usage)

----------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/grid-auto-columns)

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/grid-auto-columns#compatibility)

--------------------------------------------------------------------------------------------------

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Gap\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/gap)
[Grid Auto Flow\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/grid-auto-flow)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/grid-auto-columns#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/grid-auto-columns#compatibility)

---

# Grid Auto Flow

Last updated on June 26, 2025

Grid Auto Flow
==============

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/grid-auto-flow#usage)

-------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/grid-auto-flow)

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/grid-auto-flow#compatibility)

-----------------------------------------------------------------------------------------------

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Grid Auto Columns\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/grid-auto-columns)
[Grid Auto Rows\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/grid-auto-rows)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/grid-auto-flow#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/grid-auto-flow#compatibility)

---

# Grid Auto Rows

Last updated on June 26, 2025

Grid Auto Rows
==============

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/grid-auto-rows#usage)

-------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/grid-auto-rows)

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/grid-auto-rows#compatibility)

-----------------------------------------------------------------------------------------------

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Grid Auto Flow\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/grid-auto-flow)
[Grid Column Start / End\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/grid-column)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/grid-auto-rows#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/grid-auto-rows#compatibility)

---

# Grid Row Start / End

Last updated on June 26, 2025

Grid Row Start / End
====================

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/grid-row#usage)

-------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/grid-row)

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/grid-row#compatibility)

-----------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| row-auto | 🌐 Web only |
| row-span-1 | 🌐 Web only |
| row-span-2 | 🌐 Web only |
| row-span-3 | 🌐 Web only |
| row-span-4 | 🌐 Web only |
| row-span-5 | 🌐 Web only |
| row-span-6 | 🌐 Web only |
| row-span-7 | 🌐 Web only |
| row-span-8 | 🌐 Web only |
| row-span-9 | 🌐 Web only |
| row-span-10 | 🌐 Web only |
| row-span-11 | 🌐 Web only |
| row-span-12 | 🌐 Web only |
| row-span-full | 🌐 Web only |
| row-start-1 | 🌐 Web only |
| row-start-2 | 🌐 Web only |
| row-start-3 | 🌐 Web only |
| row-start-4 | 🌐 Web only |
| row-start-5 | 🌐 Web only |
| row-start-6 | 🌐 Web only |
| row-start-7 | 🌐 Web only |
| row-start-8 | 🌐 Web only |
| row-start-9 | 🌐 Web only |
| row-start-10 | 🌐 Web only |
| row-start-11 | 🌐 Web only |
| row-start-12 | 🌐 Web only |
| row-start-13 | 🌐 Web only |
| row-start-auto | 🌐 Web only |
| row-end-1 | 🌐 Web only |
| row-end-2 | 🌐 Web only |
| row-end-3 | 🌐 Web only |
| row-end-4 | 🌐 Web only |
| row-end-5 | 🌐 Web only |
| row-end-6 | 🌐 Web only |
| row-end-7 | 🌐 Web only |
| row-end-8 | 🌐 Web only |
| row-end-9 | 🌐 Web only |
| row-end-10 | 🌐 Web only |
| row-end-11 | 🌐 Web only |
| row-end-12 | 🌐 Web only |
| row-end-13 | 🌐 Web only |
| row-end-auto | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Grid Column Start / End\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/grid-column)
[Grid Template Columns\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/grid-template-columns)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/grid-row#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/grid-row#compatibility)

---

# Grid Template Columns

Last updated on June 26, 2025

Grid Template Columns
=====================

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/grid-template-columns#usage)

--------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/grid-template-columns)

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/grid-template-columns#compatibility)

------------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| grid-cols-1 | 🌐 Web only |
| grid-cols-2 | 🌐 Web only |
| grid-cols-3 | 🌐 Web only |
| grid-cols-4 | 🌐 Web only |
| grid-cols-5 | 🌐 Web only |
| grid-cols-6 | 🌐 Web only |
| grid-cols-7 | 🌐 Web only |
| grid-cols-8 | 🌐 Web only |
| grid-cols-9 | 🌐 Web only |
| grid-cols-10 | 🌐 Web only |
| grid-cols-11 | 🌐 Web only |
| grid-cols-12 | 🌐 Web only |
| grid-cols-none | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Grid Row Start / End\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/grid-row)
[Grid Template Rows\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/grid-template-rows)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/grid-template-columns#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/grid-template-columns#compatibility)

---

# Grid Template Rows

Last updated on June 26, 2025

Grid Template Rows
==================

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/grid-template-rows#usage)

-----------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/grid-template-rows)

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/grid-template-rows#compatibility)

---------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| grid-rows-1 | 🌐 Web only |
| grid-rows-2 | 🌐 Web only |
| grid-rows-3 | 🌐 Web only |
| grid-rows-4 | 🌐 Web only |
| grid-rows-5 | 🌐 Web only |
| grid-rows-6 | 🌐 Web only |
| grid-rows-7 | 🌐 Web only |
| grid-rows-8 | 🌐 Web only |
| grid-rows-9 | 🌐 Web only |
| grid-rows-10 | 🌐 Web only |
| grid-rows-11 | 🌐 Web only |
| grid-rows-12 | 🌐 Web only |
| grid-rows-none | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Grid Template Columns\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/grid-template-columns)
[Justify Content\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/justify-content)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/grid-template-rows#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/grid-template-rows#compatibility)

---

# Justify Items

Last updated on June 26, 2025

Justify Items
=============

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/justify-items#usage)

------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/justify-items)

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/justify-items#compatibility)

----------------------------------------------------------------------------------------------

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Justify Content\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/justify-content)
[Justify Self\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/justify-self)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/justify-items#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/justify-items#compatibility)

---

# Justify Content

Last updated on June 26, 2025

Justify Content
===============

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/justify-content#usage)

--------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/justify-content)

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/justify-content#compatibility)

------------------------------------------------------------------------------------------------

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

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Grid Template Rows\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/grid-template-rows)
[Justify Items\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/justify-items)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/justify-content#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/justify-content#compatibility)

---

# Justify Self

Last updated on June 26, 2025

Justify Self
============

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/justify-self#usage)

-----------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/justify-self)

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/justify-self#compatibility)

---------------------------------------------------------------------------------------------

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Justify Items\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/justify-items)
[Order\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/order)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/justify-self#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/justify-self#compatibility)

---

# Place Items

Last updated on June 26, 2025

Place Items
===========

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/place-content#usage)

------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/place-content)

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/place-content#compatibility)

----------------------------------------------------------------------------------------------

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

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Order\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/order)
[Place Content\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/place-items)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/place-content#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/place-content#compatibility)

---

# Place Content

Last updated on June 26, 2025

Place Content
=============

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/place-items#usage)

----------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/place-items)

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/place-items#compatibility)

--------------------------------------------------------------------------------------------

| 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-baseline | 🌐 Web only |
| place-content-stretch | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Place Items\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/place-content)
[Place Self\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/place-self)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/place-items#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/place-items#compatibility)

---

# Order

Last updated on June 26, 2025

Order
=====

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/order#usage)

----------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/order)

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/order#compatibility)

--------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| order-1 | 🌐 Web only |
| order-2 | 🌐 Web only |
| order-3 | 🌐 Web only |
| order-4 | 🌐 Web only |
| order-5 | 🌐 Web only |
| order-6 | 🌐 Web only |
| order-7 | 🌐 Web only |
| order-8 | 🌐 Web only |
| order-9 | 🌐 Web only |
| order-10 | 🌐 Web only |
| order-11 | 🌐 Web only |
| order-12 | 🌐 Web only |
| order-first | 🌐 Web only |
| order-last | 🌐 Web only |
| order-none | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Justify Self\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/justify-self)
[Place Items\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/place-content)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/order#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/order#compatibility)

---

# Place Self

Last updated on June 26, 2025

Place Self
==========

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/place-self#usage)

---------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/place-self)

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/place-self#compatibility)

-------------------------------------------------------------------------------------------

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Place Content\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/place-items)
[Margin\
\
Next Page](https://www.nativewind.dev/docs/tailwind/spacing/margin)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/place-self#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/place-self#compatibility)

---

# Margin

Last updated on June 26, 2025

Margin
======

[Usage](https://www.nativewind.dev/docs/tailwind/spacing/margin#usage)

-----------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/margin)

[Compatibility](https://www.nativewind.dev/docs/tailwind/spacing/margin#compatibility)

---------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| m-{n} | ✅ Full Support |
| m-[n] | ✅ Full Support |
| mx-{n} | ✅ Full Support |
| mx-[n] | ✅ Full Support |
| my-{n} | ✅ Full Support |
| my-[n] | ✅ Full Support |
| mt-{n} | ✅ Full Support |
| mt-[n] | ✅ Full Support |
| mr-{n} | ✅ Full Support |
| mr-[n] | ✅ Full Support |
| mb-{n} | ✅ Full Support |
| mb-[n] | ✅ Full Support |
| ml-{n} | ✅ Full Support |
| ml-[n] | ✅ Full Support |
| m-auto | ✅ Full Support |
| mx-auto | ✅ Full Support |
| my-auto | ✅ Full Support |
| mt-auto | ✅ Full Support |
| mr-auto | ✅ Full Support |
| mb-auto | ✅ Full Support |
| ml-auto | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Place Self\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/place-self)
[Padding\
\
Next Page](https://www.nativewind.dev/docs/tailwind/spacing/padding)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/spacing/margin#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/spacing/margin#compatibility)

---

# Grid Column Start / End

Last updated on June 26, 2025

Grid Column Start / End
=======================

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/grid-column#usage)

----------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/grid-column)

[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/grid-column#compatibility)

--------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| col-auto | 🌐 Web only |
| col-span-1 | 🌐 Web only |
| col-span-2 | 🌐 Web only |
| col-span-3 | 🌐 Web only |
| col-span-4 | 🌐 Web only |
| col-span-5 | 🌐 Web only |
| col-span-6 | 🌐 Web only |
| col-span-7 | 🌐 Web only |
| col-span-8 | 🌐 Web only |
| col-span-9 | 🌐 Web only |
| col-span-10 | 🌐 Web only |
| col-span-11 | 🌐 Web only |
| col-span-12 | 🌐 Web only |
| col-span-full | 🌐 Web only |
| col-start-1 | 🌐 Web only |
| col-start-2 | 🌐 Web only |
| col-start-3 | 🌐 Web only |
| col-start-4 | 🌐 Web only |
| col-start-5 | 🌐 Web only |
| col-start-6 | 🌐 Web only |
| col-start-7 | 🌐 Web only |
| col-start-8 | 🌐 Web only |
| col-start-9 | 🌐 Web only |
| col-start-10 | 🌐 Web only |
| col-start-11 | 🌐 Web only |
| col-start-12 | 🌐 Web only |
| col-start-13 | 🌐 Web only |
| col-start-auto | 🌐 Web only |
| col-end-1 | 🌐 Web only |
| col-end-2 | 🌐 Web only |
| col-end-3 | 🌐 Web only |
| col-end-4 | 🌐 Web only |
| col-end-5 | 🌐 Web only |
| col-end-6 | 🌐 Web only |
| col-end-7 | 🌐 Web only |
| col-end-8 | 🌐 Web only |
| col-end-9 | 🌐 Web only |
| col-end-10 | 🌐 Web only |
| col-end-11 | 🌐 Web only |
| col-end-12 | 🌐 Web only |
| col-end-13 | 🌐 Web only |
| col-end-auto | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Grid Auto Rows\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/flexbox/grid-auto-rows)
[Grid Row Start / End\
\
Next Page](https://www.nativewind.dev/docs/tailwind/flexbox/grid-row)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/flexbox/grid-column#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/flexbox/grid-column#compatibility)

---

# Padding

Last updated on June 26, 2025

Padding
=======

[Usage](https://www.nativewind.dev/docs/tailwind/spacing/padding#usage)

------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/padding)

[Compatibility](https://www.nativewind.dev/docs/tailwind/spacing/padding#compatibility)

----------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| p-{n} | ✅ Full Support |
| p-[n] | ✅ Full Support |
| px-{n} | ✅ Full Support |
| px-[n] | ✅ Full Support |
| py-{n} | ✅ Full Support |
| py-[n] | ✅ Full Support |
| pt-{n} | ✅ Full Support |
| pt-[n] | ✅ Full Support |
| pr-{n} | ✅ Full Support |
| pr-[n] | ✅ Full Support |
| pb-{n} | ✅ Full Support |
| pb-[n] | ✅ Full Support |
| pl-{n} | ✅ Full Support |
| pl-[n] | ✅ Full Support |
| p-auto | 🌐 Web only |
| px-auto | 🌐 Web only |
| py-auto | 🌐 Web only |
| pt-auto | 🌐 Web only |
| pr-auto | 🌐 Web only |
| pb-auto | 🌐 Web only |
| pl-auto | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Margin\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/spacing/margin)
[Space Between\
\
Next Page](https://www.nativewind.dev/docs/tailwind/spacing/space-between)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/spacing/padding#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/spacing/padding#compatibility)

---

# Space Between

Last updated on June 26, 2025

Space Between
=============

[Usage](https://www.nativewind.dev/docs/tailwind/spacing/space-between#usage)

------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/space-between)

CAUTION

`space-{n}` was temporary removed in `v4`. You can now use [`gap-*`](https://www.nativewind.dev/docs/tailwind/flexbox/gap)
 utilities to add space between elements. We will re-add it once React Native adds support for `display: 'block'`.

[Compatibility](https://www.nativewind.dev/docs/tailwind/spacing/space-between#compatibility)

----------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| space-{n} | 🌐 Web only |
| space-[n] | 🌐 Web only |
| space-x-{n} | 🌐 Web only |
| space-x-[n] | 🌐 Web only |
| space-y-{n} | 🌐 Web only |
| space-y-[n] | 🌐 Web only |
| space-x-reverse | 🌐 Web only |
| space-y-reverse | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Padding\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/spacing/padding)
[Height\
\
Next Page](https://www.nativewind.dev/docs/tailwind/sizing/height)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/spacing/space-between#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/spacing/space-between#compatibility)

---

# Max-Height

Last updated on June 26, 2025

Max-Height
==========

[Usage](https://www.nativewind.dev/docs/tailwind/sizing/max-height#usage)

--------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/max-height)

[Compatibility](https://www.nativewind.dev/docs/tailwind/sizing/max-height#compatibility)

------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| max-h-0 | ✅ Full Support |
| max-h-[n] | ✅ Full Support |
| max-h-{n} | ✅ Full Support |
| max-h-full | ✅ Full Support |
| max-h-screen | ✅ Full Support |
| max-h-min | 🌐 Web only |
| max-h-max | 🌐 Web only |
| max-h-fit | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Height\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/sizing/height)
[Max-Width\
\
Next Page](https://www.nativewind.dev/docs/tailwind/sizing/max-width)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/sizing/max-height#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/sizing/max-height#compatibility)

---

# Height

Last updated on June 26, 2025

Height
======

[Usage](https://www.nativewind.dev/docs/tailwind/sizing/height#usage)

----------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/height)

[Compatibility](https://www.nativewind.dev/docs/tailwind/sizing/height#compatibility)

--------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| h-{n} | ✅ Full Support |
| h-[n] | ✅ Full Support |
| h-full | ✅ Full Support |
| h-screen | ✅ Full Support |
| h-auto | 🌐 Web only |
| h-min | 🌐 Web only |
| h-max | 🌐 Web only |
| h-fit | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Space Between\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/spacing/space-between)
[Max-Height\
\
Next Page](https://www.nativewind.dev/docs/tailwind/sizing/max-height)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/sizing/height#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/sizing/height#compatibility)

---

# Max-Width

Last updated on June 26, 2025

Max-Width
=========

[Usage](https://www.nativewind.dev/docs/tailwind/sizing/max-width#usage)

-------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/max-width)

[Compatibility](https://www.nativewind.dev/docs/tailwind/sizing/max-width#compatibility)

-----------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| max-w-0 | ✅ Full Support |
| max-w-[n] | ✅ Full Support |
| max-w-{n} | ✅ Full Support |
| max-w-full | ✅ Full Support |
| max-w-screen-sm | ✅ Full Support |
| max-w-screen-md | ✅ Full Support |
| max-w-screen-lg | ✅ Full Support |
| max-w-screen-xl | ✅ Full Support |
| max-w-screen-2xl | ✅ Full Support |
| max-w-min | 🌐 Web only |
| max-w-max | 🌐 Web only |
| max-w-fit | 🌐 Web only |
| max-w-prose | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Max-Height\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/sizing/max-height)
[Min-Height\
\
Next Page](https://www.nativewind.dev/docs/tailwind/sizing/min-height)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/sizing/max-width#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/sizing/max-width#compatibility)

---

# Min-Height

Last updated on June 26, 2025

Min-Height
==========

[Usage](https://www.nativewind.dev/docs/tailwind/sizing/min-height#usage)

--------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/min-height)

[Compatibility](https://www.nativewind.dev/docs/tailwind/sizing/min-height#compatibility)

------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| min-h-0 | ✅ Full Support |
| min-h-[n] | ✅ Full Support |
| min-h-full | ✅ Full Support |
| min-h-min | 🌐 Web only |
| min-h-max | 🌐 Web only |
| min-h-fit | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Max-Width\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/sizing/max-width)
[Min-Width\
\
Next Page](https://www.nativewind.dev/docs/tailwind/sizing/min-width)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/sizing/min-height#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/sizing/min-height#compatibility)

---

# Min-Width

Last updated on June 26, 2025

Min-Width
=========

[Usage](https://www.nativewind.dev/docs/tailwind/sizing/min-width#usage)

-------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/min-width)

[Compatibility](https://www.nativewind.dev/docs/tailwind/sizing/min-width#compatibility)

-----------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| min-w-0 | ✅ Full Support |
| min-w-[n] | ✅ Full Support |
| min-w-full | ✅ Full Support |
| min-w-min | 🌐 Web only |
| min-w-max | 🌐 Web only |
| min-w-fit | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Min-Height\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/sizing/min-height)
[Width\
\
Next Page](https://www.nativewind.dev/docs/tailwind/sizing/width)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/sizing/min-width#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/sizing/min-width#compatibility)

---

# Content

Last updated on June 26, 2025

Content
=======

[Usage](https://www.nativewind.dev/docs/tailwind/typography/content#usage)

---------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/content)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/content#compatibility)

-------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| content-none | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Width\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/sizing/width)
[Font Family\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/font-family)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/content#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/content#compatibility)

---

# Width

Last updated on June 26, 2025

Width
=====

[Usage](https://www.nativewind.dev/docs/tailwind/sizing/width#usage)

---------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/width)

[Compatibility](https://www.nativewind.dev/docs/tailwind/sizing/width#compatibility)

-------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| w-{n} | ✅ Full Support |
| w-[n] | ✅ Full Support |
| w-full | ✅ Full Support |
| w-screen | ✅ Full Support |
| w-auto | 🌐 Web only |
| w-min | 🌐 Web only |
| w-max | 🌐 Web only |
| w-fit | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Min-Width\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/sizing/min-width)
[Content\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/content)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/sizing/width#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/sizing/width#compatibility)

---

# Font Smoothing

Last updated on June 26, 2025

Font Smoothing
==============

[Usage](https://www.nativewind.dev/docs/tailwind/typography/font-smoothing#usage)

----------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/font-smoothing)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/font-smoothing#compatibility)

--------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| antialiased | ✅ Full Support |
| subpixel-antialiased | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Font Size\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/font-size)
[Font Style\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/font-style)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/font-smoothing#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/font-smoothing#compatibility)

---

# Font Family

Last updated on June 26, 2025

Font Family
===========

[Usage](https://www.nativewind.dev/docs/tailwind/typography/font-family#usage)

-------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/font-family)

React Native loads fonts differently between iOS and Android. We recommend following [https://github.com/jsamr/react-native-font-demo](https://github.com/jsamr/react-native-font-demo)
 to use fonts that work consistently on all platforms and allow you to use Tailwind CSS as expected.

### [Differences on Native](https://www.nativewind.dev/docs/tailwind/typography/font-family#differences-on-native)

React Native does not support fallback fonts. If an array of fonts are provided, Nativewind will only use the first font.

### [Adding fonts to your theme](https://www.nativewind.dev/docs/tailwind/typography/font-family#adding-fonts-to-your-theme)

Nativewind will not load/link fonts into your app. If you have any issues with the font family or weights not rendering, please first verify it works with inline styles.

tailwind.config.js

    import { platformSelect } from "nativewind/theme";
     
    module.exports = {
      theme: {
        extend: {
          fontFamily: {
            example: ["ExampleFontFamily"],
            system: platformSelect({
              ios: "Georgia",
              android: "sans-serif",
              default: "ui-sans-serif",
            }),
          },
        },
      },
    };

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/font-family#compatibility)

-----------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| font-sans | ✅ Full Support |
| font-serif | ✅ Full Support |
| font-mono | ✅ Full Support |
| font-[n] | ✅ Full Support |
| font-{n} | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Content\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/content)
[Font Size\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/font-size)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/font-family#usage)
[Differences on Native](https://www.nativewind.dev/docs/tailwind/typography/font-family#differences-on-native)
[Adding fonts to your theme](https://www.nativewind.dev/docs/tailwind/typography/font-family#adding-fonts-to-your-theme)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/font-family#compatibility)

---

# Hyphens

Last updated on June 26, 2025

Hyphens
=======

[Usage](https://www.nativewind.dev/docs/tailwind/typography/hyphens#usage)

---------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/hyphens)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/hyphens#compatibility)

-------------------------------------------------------------------------------------------

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Font Weight\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/font-weight)
[Letter Spacing\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/letter-spacing)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/hyphens#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/hyphens#compatibility)

---

# Font Style

Last updated on June 26, 2025

Font Style
==========

[Usage](https://www.nativewind.dev/docs/tailwind/typography/font-style#usage)

------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/font-style)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/font-style#compatibility)

----------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| italic | ✅ Full Support |
| not-italic | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Font Smoothing\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/font-smoothing)
[Font Variant Numeric\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/font-variant-numeric)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/font-style#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/font-style#compatibility)

---

# Font Size

Last updated on June 26, 2025

Font Size
=========

[Usage](https://www.nativewind.dev/docs/tailwind/typography/font-size#usage)

-----------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/font-size)

[`rem` scaling](https://www.nativewind.dev/docs/tailwind/typography/font-size#rem-scaling)

-------------------------------------------------------------------------------------------

Tailwind CSS using `rem` units for font sizes by default. To improve performance Nativewind will inline `rem` values on all platforms, except for Web. Nativewind uses the following `rem` for each platform

*   **Web**: `16px`
*   **All other platforms**: `14px` (matches React Native's default Text size)

If you need dynamically scaling text for a section of your app, we recommend using a CSS variable.

tailwind.config.js

    module.exports = {
      theme: {
        extend: {
          fontSize: {
            dynamic: "var(--font-size-dynamic)",
          },
        },
      },
    };

### [Scaling text based upon screen width](https://www.nativewind.dev/docs/tailwind/typography/font-size#scaling-text-based-upon-screen-width)

A common use case for dynamically scaling text is to scale text based upon the screen width. You can do this by using CSS variables and media queries.

Nativewind currently does not support media queries on `:root`, so you'll need to use a class.

global.css

    @media (min-width: 640px) {
      .text-root {
        --font-size-dynamic: 16px;
      }
    }
     
    @media (min-width: 768px) {
      .text-root {
        --font-size-dynamic: 18px;
      }
    }

App.tsx

    export default App() {
      return (
        <Text className="text-root">
          <Text className="text-[--font-size-dynamic]">I scale with screen width</Text>
        </Text>
      )
    }

### [Changing the default inlined `rem` value](https://www.nativewind.dev/docs/tailwind/typography/font-size#changing-the-default-inlined-rem-value)

You can the change the default `rem` value by setting `rem` in your `metro.config.js`

metro.config.js

    module.exports = withNativeWind({
      input: "./global.css"
      inlineRem: 16,
    });

### [Disabling `inlineRem`](https://www.nativewind.dev/docs/tailwind/typography/font-size#disabling-inlinerem)

You can disable the inlining behaviour by passing `false`

metro.config.js

    module.exports = withNativeWind({
      inline: "./global.css"
      inlineRem: false,
    });

You will then need to specify your own `rem` value in your CSS.

global.css

    :root {
      font-size: 16px;
    }

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/font-size#compatibility)

---------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| text-{n} | ✅ Full Support |
| text-[n] | ✅ Full Support |
| text-base | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Font Family\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/font-family)
[Font Smoothing\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/font-smoothing)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/font-size#usage)
[`rem` scaling](https://www.nativewind.dev/docs/tailwind/typography/font-size#rem-scaling)
[Scaling text based upon screen width](https://www.nativewind.dev/docs/tailwind/typography/font-size#scaling-text-based-upon-screen-width)
[Changing the default inlined `rem` value](https://www.nativewind.dev/docs/tailwind/typography/font-size#changing-the-default-inlined-rem-value)
[Disabling `inlineRem`](https://www.nativewind.dev/docs/tailwind/typography/font-size#disabling-inlinerem)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/font-size#compatibility)

---

# Font Variant Numeric

Last updated on June 26, 2025

Font Variant Numeric
====================

[Usage](https://www.nativewind.dev/docs/tailwind/typography/font-variant-numeric#usage)

----------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/font-variant-numeric)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/font-variant-numeric#compatibility)

--------------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| normal-nums | ✅ Full Support |
| ordinal | ✅ Full Support |
| slashed-zero | ✅ Full Support |
| lining-nums | ✅ Full Support |
| oldstyle-nums | ✅ Full Support |
| proportional-nums | ✅ Full Support |
| tabular-nums | ✅ Full Support |
| diagonal-fractions | ✅ Full Support |
| stacked-fractions | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Font Style\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/font-style)
[Font Weight\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/font-weight)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/font-variant-numeric#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/font-variant-numeric#compatibility)

---

# Font Weight

Last updated on June 26, 2025

Font Weight
===========

[Usage](https://www.nativewind.dev/docs/tailwind/typography/font-weight#usage)

-------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/font-weight)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/font-weight#compatibility)

-----------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| font-thin | ✅ Full Support |
| font-extralight | ✅ Full Support |
| font-light | ✅ Full Support |
| font-normal | ✅ Full Support |
| font-medium | ✅ Full Support |
| font-semibold | ✅ Full Support |
| font-bold | ✅ Full Support |
| font-extrabold | ✅ Full Support |
| font-black | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Font Variant Numeric\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/font-variant-numeric)
[Hyphens\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/hyphens)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/font-weight#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/font-weight#compatibility)

---

# Line Clamp

Last updated on June 26, 2025

Line Clamp
==========

[Usage](https://www.nativewind.dev/docs/tailwind/typography/line-clamp#usage)

------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/line-clamp)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/line-clamp#compatibility)

----------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| line-clamp-1 | ✅ Full Support |
| line-clamp-2 | ✅ Full Support |
| line-clamp-3 | ✅ Full Support |
| line-clamp-4 | ✅ Full Support |
| line-clamp-5 | ✅ Full Support |
| line-clamp-6 | ✅ Full Support |
| line-clamp-none | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Letter Spacing\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/letter-spacing)
[Line Height\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/line-height)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/line-clamp#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/line-clamp#compatibility)

---

# Line Height

Last updated on June 26, 2025

Line Height
===========

[Usage](https://www.nativewind.dev/docs/tailwind/typography/line-height#usage)

-------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/line-height)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/line-height#compatibility)

-----------------------------------------------------------------------------------------------

React Native does not support the relative line height utilities due to lack of support for `em` units.

| Class | Support |
| --- | --- |
| leading-{n} | ✅ Full Support |
| leading-[n] | ✅ Full Support |
| leading-none | 🌐 Web only |
| leading-tight | 🌐 Web only |
| leading-snug | 🌐 Web only |
| leading-normal | 🌐 Web only |
| leading-relaxed | 🌐 Web only |
| leading-loose | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Line Clamp\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/line-clamp)
[List Style Image\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/list-style-image)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/line-height#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/line-height#compatibility)

---

# List Style Position

Last updated on June 26, 2025

List Style Position
===================

[Usage](https://www.nativewind.dev/docs/tailwind/typography/list-style-position#usage)

---------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/list-style-position)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/list-style-position#compatibility)

-------------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| list-inside | ✅ Full Support |
| list-outside | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[List Style Image\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/list-style-image)
[List Style Type\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/list-style-type)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/list-style-position#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/list-style-position#compatibility)

---

# List Style Image

Last updated on June 26, 2025

List Style Image
================

[Usage](https://www.nativewind.dev/docs/tailwind/typography/list-style-image#usage)

------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/list-style-image)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/list-style-image#compatibility)

----------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| list-image-none | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Line Height\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/line-height)
[List Style Position\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/list-style-position)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/list-style-image#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/list-style-image#compatibility)

---

# List Style Type

Last updated on June 26, 2025

List Style Type
===============

[Usage](https://www.nativewind.dev/docs/tailwind/typography/list-style-type#usage)

-----------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/list-style-type)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/list-style-type#compatibility)

---------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| list-none | ✅ Full Support |
| list-disc | ✅ Full Support |
| list-decimal | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[List Style Position\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/list-style-position)
[Text Transform\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/text-align)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/list-style-type#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/list-style-type#compatibility)

---

# Text Decoration

Last updated on June 26, 2025

Text Decoration
===============

[Usage](https://www.nativewind.dev/docs/tailwind/typography/text-decoration#usage)

-----------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/text-decoration)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/text-decoration#compatibility)

---------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| underline | ✅ Full Support |
| line-through | ✅ Full Support |
| no-underline | ✅ Full Support |
| overline | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Text Color\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/text-color)
[Text Decoration Color\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/text-decoration-color)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/text-decoration#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/text-decoration#compatibility)

---

# Text Transform

Last updated on June 26, 2025

Text Transform
==============

[Usage](https://www.nativewind.dev/docs/tailwind/typography/text-align#usage)

------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/text-align)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/text-align#compatibility)

----------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| uppercase | ✅ Full Support |
| lowercase | ✅ Full Support |
| capitalize | ✅ Full Support |
| normal-case | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[List Style Type\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/list-style-type)
[Text Color\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/text-color)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/text-align#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/text-align#compatibility)

---

# Text Color

Last updated on June 26, 2025

Text Color
==========

[Usage](https://www.nativewind.dev/docs/tailwind/typography/text-color#usage)

------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/text-color)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/text-color#compatibility)

----------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| text-{n} | ✅ Full Support |
| text-[n] | ✅ Full Support |
| text-inherit | 🌐 Web only |
| text-current | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

textOpacity (native only)

For performance reasons, Nativewind renders with the `corePlugin` `textOpacity` disabled. This plugin allows text to dynamically change its opacity via the `--tw-text-opacity` variable. Instead, the opacity is set as a static value in the `color` property.

If you need to use this feature, you can enable it by adding the following to your `tailwind.config.js` file:

    module.exports = {
      /* ...  */
      corePlugin: {
        textOpacity: true,
      },
    };

[Text Transform\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/text-align)
[Text Decoration\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/text-decoration)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/text-color#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/text-color#compatibility)

---

# Letter Spacing

Last updated on June 26, 2025

Letter Spacing
==============

[Usage](https://www.nativewind.dev/docs/tailwind/typography/letter-spacing#usage)

----------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/letter-spacing)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/letter-spacing#compatibility)

--------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| tracking-tighter | ✅ Full Support |
| tracking-tight | ✅ Full Support |
| tracking-normal | ✅ Full Support |
| tracking-wide | ✅ Full Support |
| tracking-wider | ✅ Full Support |
| tracking-widest | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Hyphens\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/hyphens)
[Line Clamp\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/line-clamp)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/letter-spacing#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/letter-spacing#compatibility)

---

# Text Decoration Color

Last updated on June 26, 2025

Text Decoration Color
=====================

[Usage](https://www.nativewind.dev/docs/tailwind/typography/text-decoration-color#usage)

-----------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/text-decoration-color)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/text-decoration-color#compatibility)

---------------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| decoration-{n} | ✅ Full Support |
| decoration-[n] | ✅ Full Support |
| decoration-inherit | 🌐 Web only |
| decoration-current | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Text Decoration\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/text-decoration)
[Text Decoration Style\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/text-decoration-style)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/text-decoration-color#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/text-decoration-color#compatibility)

---

# Text Overflow

Last updated on June 26, 2025

Text Overflow
=============

[Usage](https://www.nativewind.dev/docs/tailwind/typography/text-overflow#usage)

---------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/text-overflow)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/text-overflow#compatibility)

-------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| truncate | 🌐 Web only |
| text-ellipsis | 🌐 Web only |
| text-clip | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Text Indent\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/text-indent)
[Text Align\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/text-transform)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/text-overflow#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/text-overflow#compatibility)

---

# Text Indent

Last updated on June 26, 2025

Text Indent
===========

[Usage](https://www.nativewind.dev/docs/tailwind/typography/text-indent#usage)

-------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/text-indent)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/text-indent#compatibility)

-----------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| indent-[n] | 🌐 Web only |
| indent-{n} | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Text Decoration Thickness\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/text-decoration-thickness)
[Text Overflow\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/text-overflow)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/text-indent#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/text-indent#compatibility)

---

# Text Decoration Style

Last updated on June 26, 2025

Text Decoration Style
=====================

[Usage](https://www.nativewind.dev/docs/tailwind/typography/text-decoration-style#usage)

-----------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/text-decoration-style)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/text-decoration-style#compatibility)

---------------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| decoration-solid | ✅ Full Support |
| decoration-double | ✅ Full Support |
| decoration-dotted | ✅ Full Support |
| decoration-dashed | ✅ Full Support |
| decoration-wavy | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Text Decoration Color\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/text-decoration-color)
[Text Decoration Thickness\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/text-decoration-thickness)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/text-decoration-style#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/text-decoration-style#compatibility)

---

# Text Decoration Thickness

Last updated on June 26, 2025

Text Decoration Thickness
=========================

[Usage](https://www.nativewind.dev/docs/tailwind/typography/text-decoration-thickness#usage)

---------------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/text-decoration-thickness)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/text-decoration-thickness#compatibility)

-------------------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| decoration-auto | 🌐 Web only |
| decoration-from-font | 🌐 Web only |
| decoration-0 | 🌐 Web only |
| decoration-1 | 🌐 Web only |
| decoration-2 | 🌐 Web only |
| decoration-4 | 🌐 Web only |
| decoration-8 | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Text Decoration Style\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/text-decoration-style)
[Text Indent\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/text-indent)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/text-decoration-thickness#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/text-decoration-thickness#compatibility)

---

# Whitespace

Last updated on June 26, 2025

Whitespace
==========

[Usage](https://www.nativewind.dev/docs/tailwind/typography/whitespace#usage)

------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/whitespace)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/whitespace#compatibility)

----------------------------------------------------------------------------------------------

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Vertical Align\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/vertical-align)
[Word Break\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/word-break)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/whitespace#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/whitespace#compatibility)

---

# Text Underline Offset

Last updated on June 26, 2025

Text Underline Offset
=====================

[Usage](https://www.nativewind.dev/docs/tailwind/typography/text-underline-offset#usage)

-----------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/text-underline-offset)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/text-underline-offset#compatibility)

---------------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| underline-offset-auto | 🌐 Web only |
| underline-offset-0 | 🌐 Web only |
| underline-offset-1 | 🌐 Web only |
| underline-offset-2 | 🌐 Web only |
| underline-offset-4 | 🌐 Web only |
| underline-offset-8 | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Text Align\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/text-transform)
[Vertical Align\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/vertical-align)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/text-underline-offset#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/text-underline-offset#compatibility)

---

# Text Align

Last updated on June 26, 2025

Text Align
==========

[Usage](https://www.nativewind.dev/docs/tailwind/typography/text-transform#usage)

----------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/text-transform)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/text-transform#compatibility)

--------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| text-left | ✅ Full Support |
| text-center | ✅ Full Support |
| text-right | ✅ Full Support |
| text-justify | ✅ Full Support |
| text-start | ✅ Full Support |
| text-end | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Text Overflow\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/text-overflow)
[Text Underline Offset\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/text-underline-offset)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/text-transform#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/text-transform#compatibility)

---

# Vertical Align

Last updated on June 26, 2025

Vertical Align
==============

[Usage](https://www.nativewind.dev/docs/tailwind/typography/vertical-align#usage)

----------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/vertical-align)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/vertical-align#compatibility)

--------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| align-baseline | 🌐 Web only |
| align-top | 🌐 Web only |
| align-middle | 🌐 Web only |
| align-bottom | 🌐 Web only |
| align-text-top | 🌐 Web only |
| align-text-bottom | 🌐 Web only |
| align-sub | 🌐 Web only |
| align-super | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Text Underline Offset\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/text-underline-offset)
[Whitespace\
\
Next Page](https://www.nativewind.dev/docs/tailwind/typography/whitespace)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/vertical-align#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/vertical-align#compatibility)

---

# Background Attachment

Last updated on June 26, 2025

Background Attachment
=====================

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Word Break\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/word-break)
[Background Clip\
\
Next Page](https://www.nativewind.dev/docs/tailwind/backgrounds/background-clip)

---

# Word Break

Last updated on June 26, 2025

Word Break
==========

[Usage](https://www.nativewind.dev/docs/tailwind/typography/word-break#usage)

------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/word-break)

[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/word-break#compatibility)

----------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| break-normal | 🌐 Web only |
| word-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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Whitespace\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/typography/whitespace)
[Background Attachment\
\
Next Page](https://www.nativewind.dev/docs/tailwind/backgrounds/background-attachment)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/typography/word-break#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/typography/word-break#compatibility)

---

# Background Clip

Last updated on June 26, 2025

Background Clip
===============

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Background Attachment\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/backgrounds/background-attachment)
[Background Color\
\
Next Page](https://www.nativewind.dev/docs/tailwind/backgrounds/background-color)

---

# Background Color

Last updated on June 26, 2025

Background Color
================

| Class | Support |
| --- | --- |
| bg-{n} | ✅ Full Support |
| bg-[n] | ✅ Full Support |
| bg-inherit | 🌐 Web only |
| bg-current | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

backgroundOpacity (native only)

For performance reasons, Nativewind renders with the `corePlugin` `backgroundOpacity` disabled. This plugin allows text to dynamically change its opacity via the `--tw-background-opacity` variable. Instead, the opacity is set as a static value in the `color` property.

If you need to use this feature, you can enable it by adding the following to your `tailwind.config.js` file:

    module.exports = {
      /* ...  */
      corePlugins: {
        backgroundOpacity: true,
      },
    };

[Background Clip\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/backgrounds/background-clip)
[Background Image\
\
Next Page](https://www.nativewind.dev/docs/tailwind/backgrounds/background-image)

---

# Background Origin

Last updated on June 26, 2025

Background Origin
=================

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Background Image\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/backgrounds/background-image)
[Background Position\
\
Next Page](https://www.nativewind.dev/docs/tailwind/backgrounds/background-position)

---

# Background Image

Last updated on June 26, 2025

Background Image
================

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Background Color\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/backgrounds/background-color)
[Background Origin\
\
Next Page](https://www.nativewind.dev/docs/tailwind/backgrounds/background-origin)

---

# Background Position

Last updated on June 26, 2025

Background Position
===================

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Background Origin\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/backgrounds/background-origin)
[Background Repeat\
\
Next Page](https://www.nativewind.dev/docs/tailwind/backgrounds/background-repeat)

---

# Background Repeat

Last updated on June 26, 2025

Background Repeat
=================

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Background Position\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/backgrounds/background-position)
[Background Size\
\
Next Page](https://www.nativewind.dev/docs/tailwind/backgrounds/background-size)

---

# Background Size

Last updated on June 26, 2025

Background Size
===============

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Background Repeat\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/backgrounds/background-repeat)
[Gradient Color Stops\
\
Next Page](https://www.nativewind.dev/docs/tailwind/backgrounds/gradient-color-stops)

---

# Gradient Color Stops

Last updated on June 26, 2025

Gradient Color Stops
====================

| Class | Support |
| --- | --- |
| from-inherit | 🌐 Web only |
| from-current | 🌐 Web only |
| from-transparent | 🌐 Web only |
| from-black | 🌐 Web only |
| from-white | 🌐 Web only |
| from-{n} | 🌐 Web only |
| from-[n] | 🌐 Web only |
| via-inherit | 🌐 Web only |
| via-current | 🌐 Web only |
| via-transparent | 🌐 Web only |
| via-black | 🌐 Web only |
| via-white | 🌐 Web only |
| via-{n} | 🌐 Web only |
| via-[n] | 🌐 Web only |
| to-inherit | 🌐 Web only |
| to-current | 🌐 Web only |
| to-transparent | 🌐 Web only |
| to-black | 🌐 Web only |
| to-white | 🌐 Web only |
| to-{n} | 🌐 Web only |
| to-[n] | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Background Size\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/backgrounds/background-size)
[Border Color\
\
Next Page](https://www.nativewind.dev/docs/tailwind/borders/border-color)

---

# Border Color

Last updated on June 26, 2025

Border Color
============

[Usage](https://www.nativewind.dev/docs/tailwind/borders/border-color#usage)

-----------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/border-color)

[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/border-color#compatibility)

---------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| border-{n} | ✅ Full Support |
| border-[n] | ✅ Full Support |
| border-inherit | 🌐 Web only |
| border-current | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

borderOpacity (native only)

For performance reasons, Nativewind renders with the `corePlugin` `borderOpacity` disabled. This plugin allows the border color to dynamically change its opacity via the `--tw-border-opacity` variable. Instead, the opacity is set as a static value in the `color` property.

If you need to use this feature, you can enable it by adding the following to your `tailwind.config.js` file:

    module.exports = {
      /* ...  */
      corePlugin: {
        borderOpacity: true,
      },
    };

[Gradient Color Stops\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/backgrounds/gradient-color-stops)
[Border Radius\
\
Next Page](https://www.nativewind.dev/docs/tailwind/borders/border-radius)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/borders/border-color#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/border-color#compatibility)

---

# Divide Style

Last updated on June 26, 2025

Divide Style
============

[Usage](https://www.nativewind.dev/docs/tailwind/borders/divide-style#usage)

-----------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/divide-style)

CAUTION

`Divide Style` was temporary removed in `v4`. We are working to re-add it in the future.

[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/divide-style#compatibility)

---------------------------------------------------------------------------------------------

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

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Divide Color\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/borders/divide-color)
[Divide Width\
\
Next Page](https://www.nativewind.dev/docs/tailwind/borders/divide-width)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/borders/divide-style#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/divide-style#compatibility)

---

# Border Width

Last updated on June 26, 2025

Border Width
============

[Usage](https://www.nativewind.dev/docs/tailwind/borders/border-width#usage)

-----------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/border-width)

[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/border-width#compatibility)

---------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| border | ✅ Full Support |
| border-{n} | ✅ Full Support |
| border-[n] | ✅ Full Support |
| border-x | ✅ Full Support |
| border-x-{n} | ✅ Full Support |
| border-x-[n] | ✅ Full Support |
| border-y | ✅ Full Support |
| border-y-{n} | ✅ Full Support |
| border-y-[n] | ✅ Full Support |
| border-t | ✅ Full Support |
| border-t-{n} | ✅ Full Support |
| border-t-[n] | ✅ Full Support |
| border-r | ✅ Full Support |
| border-r-{n} | ✅ Full Support |
| border-r-[n] | ✅ Full Support |
| border-b | ✅ Full Support |
| border-b-{n} | ✅ Full Support |
| border-b-[n] | ✅ Full Support |
| border-l | ✅ Full Support |
| border-l-{n} | ✅ Full Support |
| border-l-[n] | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Border Style\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/borders/border-style)
[Divide Color\
\
Next Page](https://www.nativewind.dev/docs/tailwind/borders/divide-color)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/borders/border-width#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/border-width#compatibility)

---

# Border Style

Last updated on June 26, 2025

Border Style
============

[Usage](https://www.nativewind.dev/docs/tailwind/borders/border-style#usage)

-----------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/border-style)

[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/border-style#compatibility)

---------------------------------------------------------------------------------------------

Use `border-0` instead of `border-none` to remove borders on native.

| Class | Support |
| --- | --- |
| border-solid | ✅ Full Support |
| border-dashed | ✅ Full Support |
| border-dotted | ✅ Full Support |
| border-none | 🌐 Web only |
| border-double | 🌐 Web only |
| border-hidden | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Border Radius\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/borders/border-radius)
[Border Width\
\
Next Page](https://www.nativewind.dev/docs/tailwind/borders/border-width)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/borders/border-style#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/border-style#compatibility)

---

# Border Radius

Last updated on June 26, 2025

Border Radius
=============

[Usage](https://www.nativewind.dev/docs/tailwind/borders/border-radius#usage)

------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/border-radius)

[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/border-radius#compatibility)

----------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| rounded-none | ✅ Full Support |
| rounded | ✅ Full Support |
| rounded-{n} | ✅ Full Support |
| rounded-[n] | ✅ Full Support |
| rounded-full | ✅ Full Support |
| rounded-t-none | ✅ Full Support |
| rounded-t-{n} | ✅ Full Support |
| rounded-t-[n] | ✅ Full Support |
| rounded-t-full | ✅ Full Support |
| rounded-r-none | ✅ Full Support |
| rounded-r-{n} | ✅ Full Support |
| rounded-r-[n] | ✅ Full Support |
| rounded-r-full | ✅ Full Support |
| rounded-b-none | ✅ Full Support |
| rounded-b-{n} | ✅ Full Support |
| rounded-b-[n] | ✅ Full Support |
| rounded-b-full | ✅ Full Support |
| rounded-l-none | ✅ Full Support |
| rounded-l-{n} | ✅ Full Support |
| rounded-l-[n] | ✅ Full Support |
| rounded-l-full | ✅ Full Support |
| rounded-tl-none | ✅ Full Support |
| rounded-tl-{n} | ✅ Full Support |
| rounded-tl-[n] | ✅ Full Support |
| rounded-tl-full | ✅ Full Support |
| rounded-tr-none | ✅ Full Support |
| rounded-tr-{n} | ✅ Full Support |
| rounded-tr-[n] | ✅ Full Support |
| rounded-tr-full | ✅ Full Support |
| rounded-br-none | ✅ Full Support |
| rounded-br-{n} | ✅ Full Support |
| rounded-br-[n] | ✅ Full Support |
| rounded-br-full | ✅ Full Support |
| rounded-bl-none | ✅ Full Support |
| rounded-bl-{n} | ✅ Full Support |
| rounded-bl-[n] | ✅ Full Support |
| rounded-bl-full | ✅ Full Support |
| border-inherit | 🌐 Web only |
| border-current | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Border Color\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/borders/border-color)
[Border Style\
\
Next Page](https://www.nativewind.dev/docs/tailwind/borders/border-style)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/borders/border-radius#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/border-radius#compatibility)

---

# Outline Color

Last updated on June 26, 2025

Outline Color
=============

[Usage](https://www.nativewind.dev/docs/tailwind/borders/outline-color#usage)

------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/outline-color)

[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/outline-color#compatibility)

----------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| outline-inherit | 🌐 Web only |
| outline-current | 🌐 Web only |
| outline-transparent | 🌐 Web only |
| outline-black | 🌐 Web only |
| outline-white | 🌐 Web only |
| outline-{n} | 🌐 Web only |
| outline-[n] | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Divide Width\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/borders/divide-width)
[Outline Offset\
\
Next Page](https://www.nativewind.dev/docs/tailwind/borders/outline-offset)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/borders/outline-color#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/outline-color#compatibility)

---

# Divide Color

Last updated on June 26, 2025

Divide Color
============

[Usage](https://www.nativewind.dev/docs/tailwind/borders/divide-color#usage)

-----------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/divide-color)

CAUTION

`Divide Color` was temporary removed in `v4`. We are working to re-add it in the future.

[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/divide-color#compatibility)

---------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| divide-{n} | 🌐 Web only |
| divide-[n] | 🌐 Web only |
| divide-inherit | 🌐 Web only |
| divide-current | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

divideOpacity (native only)

For performance reasons, Nativewind renders with the `corePlugin` `divideOpacity` disabled. This plugin allows the divide color to dynamically change its opacity via the `--tw-divide-opacity` variable. Instead, the opacity is set as a static value in the `color` property.

If you need to use this feature, you can enable it by adding the following to your `tailwind.config.js` file:

    module.exports = {
      /* ...  */
      corePlugin: {
        divideOpacity: true,
      },
    };

[Border Width\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/borders/border-width)
[Divide Style\
\
Next Page](https://www.nativewind.dev/docs/tailwind/borders/divide-style)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/borders/divide-color#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/divide-color#compatibility)

---

# Outline Offset

Last updated on June 26, 2025

Outline Offset
==============

[Usage](https://www.nativewind.dev/docs/tailwind/borders/outline-offset#usage)

-------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/outline-offset)

[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/outline-offset#compatibility)

-----------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| outline-offset-0 | 🌐 Web only |
| outline-offset-1 | 🌐 Web only |
| outline-offset-2 | 🌐 Web only |
| outline-offset-4 | 🌐 Web only |
| outline-offset-8 | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Outline Color\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/borders/outline-color)
[Outline Style\
\
Next Page](https://www.nativewind.dev/docs/tailwind/borders/outline-style)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/borders/outline-offset#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/outline-offset#compatibility)

---

# Divide Width

Last updated on June 26, 2025

Divide Width
============

[Usage](https://www.nativewind.dev/docs/tailwind/borders/divide-width#usage)

-----------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/divide-width)

CAUTION

`Divide Width` was temporary removed in `v4`. We are working to re-add it in the future.

[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/divide-width#compatibility)

---------------------------------------------------------------------------------------------

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

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Divide Style\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/borders/divide-style)
[Outline Color\
\
Next Page](https://www.nativewind.dev/docs/tailwind/borders/outline-color)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/borders/divide-width#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/divide-width#compatibility)

---

# Outline Width

Last updated on June 26, 2025

Outline Width
=============

[Usage](https://www.nativewind.dev/docs/tailwind/borders/outline-width#usage)

------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/outline-width)

[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/outline-width#compatibility)

----------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| outline-0 | 🌐 Web only |
| outline-1 | 🌐 Web only |
| outline-2 | 🌐 Web only |
| outline-4 | 🌐 Web only |
| outline-8 | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Outline Style\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/borders/outline-style)
[Ring Color\
\
Next Page](https://www.nativewind.dev/docs/tailwind/borders/ring-color)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/borders/outline-width#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/outline-width#compatibility)

---

# Ring Offset Width

Last updated on June 26, 2025

Ring Offset Width
=================

[Usage](https://www.nativewind.dev/docs/tailwind/borders/ring-offset-width#usage)

----------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/ring-offset-width)

[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/ring-offset-width#compatibility)

--------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| ring-offset-0 | 🌐 Web only |
| ring-offset-1 | 🌐 Web only |
| ring-offset-2 | 🌐 Web only |
| ring-offset-4 | 🌐 Web only |
| ring-offset-8 | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Ring Offset Color\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/borders/ring-offset-color)
[Ring Width\
\
Next Page](https://www.nativewind.dev/docs/tailwind/borders/ring-width)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/borders/ring-offset-width#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/ring-offset-width#compatibility)

---

# Ring Color

Last updated on June 26, 2025

Ring Color
==========

[Usage](https://www.nativewind.dev/docs/tailwind/borders/ring-color#usage)

---------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/ring-color)

[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/ring-color#compatibility)

-------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| ring-inherit | 🌐 Web only |
| ring-current | 🌐 Web only |
| ring-transparent | 🌐 Web only |
| ring-black | 🌐 Web only |
| ring-white | 🌐 Web only |
| ring-{n} | 🌐 Web only |
| ring-[n] | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Outline Width\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/borders/outline-width)
[Ring Offset Color\
\
Next Page](https://www.nativewind.dev/docs/tailwind/borders/ring-offset-color)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/borders/ring-color#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/ring-color#compatibility)

---

# Ring Offset Color

Last updated on June 26, 2025

Ring Offset Color
=================

[Usage](https://www.nativewind.dev/docs/tailwind/borders/ring-offset-color#usage)

----------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/ring-offset-color)

[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/ring-offset-color#compatibility)

--------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| ring-offset-0 | 🌐 Web only |
| ring-offset-1 | 🌐 Web only |
| ring-offset-2 | 🌐 Web only |
| ring-offset-4 | 🌐 Web only |
| ring-offset-8 | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Ring Color\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/borders/ring-color)
[Ring Offset Width\
\
Next Page](https://www.nativewind.dev/docs/tailwind/borders/ring-offset-width)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/borders/ring-offset-color#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/ring-offset-color#compatibility)

---

# Outline Style

Last updated on June 26, 2025

Outline Style
=============

[Usage](https://www.nativewind.dev/docs/tailwind/borders/outline-style#usage)

------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/outline-style)

[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/outline-style#compatibility)

----------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| outline-none | 🌐 Web only |
| outline | 🌐 Web only |
| outline-dashed | 🌐 Web only |
| outline-dotted | 🌐 Web only |
| outline-double | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Outline Offset\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/borders/outline-offset)
[Outline Width\
\
Next Page](https://www.nativewind.dev/docs/tailwind/borders/outline-width)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/borders/outline-style#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/outline-style#compatibility)

---

# Box Shadow Color

Last updated on June 26, 2025

Box Shadow Color
================

[Usage](https://www.nativewind.dev/docs/tailwind/effects/box-shadow-color#usage)

---------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/box-shadow-color)

[Compatibility](https://www.nativewind.dev/docs/tailwind/effects/box-shadow-color#compatibility)

-------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| shadow-{n} | ✅ Full Support |
| shadow-[n] | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Box Shadow\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/effects/box-shadow)
[Mix Blend Mode\
\
Next Page](https://www.nativewind.dev/docs/tailwind/effects/mix-blend-mode)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/effects/box-shadow-color#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/effects/box-shadow-color#compatibility)

---

# Background Blend Mode

Last updated on June 26, 2025

Background Blend Mode
=====================

[Usage](https://www.nativewind.dev/docs/tailwind/effects/background-blend-mode#usage)

--------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/background-blend-mode)

[Compatibility](https://www.nativewind.dev/docs/tailwind/effects/background-blend-mode#compatibility)

------------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| bg-blend-normal | ✅ Full Support |
| bg-blend-multiply | ✅ Full Support |
| bg-blend-screen | ✅ Full Support |
| bg-blend-overlay | ✅ Full Support |
| bg-blend-darken | ✅ Full Support |
| bg-blend-lighten | ✅ Full Support |
| bg-blend-color-dodge | ✅ Full Support |
| bg-blend-color-burn | ✅ Full Support |
| bg-blend-hard-light | ✅ Full Support |
| bg-blend-soft-light | ✅ Full Support |
| bg-blend-difference | ✅ Full Support |
| bg-blend-exclusion | ✅ Full Support |
| bg-blend-hue | ✅ Full Support |
| bg-blend-saturation | ✅ Full Support |
| bg-blend-color | ✅ Full Support |
| bg-blend-luminosity | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Ring Width\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/borders/ring-width)
[Box Shadow\
\
Next Page](https://www.nativewind.dev/docs/tailwind/effects/box-shadow)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/effects/background-blend-mode#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/effects/background-blend-mode#compatibility)

---

# Ring Width

Last updated on June 26, 2025

Ring Width
==========

[Usage](https://www.nativewind.dev/docs/tailwind/borders/ring-width#usage)

---------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/ring-width)

[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/ring-width#compatibility)

-------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| ring-0 | 🌐 Web only |
| ring-1 | 🌐 Web only |
| ring-2 | 🌐 Web only |
| ring | 🌐 Web only |
| ring-4 | 🌐 Web only |
| ring-8 | 🌐 Web only |
| ring-inset | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Ring Offset Width\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/borders/ring-offset-width)
[Background Blend Mode\
\
Next Page](https://www.nativewind.dev/docs/tailwind/effects/background-blend-mode)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/borders/ring-width#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/borders/ring-width#compatibility)

---

# Mix Blend Mode

Last updated on June 26, 2025

Mix Blend Mode
==============

[Usage](https://www.nativewind.dev/docs/tailwind/effects/mix-blend-mode#usage)

-------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/mix-blend-mode)

[Compatibility](https://www.nativewind.dev/docs/tailwind/effects/mix-blend-mode#compatibility)

-----------------------------------------------------------------------------------------------

| 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-lighter | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Box Shadow Color\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/effects/box-shadow-color)
[Opacity\
\
Next Page](https://www.nativewind.dev/docs/tailwind/effects/opacity)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/effects/mix-blend-mode#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/effects/mix-blend-mode#compatibility)

---

# Transition Delay

Last updated on June 26, 2025

Transition Delay
================

[Usage](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-delay#usage)

-----------------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/transition-delay)

CAUTION

Animation support is experimental! We are waiting for your feedback to improve implementation.

[Compatibility](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-delay#compatibility)

---------------------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| delay-{n} | 🧪 Experimental Support |
| delay-[n] | 🧪 Experimental Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Animation\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/transitions-animation/animation)
[Transition Duration\
\
Next Page](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-duration)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-delay#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-delay#compatibility)

---

# Box Shadow

Last updated on June 26, 2025

Box Shadow
==========

Nativewind uses the scaling system from [react-native-shadow-generator](https://ethercreative.github.io/react-native-shadow-generator/)
 to help generate cross platform shadows.

[Usage](https://www.nativewind.dev/docs/tailwind/effects/box-shadow#usage)

---------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/box-shadow)

CAUTION

On native, shadows may not appear if a background color is not set

[Example](https://www.nativewind.dev/docs/tailwind/effects/box-shadow#example)

-------------------------------------------------------------------------------

    import { Text, View } from 'react-native';
    import { styled } from 'nativewind';
     
    const StyledView = styled(View)
    const StyledText = styled(Text)
     
    const App = () => {
      return (
        <StyledView className="flex-1 items-center justify-center">
          <StyledView className="h-[50vh] items-center justify-center shadow">
            <StyledText className="text-slate-800 shadow">Try editing me! 🎉</StyledText>
          </StyledView>
        </StyledView>
      );
    }

[Compatibility](https://www.nativewind.dev/docs/tailwind/effects/box-shadow#compatibility)

-------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| shadow | ✅ Full Support |
| shadow-{n} | ✅ Full Support |
| shadow-none | ✅ Full Support |
| shadow-[n] | 🌐 Web only |
| shadow-inner | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Background Blend Mode\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/effects/background-blend-mode)
[Box Shadow Color\
\
Next Page](https://www.nativewind.dev/docs/tailwind/effects/box-shadow-color)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/effects/box-shadow#usage)
[Example](https://www.nativewind.dev/docs/tailwind/effects/box-shadow#example)
[Compatibility](https://www.nativewind.dev/docs/tailwind/effects/box-shadow#compatibility)

---

# Transition Duration

Last updated on June 26, 2025

Transition Duration
===================

[Usage](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-duration#usage)

--------------------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/transition-duration)

CAUTION

Animation support is experimental! We are waiting for your feedback to improve implementation.

[Compatibility](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-duration#compatibility)

------------------------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| duration-{n} | 🧪 Experimental Support |
| duration-[n] | 🧪 Experimental Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Transition Delay\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-delay)
[Transition Property\
\
Next Page](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-property)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-duration#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-duration#compatibility)

---

# Transition Property

Last updated on June 26, 2025

Transition Property
===================

[Usage](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-property#usage)

--------------------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/transition-property)

CAUTION

Animation support is experimental! We are waiting for your feedback to improve implementation.

[Compatibility](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-property#compatibility)

------------------------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| transition | 🧪 Experimental Support |
| transition-all | 🧪 Experimental Support |
| transition-colors | 🧪 Experimental Support |
| transition-opacity | 🧪 Experimental Support |
| transition-transform | 🧪 Experimental Support |
| transition-{n} | 🧪 Experimental Support |
| transition-[n] | 🧪 Experimental Support |
| transition-shadow | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Transition Duration\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-duration)
[Transition Timing Function\
\
Next Page](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-timing-function)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-property#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-property#compatibility)

---

# Transition Timing Function

Last updated on June 26, 2025

Transition Timing Function
==========================

[Usage](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-timing-function#usage)

---------------------------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/transition-timing-function)

CAUTION

Animation support is experimental! We are waiting for your feedback to improve implementation.

[Compatibility](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-timing-function#compatibility)

-------------------------------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| ease-{n} | 🧪 Experimental Support |
| ease-[n] | 🧪 Experimental Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Transition Property\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-property)
[Rotate\
\
Next Page](https://www.nativewind.dev/docs/tailwind/transforms/rotate)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-timing-function#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-timing-function#compatibility)

---

# Opacity

Last updated on June 26, 2025

Opacity
=======

[Usage](https://www.nativewind.dev/docs/tailwind/effects/opacity#usage)

------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/opacity)

[Compatibility](https://www.nativewind.dev/docs/tailwind/effects/opacity#compatibility)

----------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| opacity-{n} | ✅ Full Support |
| opacity-[n] | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Mix Blend Mode\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/effects/mix-blend-mode)
[Animation\
\
Next Page](https://www.nativewind.dev/docs/tailwind/transitions-animation/animation)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/effects/opacity#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/effects/opacity#compatibility)

---

# Scale

Last updated on June 26, 2025

Scale
=====

[Usage](https://www.nativewind.dev/docs/tailwind/transforms/scale#usage)

-------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/scale)

[Compatibility](https://www.nativewind.dev/docs/tailwind/transforms/scale#compatibility)

-----------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| scale-{n} | ✅ Full Support |
| scale-[n] | ✅ Full Support |
| scale-x-{n} | ✅ Full Support |
| scale-x-[n] | ✅ Full Support |
| scale-y-{n} | ✅ Full Support |
| scale-y-[n] | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Rotate\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/transforms/rotate)
[Skew\
\
Next Page](https://www.nativewind.dev/docs/tailwind/transforms/skew)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/transforms/scale#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/transforms/scale#compatibility)

---

# Skew

Last updated on June 26, 2025

Skew
====

[Usage](https://www.nativewind.dev/docs/tailwind/transforms/skew#usage)

------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/skew)

[Compatibility](https://www.nativewind.dev/docs/tailwind/transforms/skew#compatibility)

----------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| skew-x-{n} | ✅ Full Support |
| skew-x-[n] | ✅ Full Support |
| skew-y-{n} | ✅ Full Support |
| skew-y-[n] | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Scale\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/transforms/scale)
[Transform Origin\
\
Next Page](https://www.nativewind.dev/docs/tailwind/transforms/transform-origin)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/transforms/skew#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/transforms/skew#compatibility)

---

# Rotate

Last updated on June 26, 2025

Rotate
======

[Usage](https://www.nativewind.dev/docs/tailwind/transforms/rotate#usage)

--------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/rotate)

[Compatibility](https://www.nativewind.dev/docs/tailwind/transforms/rotate#compatibility)

------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| rotate-{n} | ✅ Full Support |
| rotate-[n] | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

Always include the `deg` unit when using arbitrary styles or setting `rotate` values in your theme. e.g. `rotate-[90deg]`.

React Native only supports `deg` as a unit for rotation.

[Transition Timing Function\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-timing-function)
[Scale\
\
Next Page](https://www.nativewind.dev/docs/tailwind/transforms/scale)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/transforms/rotate#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/transforms/rotate#compatibility)

---

# Translate

Last updated on June 26, 2025

Translate
=========

[Usage](https://www.nativewind.dev/docs/tailwind/transforms/translate#usage)

-----------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/translate)

[Compatibility](https://www.nativewind.dev/docs/tailwind/transforms/translate#compatibility)

---------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| translate-x-{n} | ✅ Full Support |
| translate-x-[n] | ✅ Full Support |
| translate-y-{n} | ✅ Full Support |
| translate-y-[n] | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Transform Origin\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/transforms/transform-origin)
[Accent Color\
\
Next Page](https://www.nativewind.dev/docs/tailwind/interactivity/accent-color)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/transforms/translate#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/transforms/translate#compatibility)

---

# Caret Color

Last updated on June 26, 2025

Caret Color
===========

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/caret-color#usage)

----------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/caret-color)

[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/caret-color#compatibility)

--------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| caret-{n} | ✅ Full Support |
| caret-[n] | ✅ Full Support |
| caret-black | ✅ Full Support |
| caret-white | ✅ Full Support |
| caret-transparent | ✅ Full Support |
| caret-inherit | 🌐 Web only |
| caret-current | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Contributors](https://www.nativewind.dev/docs/tailwind/interactivity/caret-color#contributors)

------------------------------------------------------------------------------------------------

We are looking for contributors for the following:

### [Add `pointer-events-none`](https://www.nativewind.dev/docs/tailwind/interactivity/caret-color#add-pointer-events-none)

`caretColor` should map to [`cursorColor`](https://reactnative.dev/docs/textinput#cursorcolor-android)

[Appearance\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/interactivity/appearance)
[Cursor\
\
Next Page](https://www.nativewind.dev/docs/tailwind/interactivity/cursor)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/caret-color#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/caret-color#compatibility)
[Contributors](https://www.nativewind.dev/docs/tailwind/interactivity/caret-color#contributors)
[Add `pointer-events-none`](https://www.nativewind.dev/docs/tailwind/interactivity/caret-color#add-pointer-events-none)

---

# Appearance

Last updated on June 26, 2025

Appearance
==========

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/appearance#usage)

---------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/appearance)

[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/appearance#compatibility)

-------------------------------------------------------------------------------------------------

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

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Accent Color\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/interactivity/accent-color)
[Caret Color\
\
Next Page](https://www.nativewind.dev/docs/tailwind/interactivity/caret-color)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/appearance#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/appearance#compatibility)

---

# Animation

Last updated on July 16, 2025

Animation
=========

[Usage](https://www.nativewind.dev/docs/tailwind/transitions-animation/animation#usage)

----------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/animation)

CAUTION

Animation support is experimental! We are waiting for your feedback to improve implementation.

[Compatibility](https://www.nativewind.dev/docs/tailwind/transitions-animation/animation#compatibility)

--------------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| animate-none | 🧪 Experimental Support |
| animate-spin | 🧪 Experimental Support |
| animate-ping | 🧪 Experimental Support |
| animate-pulse | 🧪 Experimental Support |
| animate-bounce | 🧪 Experimental Support |
| animate-[n] | 🧪 Experimental Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Contributors](https://www.nativewind.dev/docs/tailwind/transitions-animation/animation#contributors)

------------------------------------------------------------------------------------------------------

Nativewind's animation is still experimental and very basic. We are looking for contributors to help with

*   Animated all mapped props (currently only works with `style`)
*   Improve performance
*   Update code to support new Reanimated v3 features (currently written in v2 style)

[Opacity\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/effects/opacity)
[Transition Delay\
\
Next Page](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-delay)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/transitions-animation/animation#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/transitions-animation/animation#compatibility)
[Contributors](https://www.nativewind.dev/docs/tailwind/transitions-animation/animation#contributors)

---

# Cursor

Last updated on June 26, 2025

Cursor
======

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/cursor#usage)

-----------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/cursor)

[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/cursor#compatibility)

---------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| cursor-{n} | 🌐 Web only |
| cursor-[n] | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Caret Color\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/interactivity/caret-color)
[Pointer Events\
\
Next Page](https://www.nativewind.dev/docs/tailwind/interactivity/pointer-events)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/cursor#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/cursor#compatibility)

---

# Accent Color

Last updated on June 26, 2025

Accent Color
============

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/accent-color#usage)

-----------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/accent-color)

[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/accent-color#compatibility)

---------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| accent-{n} | 🌐 Web only |
| accent-[n] | 🌐 Web only |
| accent-black | 🌐 Web only |
| accent-white | 🌐 Web only |
| accent-transparent | 🌐 Web only |
| accent-inherit | 🌐 Web only |
| accent-current | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Contributors](https://www.nativewind.dev/docs/tailwind/interactivity/accent-color#contributors)

-------------------------------------------------------------------------------------------------

We are looking for contributors for the following:

### [Add `accent-{value}`](https://www.nativewind.dev/docs/tailwind/interactivity/accent-color#add-accent-value)

React Native doesn't have a value for `accent`, however many 3rd party libraries do.

A solution maybe allowing `accent` to compile, but is stripped if not used as part of a `nativeStyleProps` mapping.

[Translate\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/transforms/translate)
[Appearance\
\
Next Page](https://www.nativewind.dev/docs/tailwind/interactivity/appearance)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/accent-color#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/accent-color#compatibility)
[Contributors](https://www.nativewind.dev/docs/tailwind/interactivity/accent-color#contributors)
[Add `accent-{value}`](https://www.nativewind.dev/docs/tailwind/interactivity/accent-color#add-accent-value)

---

# Transform Origin

Last updated on June 26, 2025

Transform Origin
================

[Usage](https://www.nativewind.dev/docs/tailwind/transforms/transform-origin#usage)

------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/transform-origin)

[Compatibility](https://www.nativewind.dev/docs/tailwind/transforms/transform-origin#compatibility)

----------------------------------------------------------------------------------------------------

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

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Contributors](https://www.nativewind.dev/docs/tailwind/transforms/transform-origin#contributors)

--------------------------------------------------------------------------------------------------

We are looking for contributors for the following:

### [feat: transform-origin](https://www.nativewind.dev/docs/tailwind/transforms/transform-origin#feat-transform-origin)

Please support this [React Native Pull Request](https://github.com/facebook/react-native/pull/37606)

### [originX / originY](https://www.nativewind.dev/docs/tailwind/transforms/transform-origin#originx--originy)

`react-native-reanimated` supports `originX`/`originY`. We could support these properties until React Native gets proper support.

[Skew\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/transforms/skew)
[Translate\
\
Next Page](https://www.nativewind.dev/docs/tailwind/transforms/translate)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/transforms/transform-origin#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/transforms/transform-origin#compatibility)
[Contributors](https://www.nativewind.dev/docs/tailwind/transforms/transform-origin#contributors)
[feat: transform-origin](https://www.nativewind.dev/docs/tailwind/transforms/transform-origin#feat-transform-origin)
[originX / originY](https://www.nativewind.dev/docs/tailwind/transforms/transform-origin#originx--originy)

---

# Scroll Margin

Last updated on June 26, 2025

Scroll Margin
=============

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-margin#usage)

------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/scroll-margin)

[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-margin#compatibility)

----------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| scroll-m-{n} | 🌐 Web only |
| scroll-m-[n] | 🌐 Web only |
| scroll-mx-{n} | 🌐 Web only |
| scroll-mx-[n] | 🌐 Web only |
| scroll-my-{n} | 🌐 Web only |
| scroll-my-[n] | 🌐 Web only |
| scroll-mt-{n} | 🌐 Web only |
| scroll-mt-[n] | 🌐 Web only |
| scroll-mr-{n} | 🌐 Web only |
| scroll-mr-[n] | 🌐 Web only |
| scroll-mb-{n} | 🌐 Web only |
| scroll-mb-[n] | 🌐 Web only |
| scroll-ml-{n} | 🌐 Web only |
| scroll-ml-[n] | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Scroll Behavior\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-behaviour)
[Scroll Padding\
\
Next Page](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-padding)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-margin#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-margin#compatibility)

---

# Pointer Events

Last updated on June 26, 2025

Pointer Events
==============

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/pointer-events#usage)

-------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/pointer-events)

[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/pointer-events#compatibility)

-----------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| pointer-events-none | ✅ Full Support |
| pointer-events-auto | ✅ Full Support |
| pointer-events-box-none | 📱 Native only |
| pointer-events-box-only | 📱 Native only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Cursor\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/interactivity/cursor)
[Resize\
\
Next Page](https://www.nativewind.dev/docs/tailwind/interactivity/resize)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/pointer-events#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/pointer-events#compatibility)

---

# Scroll Padding

Last updated on June 26, 2025

Scroll Padding
==============

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-padding#usage)

-------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/scroll-padding)

[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-padding#compatibility)

-----------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| scroll-p-{n} | 🌐 Web only |
| scroll-p-[n] | 🌐 Web only |
| scroll-px-{n} | 🌐 Web only |
| scroll-px-[n] | 🌐 Web only |
| scroll-py-{n} | 🌐 Web only |
| scroll-py-[n] | 🌐 Web only |
| scroll-pt-{n} | 🌐 Web only |
| scroll-pt-[n] | 🌐 Web only |
| scroll-pr-{n} | 🌐 Web only |
| scroll-pr-[n] | 🌐 Web only |
| scroll-pb-{n} | 🌐 Web only |
| scroll-pb-[n] | 🌐 Web only |
| scroll-pl-{n} | 🌐 Web only |
| scroll-pl-[n] | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Scroll Margin\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-margin)
[Scroll Snap Align\
\
Next Page](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-align)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-padding#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-padding#compatibility)

---

# Scroll Behavior

Last updated on June 26, 2025

Scroll Behavior
===============

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-behaviour#usage)

---------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/scroll-behaviour)

[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-behaviour#compatibility)

-------------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| scroll-auto | 🌐 Web only |
| scroll-smooth | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Resize\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/interactivity/resize)
[Scroll Margin\
\
Next Page](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-margin)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-behaviour#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-behaviour#compatibility)

---

# Scroll Snap Type

Last updated on June 26, 2025

Scroll Snap Type
================

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-type#usage)

---------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/scroll-snap-type)

[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-type#compatibility)

-------------------------------------------------------------------------------------------------------

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Scroll Snap Stop\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-stop)
[Touch Action\
\
Next Page](https://www.nativewind.dev/docs/tailwind/interactivity/touch-action)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-type#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-type#compatibility)

---

# Resize

Last updated on June 26, 2025

Resize
======

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/resize#usage)

-----------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/resize)

[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/resize#compatibility)

---------------------------------------------------------------------------------------------

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Pointer Events\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/interactivity/pointer-events)
[Scroll Behavior\
\
Next Page](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-behaviour)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/resize#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/resize#compatibility)

---

# Scroll Snap Stop

Last updated on June 26, 2025

Scroll Snap Stop
================

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-stop#usage)

---------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/scroll-snap-stop)

[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-stop#compatibility)

-------------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| snap-normal | 🌐 Web only |
| snap-always | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Scroll Snap Align\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-align)
[Scroll Snap Type\
\
Next Page](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-type)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-stop#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-stop#compatibility)

---

# Scroll Snap Align

Last updated on June 26, 2025

Scroll Snap Align
=================

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-align#usage)

----------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/scroll-snap-align)

[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-align#compatibility)

--------------------------------------------------------------------------------------------------------

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Scroll Padding\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-padding)
[Scroll Snap Stop\
\
Next Page](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-stop)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-align#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-align#compatibility)

---

# Touch Action

Last updated on June 26, 2025

Touch Action
============

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/touch-action#usage)

-----------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/touch-action)

[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/touch-action#compatibility)

---------------------------------------------------------------------------------------------------

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Scroll Snap Type\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-type)
[User Select\
\
Next Page](https://www.nativewind.dev/docs/tailwind/interactivity/user-select)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/touch-action#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/touch-action#compatibility)

---

# Will Change

Last updated on June 26, 2025

Will Change
===========

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/will-change#usage)

----------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/will-change)

[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/will-change#compatibility)

--------------------------------------------------------------------------------------------------

| 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

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Contributors](https://www.nativewind.dev/docs/tailwind/interactivity/will-change#contributors)

------------------------------------------------------------------------------------------------

We are looking for contributors for the following:

### [Add `will-change-transform`](https://www.nativewind.dev/docs/tailwind/interactivity/will-change#add-will-change-transform)

When a component has a transition or animation class name it will use `react-native-reanimated`'s `Animated.createAnimatedComponent()` to make the component animated. If these class names are conditional, this will cause the component to unmount as Nativewind will conditionally render two different components.

A proposed solution is to use `will-change-transform` to force the component to be animated, even if not required.

[User Select\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/interactivity/user-select)
[Fill\
\
Next Page](https://www.nativewind.dev/docs/tailwind/svg/fill)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/will-change#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/will-change#compatibility)
[Contributors](https://www.nativewind.dev/docs/tailwind/interactivity/will-change#contributors)
[Add `will-change-transform`](https://www.nativewind.dev/docs/tailwind/interactivity/will-change#add-will-change-transform)

---

# User Select

Last updated on June 26, 2025

User Select
===========

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/user-select#usage)

----------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/user-select)

[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/user-select#compatibility)

--------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| select-none | 🌐 Web only |
| select-text | 🌐 Web only |
| select-all | 🌐 Web only |
| select-auto | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Contributors](https://www.nativewind.dev/docs/tailwind/interactivity/user-select#contributors)

------------------------------------------------------------------------------------------------

We are looking for contributors for the following:

### [Add `select-[n]`](https://www.nativewind.dev/docs/tailwind/interactivity/user-select#add-select-n)

`userSelect` was added in [React Native 0.71](https://reactnative.dev/blog/2023/01/12/version-071#styles)

[Touch Action\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/interactivity/touch-action)
[Will Change\
\
Next Page](https://www.nativewind.dev/docs/tailwind/interactivity/will-change)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/interactivity/user-select#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/interactivity/user-select#compatibility)
[Contributors](https://www.nativewind.dev/docs/tailwind/interactivity/user-select#contributors)
[Add `select-[n]`](https://www.nativewind.dev/docs/tailwind/interactivity/user-select#add-select-n)

---

# Stroke

Last updated on June 26, 2025

Stroke
======

[Usage](https://www.nativewind.dev/docs/tailwind/svg/stroke#usage)

-------------------------------------------------------------------

React Native does not have SVG components but universal SVG support can be achieved with 3rd party libraries such as [react-native-svg](https://github.com/react-native-svg/react-native-svg)
. While these docs use `react-native-svg`, the concept applies to all libraries.

You will need to `cssInterop()` on these components to properly style them for native.

Example usage

    import React from 'react';
    import { View, StyleSheet } from 'react-native';
    import Svg, { Circle, Rect } from 'react-native-svg';
    import { cssInterop } from 'nativewind'
     
    cssInterop(Svg, {
      className: {
        target: "style",
        nativeStyleToProp: { width: true, height: true }
      },
    });
    cssInterop(Circle, {
      className: {
        target: "style",
        nativeStyleToProp: { width: true, height: true, stroke: true, strokeWidth: true, fill: true }
      },
    });
    cssInterop(Rect, {
      className: {
        target: "style",
        nativeStyleToProp: { width: true, height: true, stroke: true, strokeWidth: true, fill: true }
      },
    });
     
    export function SvgExample () {
      return (
        <View className="inset-0 items-center content-center">
          <Svg className="h-1/2 w-1/2" viewBox="0 0 100 100" >
            <Circle cx="50" cy="50" r="45" className="stroke-blue-500 stroke-2 fill-green-500" />
            <Rect x="15" y="15" className="w-16 h-16 stroke-red-500 stroke-2 fill-yellow-500" />
          </Svg>
        </View>
      );
    }

[Compatibility](https://www.nativewind.dev/docs/tailwind/svg/stroke#compatibility)

-----------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| stroke-{n} | ✅ Full Support |
| stroke-[n] | ✅ Full Support |
| stroke-inherit | 🌐 Web only |
| stroke-current | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Fill\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/svg/fill)
[Stroke Width\
\
Next Page](https://www.nativewind.dev/docs/tailwind/svg/stroke-width)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/svg/stroke#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/svg/stroke#compatibility)

---

# Container Queries

Last updated on June 26, 2025

Container Queries
=================

Nativewind supports the official [TailwindCSS Container Query plugin](https://github.com/tailwindlabs/tailwindcss-container-queries)

| Class | Support |
| --- | --- |
| @container | ✅ Full Support |
| @container/{name} | ✅ Full Support |
| @{size}/{name}:{modifier} | ✅ Full Support |
| @container-normal | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Screen Readers\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/accessibility/screen-readers)

---

# Fill

Last updated on June 26, 2025

Fill
====

[Usage](https://www.nativewind.dev/docs/tailwind/svg/fill#usage)

-----------------------------------------------------------------

React Native does not have SVG components but universal SVG support can be achieved with 3rd party libraries such as [react-native-svg](https://github.com/react-native-svg/react-native-svg)
. While these docs use `react-native-svg`, the concept applies to all libraries.

You will need to `cssInterop()` on these components to properly style them for native.

Example usage

    import React from 'react';
    import { View, StyleSheet } from 'react-native';
    import Svg, { Circle, Rect } from 'react-native-svg';
    import { cssInterop } from 'nativewind'
     
    cssInterop(Svg, {
      className: {
        target: "style",
        nativeStyleToProp: { width: true, height: true }
      },
    });
    cssInterop(Circle, {
      className: {
        target: "style",
        nativeStyleToProp: { width: true, height: true, stroke: true, strokeWidth: true, fill: true }
      },
    });
    cssInterop(Rect, {
      className: {
        target: "style",
        nativeStyleToProp: { width: true, height: true, stroke: true, strokeWidth: true, fill: true }
      },
    });
     
    export function SvgExample () {
      return (
        <View className="inset-0 items-center content-center">
          <Svg className="h-1/2 w-1/2" viewBox="0 0 100 100" >
            <Circle cx="50" cy="50" r="45" className="stroke-blue-500 stroke-2 fill-green-500" />
            <Rect x="15" y="15" className="w-16 h-16 stroke-red-500 stroke-2 fill-yellow-500" />
          </Svg>
        </View>
      );
    }

[Compatibility](https://www.nativewind.dev/docs/tailwind/svg/fill#compatibility)

---------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| fill-{n} | ✅ Full Support |
| fill-[n] | ✅ Full Support |
| fill-inherit | 🌐 Web only |
| fill-current | 🌐 Web only |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Will Change\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/interactivity/will-change)
[Stroke\
\
Next Page](https://www.nativewind.dev/docs/tailwind/svg/stroke)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/svg/fill#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/svg/fill#compatibility)

---

# Screen Readers

Last updated on June 26, 2025

Screen Readers
==============

[Usage](https://www.nativewind.dev/docs/tailwind/accessibility/screen-readers#usage)

-------------------------------------------------------------------------------------

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/screen-readers)

CAUTION

Accessibility on native devices works differently than the web. Please ensure proper use of the [accessibility props](https://reactnative.dev/docs/accessibility)
 instead of relying on styling.

[Compatibility](https://www.nativewind.dev/docs/tailwind/accessibility/screen-readers#compatibility)

-----------------------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| sr-only | ✅ Full Support |
| not-sr-only | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Stroke Width\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/svg/stroke-width)
[Container Queries\
\
Next Page](https://www.nativewind.dev/docs/tailwind/plugins/container-queries)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/accessibility/screen-readers#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/accessibility/screen-readers#compatibility)

---

# Stroke Width

Last updated on June 26, 2025

Stroke Width
============

[Usage](https://www.nativewind.dev/docs/tailwind/svg/stroke-width#usage)

-------------------------------------------------------------------------

React Native does not have SVG components but universal SVG support can be achieved with 3rd party libraries such as [react-native-svg](https://github.com/react-native-svg/react-native-svg)
. While these docs use `react-native-svg`, the concept applies to all libraries.

You will need to `cssInterop()` on these components to properly style them for native.

Example usage

    import React from 'react';
    import { View, StyleSheet } from 'react-native';
    import Svg, { Circle, Rect } from 'react-native-svg';
    import { cssInterop } from 'nativewind'
     
    cssInterop(Svg, {
      className: {
        target: "style",
        nativeStyleToProp: { width: true, height: true }
      },
    });
    cssInterop(Circle, {
      className: {
        target: "style",
        nativeStyleToProp: { width: true, height: true, stroke: true, strokeWidth: true, fill: true }
      },
    });
    cssInterop(Rect, {
      className: {
        target: "style",
        nativeStyleToProp: { width: true, height: true, stroke: true, strokeWidth: true, fill: true }
      },
    });
     
    export function SvgExample () {
      return (
        <View className="inset-0 items-center content-center">
          <Svg className="h-1/2 w-1/2" viewBox="0 0 100 100" >
            <Circle cx="50" cy="50" r="45" className="stroke-blue-500 stroke-2 fill-green-500" />
            <Rect x="15" y="15" className="w-16 h-16 stroke-red-500 stroke-2 fill-yellow-500" />
          </Svg>
        </View>
      );
    }

[Compatibility](https://www.nativewind.dev/docs/tailwind/svg/stroke-width#compatibility)

-----------------------------------------------------------------------------------------

| Class | Support |
| --- | --- |
| stroke-{n} | ✅ Full Support |
| stroke-[n] | ✅ Full Support |

Legend

### Class

`-{n}` Supports values from theme

`-[n]` Supports arbitrary values

### Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

[Stroke\
\
Previous Page](https://www.nativewind.dev/docs/tailwind/svg/stroke)
[Screen Readers\
\
Next Page](https://www.nativewind.dev/docs/tailwind/accessibility/screen-readers)

### On this page

[Usage](https://www.nativewind.dev/docs/tailwind/svg/stroke-width#usage)
[Compatibility](https://www.nativewind.dev/docs/tailwind/svg/stroke-width#compatibility)

---