Last updated on September 14, 2026
Units
Supported Units
Nativewind v5 supports the following CSS units on native:
| Unit | Name | Description |
|---|---|---|
px | Pixels | Treated as density-independent pixels (dp) on native. 10px becomes 10 in React Native. |
% | Percentage | Relative to the parent container, same as CSS. |
vw | Viewport Width | Polyfilled using Dimensions.get('window').width. Reactive to window size changes. |
vh | Viewport Height | Polyfilled using Dimensions.get('window').height. Reactive to window size changes. |
rem | Root EM | Relative to the root font size. Default is 14 on native, 16 on web. |
em | EM | Relative to the current element's font size. |
Ratios
Ratio values like aspect-ratio: 16 / 9 are supported natively.
dp vs px
React Native's default unit is density-independent pixels (dp) while the web uses pixels (px). Nativewind treats them as equivalent: 10px in CSS becomes 10 in React Native's style system. When defining values in your theme, use px units and Nativewind will handle the conversion.
rem Sizing
React Native's <Text /> renders with a default fontSize: 14, while the web default is 16px. Nativewind uses an rem value of 14 on native and 16 on web to maintain visual consistency with Tailwind's spacing scale.
You can override the rem value using CSS:
The rem value is not a runtime JavaScript setting in v5. For dimensions that change at runtime, use a CSS variable through VariableContextProvider and preserve it with inlineVariables.exclude; see Dynamic Themes.