Skip to main content
Version: v4

Platform Differences

NativeWind aligns CSS and React Native into a common language. However the two style engines do have their differences. These are some common differences you may encounter.

Styling per platform​

Styles can be applied selectively per platform using a platform variant. Additionally the native variant can be used to target all platforms except for web.

Supported platform modifiers are: ios:, android:, web:, windows:, osx:, native:.

Explicit styles​

React Native has various issues when conditionally applying styles. To prevent these issues it's best to declare all styles.

For example, instead of only applying a text color for dark mode, provide both a light and dark mode text color.

❌ <Text className="dark:text-white-500" />
✅ <Text className="text-black dark:text-red-500" />

dp vs px​

React Native's default unit is density-independent pixels (dp) while the web's default is pixels (px). These two units are different, however NativeWind treats them as if they are equivalent. This can cause confusion in your theme, do you use 10 or 10px? The general rule of theme is use 10px, and NativeWind will fix it for you.

Flex​

React Native uses a different base flex definition to the web. Generally this can be fixed by adding flex-1 to your classes, however you may need custom styles for more complex layouts.

Flex Direction​

React Native uses a different default flex-direction to the web. This can be fixed by explicitly setting a flex-direction.

rem sizing​

React Native's <Text /> renders with a fontSize: 14, while the web's default is 16px. For consistency, NativeWind uses an rem value of 16 on web and 14 on native.

Color Opacity​

For performance reasons, NativeWind renders with the corePlugins: textOpacity,borderOpacity, divideOpacity and backgroundOpacity disabled. Theses plugin allows colors to dynamically changed via CSS variables. Instead, the opacity is set as a static value in the color property.

If you require this functionality, you can enable the disabled plugins in your tailwind.config.js file.