WEBVTT 00:00.560 --> 00:00.920 Okay. 00:00.920 --> 00:04.010 So let's style our application a little bit. 00:04.040 --> 00:06.770 In this video we're not going to spend too much time on it. 00:06.770 --> 00:12.500 But let's make a little bit things a little bit better looking on our little application. 00:12.500 --> 00:18.470 So at the moment what we have is this is a little bit too small to hover over and to, to click it. 00:18.470 --> 00:20.150 So let's make it bigger. 00:20.150 --> 00:21.140 How can we do that. 00:21.140 --> 00:25.070 And of course we'll use our tailwind library for that. 00:25.070 --> 00:29.510 So what we have is we could have that on faster. 00:29.540 --> 00:31.130 This is styles for this one. 00:31.130 --> 00:37.220 But if we'll go and we have that purple color, if we go to the parent element which is this one div 00:37.220 --> 00:43.400 here, what we can do is we can decide what is the font color or font size on this element. 00:43.400 --> 00:45.800 And all the children element will have that. 00:45.800 --> 00:50.780 So how how are we going to decide that or how can we use that. 00:50.780 --> 00:52.190 Classes from tailwind. 00:52.220 --> 00:54.710 So basically tailwind comes with a text. 00:54.740 --> 00:58.100 And then you have uh Excel version. 00:58.100 --> 01:02.160 So you can do a text in Excel, which is higher. 01:02.190 --> 01:04.380 Then you have two, three, four and so on. 01:04.380 --> 01:07.560 So you can decide like how big you want to go with that text. 01:07.560 --> 01:13.410 So if I would go something like six XL you see I can see there very very big. 01:13.410 --> 01:20.970 So and I can go for something like a three maybe, and then you will have it smaller and actually like 01:20.970 --> 01:21.300 that. 01:21.300 --> 01:23.370 And this is a fine enough. 01:23.370 --> 01:25.770 So what else we can do with tailwind. 01:25.770 --> 01:28.260 Basically we can say use it. 01:28.260 --> 01:34.470 And anything like for example we have like rate this movie if you want to have a kind of a border on 01:34.470 --> 01:34.920 top of it. 01:34.920 --> 01:43.260 So I could do a class name here and I can say border and I can do top border, for example, and I can 01:43.260 --> 01:47.580 say like, oh, this, this border will be like two pixels, um, width. 01:47.610 --> 01:48.300 And I'll go. 01:48.330 --> 01:56.640 Also, what I can do is I can do border purple, for example, my color six 600. 01:56.640 --> 01:59.350 So basically that will add a border here. 01:59.350 --> 02:02.290 And you can see here we have that border there. 02:02.290 --> 02:05.110 I can actually push it a little bit away from this. 02:05.110 --> 02:09.460 So what I can do is I can use padding or margin. 02:09.550 --> 02:13.120 And so let's say we want to use margin in the tailwind. 02:13.120 --> 02:14.350 Margin is M. 02:14.560 --> 02:19.300 And we can have a margin on top bottom left and right. 02:19.300 --> 02:21.130 Or we can have a margin here. 02:21.130 --> 02:26.050 So if I will do margin it will be equal from all the different directions. 02:26.050 --> 02:28.030 But I want to have like margin top. 02:28.030 --> 02:32.710 And then let's say we have five margin top five here. 02:32.710 --> 02:37.990 So if I will go here you can see this is already pushed from there. 02:37.990 --> 02:44.830 And you have a way to control it spacing, sizing colors and everything what you want. 02:44.860 --> 02:51.160 So let's say we want to have this one a little bit bigger than the than this one. 02:51.160 --> 03:01.160 So I can go here and I can find my movie title and I can say this class name will be text Excel for 03:01.160 --> 03:03.020 example, or maybe two. 03:03.050 --> 03:11.330 Excel if I will go here, you can see this is much bigger if I want to push it away. 03:11.360 --> 03:20.120 I can this time use maybe padding and I will do padding bottom and padding bottom like this one. 03:20.120 --> 03:22.100 And I can do maybe five. 03:22.130 --> 03:25.340 So that will give me a little bit more room in between here. 03:25.340 --> 03:36.350 Maybe five is too much I could do, maybe three if I want to use similar style here on the on this paragraph, 03:36.350 --> 03:41.840 I can say maybe text Excel is here and I also do the padding bottom three. 03:41.840 --> 03:44.780 So you can see here this is how we can style it. 03:44.810 --> 03:46.910 So this is looking much better. 03:46.910 --> 03:53.780 And if we go back to the header here there is not too much space from this section to the bottom section. 03:53.780 --> 04:04.140 So we could do here is we could have maybe if I go to app.js here this is our header class name is header. 04:04.140 --> 04:06.120 So we could put our classes there. 04:06.120 --> 04:08.730 But this is the class we have in our CSS. 04:08.730 --> 04:14.550 But we can also add classes here from tailwind and mix it up in the class name here. 04:14.550 --> 04:23.040 So let's say we want to have padding of and let's say to a ten. 04:23.070 --> 04:29.190 So that means we will add a padding here to entire, uh, this this element here. 04:29.190 --> 04:35.220 And you can see here the tailwind will work with the styles we already have in here in the upper header. 04:35.220 --> 04:37.050 So we can mix, mix and match. 04:37.260 --> 04:39.330 Uh, another thing we can do. 04:39.360 --> 04:45.420 Border maybe border bottom of two. 04:45.420 --> 04:49.830 And you can say border orange. 04:52.050 --> 04:53.790 500 for example like this. 04:53.790 --> 04:59.100 So you can see here, and then we can maybe push it a little bit the rest of this thing. 04:59.100 --> 05:04.260 So I will use this margin bottom now of maybe five. 05:04.740 --> 05:07.530 And if you hover five right. 05:07.530 --> 05:08.250 Bottom five. 05:08.250 --> 05:15.780 If you hover over this style here you can see a you you will see what is the actually translate to CSS. 05:15.810 --> 05:18.720 What is the CSS style that is applied here. 05:18.720 --> 05:21.180 So if you are not really sure you can always do that. 05:21.210 --> 05:24.420 And you can see here this is pushed a little bit more from this. 05:24.420 --> 05:33.540 I don't like this orange a the purpose of of this exercise is to use some styling a little bit more 05:33.570 --> 05:36.450 than and do your own thing, what you need to do. 05:36.480 --> 05:41.730 I'm not really a good designer here, but I think it's like if you need to move around and use some 05:41.730 --> 05:43.290 classes, this will be the way to do it. 05:43.290 --> 05:48.360 For example, if you want to have this one a little bit bigger, and also if you want to hover over 05:48.360 --> 05:51.910 this to see the cursor that is clickable item. 05:51.910 --> 05:52.240 What. 05:52.240 --> 05:53.260 We can also do that. 05:53.260 --> 05:54.610 So we can go here. 05:54.610 --> 05:56.650 We can go to movie list this time. 05:56.650 --> 05:58.330 So we'll go movie list. 05:58.420 --> 06:03.490 And this is the element we have on click. 06:03.520 --> 06:06.610 I can also apply some class names here. 06:06.610 --> 06:08.830 So class name equal. 06:09.460 --> 06:16.240 And then in the quotes we can say text Excel. 06:16.240 --> 06:17.500 So a little bit bigger. 06:17.500 --> 06:22.900 And if I want to have like cursor I can say cursor pointer. 06:22.930 --> 06:29.620 So that means if I will go back here and I can hover over this, you see my cursor changed to pointer. 06:29.620 --> 06:33.190 So it kind of tell me this is a clickable. 06:33.340 --> 06:38.980 So at the moment maybe it's not looking great but it's looking a little bit better and clearer to to 06:39.010 --> 06:40.000 see see there. 06:40.000 --> 06:45.640 So we can move back to our development of this component. 06:45.640 --> 06:48.370 And what we will do is we will make it clickable.