REACT NATIVE + TAILWIND CSS = AMAZING!

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.

REACT NATIVE + TAILWIND CSS = AMAZING!

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 David Smith

#reactnative #tailwindcss #nativewind