Skip to main content

Tailwind with Nativewind

Style your apps with Tailwind CSS class name syntax by using Nativewind

Nativewind

NativeWind uses Tailwind CSS as scripting language to create a universal styles. Styled components used on your React components will be shared between all React Native platforms you setup on your mobile app and web too, using the best style engine for each platform. CSS StyleSheet on web and StyleSheet.create for native.

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)

Usage

Please refer to the documentation on the Nativewind website