diff --git a/README.md b/README.md index 7199ec1..6a33d8b 100644 --- a/README.md +++ b/README.md @@ -12,12 +12,16 @@
-`NativeWind` uses [Tailwind CSS](https://tailwindcss.com) 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` allows you to use [Tailwind CSS](https://tailwindcss.com) 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. -`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). +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! + @@ -27,16 +31,14 @@ ## Features -- Works on **all** RN platforms, uses the best style system for each platform. +- 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 +- 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