nativewind/docs/native-compatibility.md

React Native Compatibility

This library is still in development. This document helps track what classes are currently supported, but is not a complete list

Icon	Legend
✔️	Full support
✅	Partial support
❌	Not supported
🚧	Needs development
💥	Not handled correctly

Scaling values

Classes that support scaling will be document as class-{n}. You can provide custom scaling values via your TailwindCSS theme.

Arbitrary values

Classes that support arbitrary values will be documented as class-[n] and are widely supported. However use of invalid value and/or units will result in an error.

Table of contents

Layout

• Aspect Ratio ✔️
• Container ✔️
• Columns ❌
• Break After ❌
• Break Before ❌
• Break Inside ❌
• Box Decoration Break ❌
• Box Sizing ❌
• Display ✅
• Floats ❌
• Clear ❌
• Isolation ❌
• Object Fit ❌
• Object Position ❌
• Overflow ✅
• Overscroll Behavior ❌
• Position ✅
• Top / Right / Bottom / Left ✅
• Visibility ❌
• Z-Index ✅

Flexbox & Grid

• Flex Basis ✅
• Flex Direction ✔️
• Flex Wrap ✔️
• Flex ✔️
• Flex Grow
• Flex Shrink
• Order
• Grid Template Columns
• Grid Column Start / End
• Grid Template Rows
• Grid Row Start / End
• Grid Auto Flow
• Grid Auto Columns
• Grid Auto Rows
• Gap
• Justify Content
• Justify Items
• Justify Self
• Align Content
• Align Items
• Align Self
• Place Content
• Place Items
• Place Self

Spacing

• Padding
• Margin
• Space Between

Sizing

• Width
• Min-Width
• Max-Width
• Height
• Min-Height
• Max-Height

Typography

• Font Family
• Font Size
• Font Smoothing
• Font Style
• Font Weight
• Font Variant Numeric
• Letter Spacing
• Line Height
• List Style Type
• List Style Position
• Text Align
• Text Color
• Text Decoration
• Text Decoration Color
• Text Decoration Style
• Text Decoration Thickness
• Text Underline Offset
• Text Transform
• Text Overflow
• Text Indent
• Vertical Align
• Whitespace
• Word Break
• Content

Backgrounds

• Background Attachment
• Background Clip
• Background Color
• Background Origin
• Background Position
• Background Repeat
• Background Size
• Background Image
• Gradient Color Stops

Borders

• Border Radius
• Border Width
• Border Color
• Border Style
• Divide Width
• Divide Color
• Divide Style
• Outline Width
• Outline Color
• Outline Style
• Outline Offset
• Ring Width
• Ring Color
• Ring Offset Width
• Ring Offset Color

Effects

• Box Shadow
• Box Shadow Color
• Opacity
• Mix Blend Mode
• Background Blend Mode

Filters

• Blur
• Brightness
• Contrast
• Drop Shadow
• Grayscale
• Hue Rotate
• Invert
• Saturate
• Sepia
• Backdrop Blur
• Backdrop Brightness
• Backdrop Contrast
• Backdrop Grayscale
• Backdrop Hue Rotate
• Backdrop Invert
• Backdrop Opacity
• Backdrop Saturate
• Backdrop Sepia

Tables

• Border Collapse
• Table Layout

Transitions & Animation

• Transition Property
• Transition Duration
• Transition Timing Function
• Transition Delay
• Animation

Transforms

• Scale
• Rotate
• Translate
• Skew
• Transform Origin

Interactivity

• Accent Color
• Appearance
• Cursor
• Caret Color
• Pointer Events
• Resize
• Scroll Behavior
• Scroll Margin
• Scroll Padding
• Scroll Snap Align
• Scroll Snap Stop
• Scroll Snap Type
• Touch Action
• User Select
• Will Change

SVG

• Fill
• Stroke
• Stroke Width

Accessibility

• Screen Readers

Aspect Ratio

Class	Supported
aspect-auto	✔️
aspect-square	✔️
aspect-video	✔️
aspect-{n}	✔️
aspect-[n]	✔️

Container

Class	Supported
container	✔️

Columns

Use a FlatList with numColumns set instead.

Class	Supported
column-{n}	❌
column-[n]	❌

Break After/Before/Inside

Class	Supported
break-after-{option}	❌
break-before-{option}	❌
break-inside-{option}	❌

Box Decoration Break

Class	Supported
box-decoration-clone	❌
box-decoration-slice	❌

Box Sizing

React Native does not support changing the box sizing

Class	Supported
box-border	❌
box-content	❌

Display

React Native only supports flex or none

Class	Supported
flex	✔️
none	✔️
block	❌
inline-block	❌
inline	❌
inline-flex	❌
table	❌
inline-table	❌
table-caption	❌
table-cell	❌
table-column	❌
table-column-group	❌
table-footer-group	❌
table-header-group	❌
table-row-group	❌
table-row	❌
flow-root	❌
grid	❌
inline-grid	❌
contents	❌
list-item	❌

Floats

React Native does not support floats. Use Flexbox instead

Class	Supported
float-right	❌
float-left	❌
float-none	❌

Clear

React Native does not support clearning floats. Use Flexbox instead

Class	Supported
clear-right	❌
clear-left	❌
clear-both	❌
clear-none	❌

Isolation

Class	Supported
isolate	❌
isolate-auto	❌

