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
* 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 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:

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

[benbowers]

I love nativewind! I've been using it for a couple months now. The ability to add active styles to buttons on mobile with a single className is 👌

Also really like the "group" class that let's you set styles based on the parent's state

[ProCoder.F]

thanks Eric finally I was able to run Tailwind using NativeWind in React Native 🥳🎉

[epiclifesociety]

Thanks for sharing this. Getting into React, Remix, and Native, and this sounds like a banger. Should help bridge the gap between web and mobile and reduce having to make “two” apps.

[brunoscardoso]

Hey buddy, I love your terminal; what plugin are you using for stats?

[michaelm]

How to use with the tab bar from react-navigation?

[rog]

How does it work with react reanimated? like when using useAnimatedStyle hook, how do you combine tailwindcss & stylesheet styles for animation?

[shygrammer]

is that an axe fx3?? SSL500?? OMG!! you've got so much recording gear!

[starverseofficial]

@EricDavidSmith i want to know one thing, right now i am using styled-component/native for making my component library, but i am facing performance lag and rendering lag. what should be the ideal css framework for making component lib for react native app?

[warisaremou]

is there a way to have a css file and define tailwindcss classes in it order than copying the same style to all components?

[vinaysingla]

It is giving type error for className even after configuring app.d.ts in my case

[mahmoudatiaead]

so how to make it responsive i mean the scale for all devices

[Shoutguner]

bg-lime-500 - works on IOS, does not work on Android. bg-black, bg-white - both work on both systems. h-screen - works on IOS, does not work on Android. Nativewind is pure frustration.

[dan-carlton]

for some reason I am getting this error:

Use process(css).then(cb) to work with async plugins

[hydrognspa]

I'm working with React Native with expo, and I just followed all the steps. It compiles just perfect when running on mobile, but it doesn't allow me to apply more than 2 classes when running on expo web :( is anybody else having this issue?

[sachinpandey]

follow the same step not working for me any solution