00:00:02 We're done with the general setup of the application, but there are still some things we gotta set up, such as additional packages for styling and configuration

00:00:11 that'll make our job easier later on.

00:00:14 One of those packages is called Native Wind.

00:00:17 Native Wind doesn't even have its own landing page.

00:00:19 It just says, do you like using Tailwind CSS to style your apps?

00:00:23 Well, this helps you do that in React Native.

00:00:26 So we'll use it for that exact reason.

00:00:28 You can install it by opening up a new terminal, keep this one running because it's the one running your app, and run npm install.

00:00:37 nativewind, tailwind-css, react-native-reanimated, and react-native-safe-area-context.

00:00:48 These are some packages that are going to make our styling easier.

00:00:51 Let's give them a few moments until they install.

00:00:53 And once that is done, run mpx tailwind-css init.

00:00:59 This will generate our configuration file.

00:01:02 You can find it within your code, right here, tailwind.config.js.

00:01:06 And you'll get a default configuration.

00:01:08 But to make sure it works properly with our React Native setup, we'll need to update it a bit.

00:01:13 Here, you want to include all the files that you want tailwind to style.

00:01:17 So in this case, everything within the app folder that ends with JS, JSX, or TS, or TSX.

00:01:23 And we're also adding a Babel preset.

00:01:26 So just copy it from nativewinds.expo setup and just override what you had in the Tailwind config file.

00:01:31 Finally, create a new file within the app folder and call it globals.css.

00:01:38 And within it, you'll have to import three things or rather add three Tailwind directives.

00:01:44 Tailwind base, Tailwind components, and Tailwind utilities.

00:01:49 After that, we'll have to set up the Babel preset.

00:01:51 So copy this config.

00:01:53 and create a new file in the root of your directory called babel.config.js and paste what you just copied.

00:02:04 After that, we'll also have to modify our Metro config.

00:02:07 So just copy it, open up your terminal and run mpx expo customize metro.config.js.

00:02:18 This will generate that config file.

00:02:20 So you'll be able to find it right here.

00:02:22 And you can override it with what we just copied from nativewind.

00:02:26 Get default config.

00:02:28 With nativewind, we wrap that configuration and we set it up.

00:02:32 You don't have to worry about understanding what's happening here.

00:02:34 This is just the setup to make the styling work.

00:02:37 Finally, we can head over into our app underscore layout.tsx.

00:02:42 And right here, we can import the .slashglobals.css, so we can actually apply some of these styles.

00:02:49 And then at the root of your project, create a new file called nativewind-env.d.ts.

00:02:59 And within it, add a triple forward slash, open up a new self-closing component called reference, and add types equal to nativewind types.

00:03:08 This will enable TypeScript to recognize Tailwind CSS classes, preventing constant error messages.

00:03:14 And very quickly, head over into your Metroconfig and make sure that the input points to the right path to our globals.css file.

00:03:23 So it is not .slash global.css, rather it is .slash app forward slash globals with an S .css.

00:03:34 This has to match this globals.css file.

00:03:38 Once you do it, close all of your files and open up your terminal.

00:03:42 To make sure that everything we've done right now actually works, you'll have to restart your application by pressing Control C.

00:03:50 and this can get boring pretty soon.

00:03:51 But whenever something is not working or your changes are not being reflected, just go ahead and reset it, it'll help.

00:03:58 So start your app with a command mpx expost start dash dash clear.

00:04:03 This will make sure that everything we have done actually gets taken into account.

00:04:07 And then press R to reload your application.

00:04:10 It'll first bundle it, and then depending on your internet speed, it'll download the code and it'll display it right here on the screen.

00:04:17 So while that is happening, let me head over into the index.dsx file.

00:04:21 And now, hopefully, we can style our applications using Tailwind.

00:04:25 Instead of these default styles, let's remove these default inline styles.

00:04:30 And instead, let's give it a class name and say something like flex-1.

00:04:37 justify-center and items-center, which should keep it centered like it did before.

00:04:44 And we can also style this welcome by giving it a class name of text-5xl.

00:04:50 And by the way, notice how my WebStorm IDE is giving me all of these options in a super nice way.

00:04:56 So I immediately know exactly which styles will each one of these Tailwind CSS properties apply.

00:05:03 We can also give it a text blue of 500 as well as font dash bold.

00:05:09 If you save it in a matter of seconds, you'll be able to see the changes reflected on your device.

00:05:14 Now, instead of saying something like text dash and then manually defining the color like hash 123123, This is not going to work,

00:05:23 right?

00:05:23 Whenever you change one color, you have to change it across hundreds of different files.

00:05:28 So what you typically do when using Tailwind is define custom themes within your configuration file.

00:05:35 So head over into tailwind.config.js.

00:05:38 and extend your theme with some additional colors, such as a primary color of something like hash 030014. Now, going back to your app,

00:05:53 you can just say text dash primary, and it'll automatically take that color into account.

00:05:59 Pretty cool, right?

00:06:01 So where did I find this color?

00:06:03 Well, just below, you'll be able to find a link to a complete Figma design of this project.

00:06:09 You can go through it a bit and if you go ahead and click a couple of times on different elements, it'll tell you what is the color of that specific element.

00:06:18 So for example, we have this accent color of AB8BFF, so we can copy it.

00:06:25 And back in the code, we can add that accent color just like this.

00:06:29 And then you can use it very easily within your code by saying text-accent.

00:06:35 There are also a couple of other colors from this design that I want to add.

00:06:39 maybe the dark background color or this gray color right here that we want to use.

00:06:45 You can find them on the design yourself and then copy them within your app, such as this variant of the dark color, or we can do it together right now.

00:06:52 There aren't too many.

00:06:53 Alongside the primary color, we'll also have the secondary, which is going to be hash 151312. We'll also have a couple of variations of the light color,

00:07:05 such as the 100 variation of hash D6C 7FF.

00:07:11 We can also have a 200 variant of hash A8B5DB, as well as 300, which is going to be set to hash 9C A4AB.

00:07:24 And we can have a couple of variations of the dark color.

00:07:28 one for the bottom navigation bar, and one for the background.

00:07:31 So I'll say 100, hash 221f3d, as well as 200 variation of hash 0f0d23.

00:07:42 If you save it, all of these variations of different colors will be extended in our theme.

00:07:48 So now we can very easily use them by saying text-dark-200, for example.

00:07:53 And with that, we have just set up Native Wind inside of your project, allowing us to style our applications more easily.

00:08:00 You'll definitely want to save this entire process somewhere, as this is something we'll have to do with every single app.

00:08:06 And as you saw, it's not easy as ABCs.

00:08:09 If you mess one thing, the styles will not be getting applied.

00:08:12 So I'll include the entire Native Wind setup within that React Native guide down below.

00:08:18 So you can always refer back to it, even when you're building your own applications in the future.

00:08:22 Great job on setting up the styling.

00:08:25 Next, routing.

00:08:26 Oh, and I almost forgot to mention something that is super relevant here.

00:08:30 If you're struggling with Tailwind CSS and you think that would hinder your work on the React Native app, just recently I have published the updated version

00:08:39 of the Tailwind CSS crash course, which teaches you everything you need to know about Tailwind in less than an hour.

00:08:45 So if you want to revisit your Tailwind styling game before we proceed with the rest of the course, checking it out might be a good idea.