REACT NATIVE + TAILWIND: BUILDING A $10 TRILLION MOBILE APP!

Hello friends, in this video, Eric David Smith will explain how to use React Native CLI and Tailwind CSS via NativeWind. There are step-by-step examples of how to get it to work really quickly and effortlessly.

This is the first of this series on React Native + NativeWind. In the next videos on this topic, I will cover building an app using the following platforms:

• Typescript
• Expo
• React Native CLI
• Create React Native App
• Next.js
• Solito
• Ignite

At the end of this series, I will add a monorepo in Github of all the code for you to download and get started on your own.

What is 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.

NativeWind Goals: 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.

NativeWind 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 👪 Parent state styles automatically style children based upon parent pseudo classes

Check it out: https://www.nativewind.dev

If you like this style of video, please like, comment, and share. If you really like this type of content, consider subscribing to my channel.

Love, Eric ... https://www.youtube.com/watch?v=Pcil5sNJ8Y8