1 00:00:01,140 --> 00:00:03,360 ‫One of my favorite things when working 2 00:00:03,360 --> 00:00:05,970 ‫in Tailwind is spacing. 3 00:00:05,970 --> 00:00:09,690 ‫So using classes for margin and for petting 4 00:00:09,690 --> 00:00:12,990 ‫and also for all the other things in the box model. 5 00:00:12,990 --> 00:00:16,260 ‫So things like borders and display. 6 00:00:16,260 --> 00:00:18,940 ‫And so let's now explore these a little bit 7 00:00:18,940 --> 00:00:21,710 ‫as these are one of the most important things 8 00:00:21,710 --> 00:00:24,993 ‫that we use all the time in Tailwind. 9 00:00:26,520 --> 00:00:27,600 ‫Now, let's start 10 00:00:27,600 --> 00:00:31,740 ‫by actually including this create user form right here 11 00:00:31,740 --> 00:00:33,360 ‫into the homepage. 12 00:00:33,360 --> 00:00:36,843 ‫So here inside this div after the H one. 13 00:00:38,340 --> 00:00:42,363 ‫So create like this. 14 00:00:43,260 --> 00:00:46,500 ‫So create user and for some reason, 15 00:00:46,500 --> 00:00:49,443 ‫we have to do our manual import here again. 16 00:00:53,040 --> 00:00:56,043 ‫So create user, 17 00:00:59,340 --> 00:01:04,340 ‫and then features user and create user now, right? 18 00:01:06,050 --> 00:01:09,150 ‫So here we have this very basic form 19 00:01:09,150 --> 00:01:12,850 ‫but now we need some spacing around all of this. 20 00:01:12,850 --> 00:01:16,170 ‫So we need some spacing between the H one and the form 21 00:01:16,170 --> 00:01:19,500 ‫and probably also here between the beginning. 22 00:01:19,500 --> 00:01:24,140 ‫So between this div right here and the header. 23 00:01:24,140 --> 00:01:29,140 ‫So let's use some of tailwind's classes for that. 24 00:01:29,250 --> 00:01:31,200 ‫So right here in the H one 25 00:01:31,200 --> 00:01:34,500 ‫we want to now add some margin to the bottom. 26 00:01:34,500 --> 00:01:38,450 ‫And the way we do that is by writing MB. 27 00:01:38,450 --> 00:01:40,650 ‫And then here some number. 28 00:01:40,650 --> 00:01:42,009 ‫So let's start with four 29 00:01:42,009 --> 00:01:45,060 ‫and then I will show you what this actually mean 30 00:01:45,060 --> 00:01:46,450 ‫in a second. 31 00:01:46,450 --> 00:01:50,040 ‫And notice how the automatic glass sorting then 32 00:01:50,040 --> 00:01:53,850 ‫placed this margin here at the very beginning. 33 00:01:53,850 --> 00:01:58,850 ‫So this MB, all it does is to set margin bottom to one rem. 34 00:01:58,890 --> 00:02:01,230 ‫And so let's now come here 35 00:02:01,230 --> 00:02:06,230 ‫to our Tailwind docks and let's search for margin. 36 00:02:07,650 --> 00:02:10,580 ‫And so here we have all these different values 37 00:02:10,580 --> 00:02:12,360 ‫that we can use. 38 00:02:12,360 --> 00:02:14,820 ‫So this one actually takes some time to memorize 39 00:02:14,820 --> 00:02:18,420 ‫because there are many different options here. 40 00:02:18,420 --> 00:02:21,700 ‫But basically the M always stands for margin. 41 00:02:21,700 --> 00:02:25,380 ‫Then X means in the X direction, 42 00:02:25,380 --> 00:02:27,063 ‫so left and right, 43 00:02:28,170 --> 00:02:31,320 ‫the Y direction here is top and bottom. 44 00:02:31,320 --> 00:02:35,310 ‫And then we also have margin for the top, 45 00:02:35,310 --> 00:02:38,940 ‫the right the bottom, and the left. 46 00:02:38,940 --> 00:02:41,590 ‫So these are the most important ones that we really 47 00:02:41,590 --> 00:02:42,689 ‫need to know. 48 00:02:42,689 --> 00:02:46,219 ‫And then after that, we have these numbers here. 49 00:02:46,219 --> 00:02:49,150 ‫So zero is of course zero pixels. 50 00:02:49,150 --> 00:02:51,500 ‫Then we have 0.5. 51 00:02:51,500 --> 00:02:54,030 ‫And then from there we have some scale 52 00:02:54,030 --> 00:02:55,830 ‫that Tailwind came up with. 53 00:02:55,830 --> 00:02:58,800 ‫So we have one which is four pixels 54 00:02:58,800 --> 00:03:00,783 ‫then six pixels, which is this 1.5, 55 00:03:01,860 --> 00:03:04,110 ‫and then so on and so forth. 56 00:03:04,110 --> 00:03:06,010 ‫But it is not a linear scale 57 00:03:06,870 --> 00:03:11,870 ‫because for example here eight is already 32 pixels. 58 00:03:12,180 --> 00:03:14,853 ‫So this eight is not eight pixels. 59 00:03:15,930 --> 00:03:17,100 ‫All right. 60 00:03:17,100 --> 00:03:18,630 ‫So we have all of this year 61 00:03:18,630 --> 00:03:22,200 ‫you see its finishes at 96, 62 00:03:22,200 --> 00:03:24,360 ‫which is this Ute margin. 63 00:03:24,360 --> 00:03:27,750 ‫So this Ute value now, right? 64 00:03:27,750 --> 00:03:30,400 ‫We also have auto here, which is margin auto 65 00:03:30,400 --> 00:03:33,393 ‫that we use many times to center elements. 66 00:03:34,320 --> 00:03:36,190 ‫And yeah, if you want more information 67 00:03:36,190 --> 00:03:40,623 ‫you can as always read the documentation page right here. 68 00:03:41,730 --> 00:03:43,680 ‫So what I just explained works this way 69 00:03:43,680 --> 00:03:46,570 ‫for margin and also for padding. 70 00:03:46,570 --> 00:03:49,923 ‫So we also have like PB and then four. 71 00:03:50,830 --> 00:03:53,550 ‫But anyway here, let's increase this, 72 00:03:53,550 --> 00:03:54,693 ‫let's say to eight. 73 00:03:55,950 --> 00:04:00,780 ‫So this is then 32 pixels, and this looks a bit better. 74 00:04:00,780 --> 00:04:03,120 ‫And over time, you'll of course get a feeling 75 00:04:03,120 --> 00:04:07,460 ‫about which values you need in which situations now, right? 76 00:04:10,350 --> 00:04:13,350 ‫So now here, let's add some margin to the top. 77 00:04:13,350 --> 00:04:16,053 ‫And let's say in this entire div, 78 00:04:17,400 --> 00:04:21,180 ‫so let's say MT and then 10, 79 00:04:21,180 --> 00:04:25,590 ‫so not P, but T and beautiful. 80 00:04:25,590 --> 00:04:28,710 ‫And if we want to center this text here, 81 00:04:28,710 --> 00:04:30,330 ‫so the content in the form, 82 00:04:30,330 --> 00:04:33,663 ‫we can actually just move this center up here. 83 00:04:34,890 --> 00:04:37,683 ‫And yeah, that then centers everything. 84 00:04:38,970 --> 00:04:41,520 ‫Now, let's do the same here at the bottom as well. 85 00:04:41,520 --> 00:04:45,720 ‫And so we could do MB 10 as well. 86 00:04:45,720 --> 00:04:50,720 ‫So if we wanted 10, or we could do also let's say eight, 87 00:04:51,000 --> 00:04:53,550 ‫but if we want both of them to be 10, 88 00:04:53,550 --> 00:04:56,853 ‫then remember that we can also use this helper. 89 00:04:57,780 --> 00:05:01,470 ‫So MY, so in the Y direction. 90 00:05:01,470 --> 00:05:06,470 ‫So that gives then 10 pixels to the top and to the bottom 91 00:05:06,870 --> 00:05:08,850 ‫and not 10 pixels, 92 00:05:08,850 --> 00:05:11,460 ‫but really just this value of 10 93 00:05:11,460 --> 00:05:15,880 ‫which translates to actually 40 pixels now. 94 00:05:15,880 --> 00:05:20,670 ‫Okay, next up, let's go to the header and add a little bit 95 00:05:20,670 --> 00:05:23,610 ‫of padding inside this header. 96 00:05:23,610 --> 00:05:25,770 ‫So here we already have the class name. 97 00:05:25,770 --> 00:05:30,770 ‫And so let's just add some padding to the X direction. 98 00:05:31,350 --> 00:05:33,490 ‫Let's say four here. 99 00:05:33,490 --> 00:05:37,210 ‫And so that X direction is the left and the right 100 00:05:37,210 --> 00:05:40,323 ‫and then top and bottom, PY. 101 00:05:43,599 --> 00:05:44,843 ‫Now okay, nice. 102 00:05:46,290 --> 00:05:49,320 ‫And so writing this is actually a lot faster 103 00:05:49,320 --> 00:05:53,090 ‫than having to write out all of this here by hand, right? 104 00:05:53,090 --> 00:05:56,370 ‫So I really, really like these classes right here. 105 00:05:56,370 --> 00:05:59,070 ‫So for margin and for padding. 106 00:05:59,070 --> 00:06:02,040 ‫Now, let's also add a border right here. 107 00:06:02,040 --> 00:06:05,690 ‫So the border is also part of the CSS box model. 108 00:06:05,690 --> 00:06:08,853 ‫And so let's also talk about that right here. 109 00:06:09,840 --> 00:06:13,040 ‫So the way in which we add a border is in two steps. 110 00:06:13,040 --> 00:06:17,480 ‫First, we write border and enter direction 111 00:06:17,480 --> 00:06:20,550 ‫which again is B for bottom, 112 00:06:20,550 --> 00:06:22,500 ‫but it could also be top 113 00:06:22,500 --> 00:06:26,760 ‫or it could be left right or X and Y. 114 00:06:26,760 --> 00:06:28,710 ‫But here we just want it at the bottom. 115 00:06:28,710 --> 00:06:31,893 ‫And then we can again set a value for the width. 116 00:06:32,889 --> 00:06:35,329 ‫So this one, for example, would be two pixels 117 00:06:35,329 --> 00:06:38,370 ‫or we could do eight probably. 118 00:06:38,370 --> 00:06:40,650 ‫And I'm actually just making this up. 119 00:06:40,650 --> 00:06:43,080 ‫So after some experience, you know that 120 00:06:43,080 --> 00:06:45,750 ‫in some places you can add some values 121 00:06:45,750 --> 00:06:48,420 ‫and sometimes you cannot. 122 00:06:48,420 --> 00:06:51,554 ‫Now here we don't need anything actually 123 00:06:51,554 --> 00:06:55,020 ‫because by default if we just write border B 124 00:06:55,020 --> 00:06:56,820 ‫that will then be one pixel. 125 00:06:56,820 --> 00:07:01,050 ‫And then as a second step, we also need to define the color. 126 00:07:01,050 --> 00:07:02,490 ‫So that's border. 127 00:07:02,490 --> 00:07:05,553 ‫And then we write a color in or usual way. 128 00:07:06,420 --> 00:07:08,790 ‫So stone and then some color. 129 00:07:08,790 --> 00:07:11,590 ‫Let's just do something dark here to see. 130 00:07:11,590 --> 00:07:13,653 ‫And indeed, there it is. 131 00:07:15,600 --> 00:07:20,190 ‫So our classes got reorganized here again and again. 132 00:07:20,190 --> 00:07:24,050 ‫If we wanted a bigger border, we would do it like this. 133 00:07:24,050 --> 00:07:29,050 ‫And now let's make it a bit lighter so that we can really 134 00:07:29,680 --> 00:07:31,990 ‫only see it very faintly here. 135 00:07:31,990 --> 00:07:34,590 ‫So this is just a small detail, 136 00:07:34,590 --> 00:07:38,100 ‫just so I could show you how this border works. 137 00:07:38,100 --> 00:07:41,430 ‫And then to finish, let's as always also style 138 00:07:41,430 --> 00:07:44,850 ‫this card overview that is part of our layout. 139 00:07:44,850 --> 00:07:46,773 ‫So here we want some petting as well. 140 00:07:47,820 --> 00:07:51,140 ‫So let's do just petting and then four. 141 00:07:51,140 --> 00:07:55,500 ‫And so this will then apply it to all four sites 142 00:07:55,500 --> 00:07:57,570 ‫or actually of course not. 143 00:07:57,570 --> 00:07:59,760 ‫So this was just in the Y direction, 144 00:07:59,760 --> 00:08:01,350 ‫but just P four. 145 00:08:01,350 --> 00:08:04,740 ‫So just padding four will then put it everywhere. 146 00:08:04,740 --> 00:08:09,120 ‫So on all four sites now, right? 147 00:08:09,120 --> 00:08:12,510 ‫And now staying again on the topic of spacing. 148 00:08:12,510 --> 00:08:15,646 ‫Tailwind actually includes a very, very nice 149 00:08:15,646 --> 00:08:17,220 ‫and helpful class, 150 00:08:17,220 --> 00:08:18,690 ‫which allows us to add spacing 151 00:08:18,690 --> 00:08:22,050 ‫between elements in a very easy way. 152 00:08:22,050 --> 00:08:23,400 ‫So without, for example, 153 00:08:23,400 --> 00:08:26,250 ‫having to use any flex box tricks. 154 00:08:26,250 --> 00:08:29,540 ‫So the way that works, and let's say we wanted some space 155 00:08:29,540 --> 00:08:31,980 ‫between these elements here, 156 00:08:31,980 --> 00:08:36,720 ‫is that on the parent you simply use space, 157 00:08:36,720 --> 00:08:38,280 ‫then the direction. 158 00:08:38,280 --> 00:08:41,790 ‫So X for horizontal and Y for vertical, 159 00:08:41,790 --> 00:08:43,293 ‫and then the amount again. 160 00:08:44,400 --> 00:08:47,310 ‫And beautiful. 161 00:08:47,310 --> 00:08:50,609 ‫So here we created this nice space that we wanted 162 00:08:50,609 --> 00:08:53,670 ‫and let's see what this actually does. 163 00:08:53,670 --> 00:08:56,163 ‫So what CSS is actually written. 164 00:08:57,780 --> 00:09:00,600 ‫And so this one is a little bit more complex. 165 00:09:00,600 --> 00:09:03,480 ‫And so with this class, we can achieve this really 166 00:09:03,480 --> 00:09:05,870 ‫important thing that we need all the time just 167 00:09:05,870 --> 00:09:08,760 ‫by writing this simple class. 168 00:09:08,760 --> 00:09:11,490 ‫So by now, hopefully you are starting to 169 00:09:11,490 --> 00:09:15,600 ‫see all the advantages that Tailwind gives us. 170 00:09:15,600 --> 00:09:18,180 ‫So again, for me, the main advantage is 171 00:09:18,180 --> 00:09:19,530 ‫that we can write all 172 00:09:19,530 --> 00:09:22,140 ‫of this styling here without having to switch 173 00:09:22,140 --> 00:09:27,140 ‫between CSS and JSX or between these component files. 174 00:09:27,840 --> 00:09:29,760 ‫And also we don't have to come 175 00:09:29,760 --> 00:09:31,560 ‫up with all these class names 176 00:09:31,560 --> 00:09:34,200 ‫which is always a lot of work, 177 00:09:34,200 --> 00:09:36,210 ‫which might sound strange 178 00:09:36,210 --> 00:09:39,060 ‫but actually if you have a large application 179 00:09:39,060 --> 00:09:42,540 ‫then you need to come up with lots of class names 180 00:09:42,540 --> 00:09:46,680 ‫which will then create all sort of problems. 181 00:09:46,680 --> 00:09:51,390 ‫And again, here we can check out this amazing class 182 00:09:51,390 --> 00:09:56,220 ‫just type spacing here, or maybe space. 183 00:09:56,220 --> 00:09:57,660 ‫So space between. 184 00:09:57,660 --> 00:10:00,507 ‫This is actually the one that we are looking for. 185 00:10:00,507 --> 00:10:03,600 ‫And so here you can learn more about this 186 00:10:03,600 --> 00:10:05,703 ‫as always if you want. 187 00:10:06,690 --> 00:10:08,460 ‫And now just to finish 188 00:10:08,460 --> 00:10:11,260 ‫let's also talk about the display property 189 00:10:11,260 --> 00:10:16,260 ‫because debt is once again also part of the CSS box model. 190 00:10:18,090 --> 00:10:19,890 ‫So basically here for all of these 191 00:10:19,890 --> 00:10:23,130 ‫different display set to anything, 192 00:10:23,130 --> 00:10:26,130 ‫the class name is simply the property value. 193 00:10:26,130 --> 00:10:29,359 ‫So we have block flex inline 194 00:10:29,359 --> 00:10:34,359 ‫and the one that I'm interested in now is the hidden one. 195 00:10:34,740 --> 00:10:37,980 ‫So in this case, it's actually different from the value. 196 00:10:37,980 --> 00:10:41,740 ‫So display none is equivalent to the hidden class. 197 00:10:41,740 --> 00:10:46,460 ‫So what I want to do now here is to hide this user 198 00:10:46,460 --> 00:10:48,243 ‫on smaller screens. 199 00:10:50,070 --> 00:10:51,900 ‫So let's just come here 200 00:10:51,900 --> 00:10:55,500 ‫and let's use the hidden class, 201 00:10:55,500 --> 00:10:57,750 ‫and then it's gone. 202 00:10:57,750 --> 00:10:58,583 ‫Nice. 203 00:10:59,430 --> 00:11:02,820 ‫Now, notice how I just talked about smaller screens 204 00:11:02,820 --> 00:11:05,160 ‫which actually brings us to the topic 205 00:11:05,160 --> 00:11:07,350 ‫of responsive web design, 206 00:11:07,350 --> 00:11:10,080 ‫which is fundamental in Tailwind. 207 00:11:10,080 --> 00:11:11,520 ‫And so let's now move on 208 00:11:11,520 --> 00:11:14,553 ‫to the next video and start learning about that.