NativeWind allows you to use Tailwind CSS on all React Native platforms using the best style engine for that platform (e.g. CSS StyleSheet or StyleSheet.create). It aims to provide a consistent styling experience and brings the development and maintenance benefits of Tailwind to React Native.
On native devices, it prebuilts your styles and uses a minimal runtime to provide a web-like styling experience. While on platforms that support CSS, it is simply a compatibility layer between React Native and the browser.
NativeWind provides an optional Babel plugin to keep the visual appearance consistent. It also provides helper functions to help write your own or convert existing components into NativeWind compatible components.
In Action
Click the picture to go to a live example!
Features
- Works on all RN platforms, uses the best style system for each platform.
- Uses the Tailwind CSS compiler
- Native styles are computed at build time
- Babel plugin for simple setup and improving intellisense support
- Respects all tailwind.config.js settings, including themes, custom values, plugins
- Supports dark mode / arbitrary classes / media queries
- Polyfills pseudo classes - hover / focus / active are available on compatible components
- Supports group and named groups allowing styling based upon parent state
Documentation
All documentation is on our website https://nativewind.dev