Skip to main content

NativeWind

NativeWind uses Tailwind CSS as scripting language to create a universal style system for React Native. NativeWind components can be shared between platforms and will output their styles as CSS StyleSheet on web and StyleSheet.create for native.

It's goals are to to provide a consistent styling experience across all platforms, improve Developer UX and code maintainability.

NativeWind achieves this by pre-compiling your styles and uses a minimal runtime to selectively apply responsive styles.

Key Features​

🌐 Universal Uses the best style system for each platform.

🛠️ Precompiled Uses the Tailwind CSS compile, styles are generated at build time

🚀 Fast runtime Small runtime keeps everything fast

🖥️ DevUX Plugins for simple setup and improving intellisense support

🔥 Lots of features dark mode / arbitrary classes / media queries / themes / custom values / plugins

✨ Pseudo classes hover / focus / active on compatible components (docs)

👪 Parent state styles automatically style children based upon parent pseudo classes (docs)

In action​

With Babel​

Our babel plugin will automatically wrap your components in styled() reducing the required boilerplate.

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

const App = () => {
  return (
    <View className="flex-1 items-center justify-center">
      <Text className="text-slate-800">Styling just works! 🎉</Text>
    </View>
  );
};

What is a universal style system?​

A full featured style system should have

  • Static styles
  • UI state styles (active, hover, focus, etc)
  • Responsive styles (media queries, dynamic units)
  • Device state styles (orientation, color scheme)
  • Styling inheritance
  • Use the best rendering engine available

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

On web, CSS already has all these features and is highly optimized. While on web NativeWind provides a compatibility layer between React Native and CSS.

This is what makes NativeWind a universal style system - it allows you to use the same components with rich styles on all React Native platforms.