How to Add Tailwind CSS to a React Native Mac App

[00:00 - 00:17] So far, we have concerned ourselves with the logical parts of our application, but now the time has come for us to take a look into the UI and how do we style it. So there are many ways to style a React Native application.

[00:18 - 00:47] You could pick a framework library that has already a bunch of components for you, for example, React Native Paper, you could use CSS in JS library, like Style Components, or you could do your own styles. But that approach is even more time consuming because you have to declare your own scales and you have to do your own math to make sure that everything fits within different screens.

[00:48 - 00:57] So I don't like any of them, so I would like to introduce you to Tailwind CSS. Tailwind is a utility framework.

[00:58 - 01:24] So basically it doesn't have any pre-made component, but it does have a lot of different utility classes, which you can just compose to declare the style of your UI elements. So in order to use Tailwind within React Native, we need to use a third-party package.

[01:25 - 01:36] The problem is Tailwind is designed for web and it works with CSS. And even though React Native has CSS-like syntax, it doesn't actually support CSS.

[01:37 - 01:47] Everything is done through a custom engine, so it's only on the surface that it looks like you're using CSS. So in order to do this, we're going to add two packages to our dependencies.

[01:48 - 02:06] One is Tailwind CSS itself, and the other one is Tailwind RN, which is a community package that allows us to use Tailwind classes within React Native. So once I have the classes installed, I'm just going to import TW from Tailwind RN.

[02:07 - 02:24] So TW is going to be the function that is going to take a string, and this string is going to be all the class names from Tailwind. So I'm just going to go to a view, in this case the root view of our books container.

[02:25 - 02:30] I'm going to add the style prop. And inside of this, I'm going to call the TW function.

[02:31 - 02:40] So I need to pass a string that's going to contain the class names. In this case, p3 means padding 3.

[02:41 - 02:53] And if I go into our application, you can see now it has some padding. So let me just now put the app in here so we can better see what we do.

[02:54 - 03:02] So let's say I changed this to p4 or something like that, you can see it's going to apply even more padding. So what does 3 actually means?

[03:03 - 03:26] The thing is Tailwind is based on REM unit, which is scale with the font of your application. So if you're using this on a bigger device, which requires a smaller font, then everything is going to be in a ratio to the font size, which makes it a lot nicer to make sure that your UI fits on all the devices.

[03:27 - 03:33] Unfortunately, there is no easy way to learn this. You just kind of have to learn the name of the classes.

[03:34 - 03:37] So some people are not going to like this. That's fine.

[03:38 - 03:45] You can do styling however you want. But the nice thing about Tailwind is that it actually allows for very fast styling.

[03:46 - 03:57] It allows you to prototype your user interface is quite fast. And I personally don't mind when the style strings get a little bit longer.

[03:58 - 04:08] Of course, they take a little bit time to understand. But I just like having my classes next to my components or my CSS, the styling next to the component, right?

[04:09 - 04:20] Because I don't have to go chasing around all over my application for them. So I'm just going to go on and style our component a little bit more.

[04:21 - 04:28] So on this one, I'm going to once again apply a little bit more padding. Right?

[04:29 - 04:36] That looks nicer. All of her books have now a little bit more space.

[04:37 - 05:01] On my title, I'm just going to make the text apply a little different font size . For my text input, we can do something like give it a white background.

[05:02 - 05:09] That's fine. We can give it some routing corners and we can give it a little bit of padding so it gets easier.

[05:10 - 05:23] I'm also going to take this opportunity and pull a placeholder. That's better.

[05:24 - 05:32] And let me just make this a little bit bigger so we can see it. And for our button, this also needs a little bit of styling.

[05:33 - 05:39] What I'm going to do is I'm going to give it a background. I'm going to change the text.

[05:40 - 05:54] I'm going to justify the text even though that might not be necessary and a little bit of padding. Let me see what has gone wrong here.

[05:55 - 06:10] The button component itself doesn't take any style props. So we're going to change this to an attachable opacity.

[06:11 - 06:21] We're going to get rid of this import. And here I'm going to change this to a touchable opacity.

[06:22 - 06:30] I need to close this and the title, I'm just going to move it. I'm going to put the text component inside of it.

[06:31 - 06:38] I'm just going to say add. And I'm missing this.

[06:39 - 06:44] All right. I have to add one more style property to it.

[06:45 - 06:54] Let's say it's a text white. And this probably is right up center.

[06:55 - 06:56] All right. That looks better.

[06:57 - 07:06] Again, we're going to round it and we're going to add it a little bit marching to the top. So you can just see how fast I can use a lot of these classes.

[07:07 - 07:15] I don't need to worry about if they scale with my device, I don't need to worry about a lot of things, right? a lot of things are just taking care for me.

[07:16 - 07:16] Thank you.