Object Fit

Class	Supported
object-contain	❌
object-cover	❌
object-fill	❌
object-none	❌
object-scale-down	❌

Object Position

Class	Supported
object-bottom	❌
object-center	❌
object-left	❌
object-left-bottom	❌
object-left-top	❌
object-right	❌
object-right-bottom	❌
object-right-top	❌
object-top	❌

Overflow

Class	Supported
overflow-visible	✔️
overflow-hidden	✔️
overflow-scroll	✔️
overflow-auto	❌
overflow-clip	❌
overflow-x-auto	❌
overflow-y-auto	❌
overflow-x-hidden	❌
overflow-y-hidden	❌
overflow-x-clip	❌
overflow-y-clip	❌
overflow-x-visible	❌
overflow-y-visible	❌
overflow-x-scroll	❌
overflow-y-scroll	❌

Overscroll Behavior

Class	Supported
overscroll-auto	❌
overscroll-contain	❌
overscroll-none	❌
overscroll-y-auto	❌
overscroll-y-contain	❌
overscroll-y-none	❌
overscroll-x-auto	❌
overscroll-x-contain	❌
overscroll-x-none	❌

Position

Class	Supported
absolute	✔️
relative	✔️
static	❌
fixed	❌
sticky	❌

Top Right Bottom Left

Class	Supported
inset-{n}	✔️
inset-x-{n}	✔️
inset-y-{n}	✔️
top-{n}	✔️
right-{n}	✔️
bottom-{n}	✔️
left-{n}	✔️
inset-[n]	✔️
inset-x-[n]	✔️
inset-y-{n}	✔️
top-[n]	✔️
right-[n]	✔️
bottom-[n]	✔️
left-[n]	✔️
inset-auto	❌
inset-x-auto	❌
inset-y-auto	❌
top-auto	❌
right-auto	❌
bottom-auto	❌
left-auto	❌

Visibility

Class	Supported
visibile	❌
invisible	❌

Z-Index

Class	Supported
z-{n}	✔️
z-[n]	✔️
z-auto	❌

Flex Basis

Class	Supported
basis-{n}	✔️
basis-[n]	✔️
basis-auto	❌

Flex Direction

Class	Supported
flex-row	✔️
flex-row-reverse	✔️
flex-col	✔️
flex-col-reverse	✔️

Flex Wrap

Class	Supported
flex-wrap	✔️
flex-wrap-reverse	✔️
flex-nowrap	✔️

Flex

In React Native flex does not work the same way that it does in CSS. flex is a number rather than a string, and it works according to the Yoga layout engine.

To maintain compatibility between platforms, flex mimics the CSS functionality.

Class	Supported	Output
flex	✔️	{ display: flex }
flex-auto	✔️	{ flexGrow: 1, flexShrink: 1 }
flex-initial	✔️	{ flexGrow: 0, flexShrink: 1 }
flex-none	✔️	{ flexGrow: 0, flexShrink: 0 }

Flex Grow

Class	Supported
grow	✔️
grow-{n}	✔️
grow-[n]	✔️

Flex Shrink

Class	Supported
shrink	✔️
shrink-{n}	✔️
shrink-[n]	✔️

Order

Class	Supported
order-{n}	❌
order-[n]	❌
order-first	❌
order-last	❌
order-none	❌

Grid Template Columns

Class	Supported
grid-cols-{n}	❌
grid-cols-none	❌
grid-cols-[n]	❌

Grid Column Start / End

Class	Supported
cols-auto	❌
col-span-{n}	❌
col-span-none	❌
col-span-[n]	❌
col-start-{n}	❌
col-start-auto	❌
col-start-[n]	❌
col-end-{n}	❌
col-end-auto	❌
col-end-[n]	❌

Grid Template Rows

Class	Supported
grid-rows-{n}	❌
grid-rows-none	❌
grid-rows-[n]	❌

Grid Row Start / End

Class	Supported
rows-auto	❌
row-span-{n}	❌
row-span-none	❌
row-span-[n]	❌
row-start-{n}	❌
row-start-auto	❌
row-start-[n]	❌
row-end-{n}	❌
row-end-auto	❌
row-end-[n]	❌

Grid Auto Flow

Class	Supported
grid-flow-row	❌
grid-flow-col	❌
grid-flow-row-dense	❌
grid-flow-col-dense	❌

Grid Auto Columns

Class	Supported
grid-cols-auto	❌
grid-cols-min	❌
grid-cols-max	❌
grid-cols-fr	❌

Grid Auto Rows

Class	Supported
grid-rows-auto	❌
grid-rows-min	❌
grid-rows-max	❌
grid-rows-fr	❌

Gap

Class	Supported
gap-{n}	❌
gap-x-{n}	❌
gap-y-{n}	❌
gap-px	❌
gap-x-px	❌
gap-y-px	❌

Justify Content

Class	Supported
justify-start	✔️
justify-end	✔️
justify-center	✔️
justify-between	✔️
justify-around	✔️
justify-evenly	✔️

Justify Items

Class	Supported
justify-items-start	❌
justify-items-end	❌
justify-items-center	❌
justify-items-stretch	❌

Justify Self

Class	Supported
justify-self-auto	❌
justify-self-start	❌
justify-self-end	❌
justify-self-center	❌
justify-self-stretch	❌