NativeWind

NativeWind

React Native utility-first universal design system - powered by Tailwind CSS
GitHub
3.02k
Created a year ago, last commit 9 days ago
31 contributors
2.66k commits
Stars added on GitHub, month by month
9
10
11
12
1
2
3
4
5
6
7
8
2022
2023
Stars added on GitHub, per day, on average
Yesterday
+4
Last week
+8.3 /day
Last month
+6.1 /day
Last 12 months
+6.3 /day
Package on NPM
Monthly downloads on NPM
9
10
11
12
1
2
3
4
5
6
7
8
2022
2023
README

NativeWind uses Tailwind CSS as high-level scripting language to create a universal design system. Styled components can be shared between all React Native platforms, using the best style engine for that platform (e.g. CSS StyleSheet or StyleSheet.create). It's goals are to to provide a consistent styling experience across all platforms, improving Developer UX, component performance and code maintainability.

NativeWind processes your styles during your application build, and uses a minimal runtime to selectively apply reactive styles (eg changes to device orientation, light dark mode).

In Action

Features

  • Works on all RN platforms, uses the best style system for each platform.
  • Uses the Tailwind CSS compiler
  • Styles are computed at build time
  • Small runtime keeps your components fast
  • Babel plugin for simple setup and improving intellisense support
  • Respects all tailwind.config.js settings, including themes, custom values, plugins
  • dark mode / arbitrary classes / media queries
  • pseudo classes - hover / focus / active on compatible components
  • styling based on parent state - automatically style children based upon parent pseudo classes
  • children styles - create simple layouts based upon parent class

Documentation

All documentation is on our website https://nativewind.dev