1 00:00:01,170 --> 00:00:04,863 ‫Next up, let's do some basic text styling. 2 00:00:06,090 --> 00:00:07,980 ‫But before we go do that, 3 00:00:07,980 --> 00:00:10,560 ‫I actually wanted to show you something else 4 00:00:10,560 --> 00:00:12,210 ‫in the previous lecture, 5 00:00:12,210 --> 00:00:14,310 ‫but let's now go do that. 6 00:00:14,310 --> 00:00:18,210 ‫Which is that of course we cannot only use 7 00:00:18,210 --> 00:00:21,750 ‫these Tailwind classes right here in the JSX, 8 00:00:21,750 --> 00:00:25,200 ‫but also inside our HTML. 9 00:00:25,200 --> 00:00:29,400 ‫So for example, we can add some classes here to the body 10 00:00:29,400 --> 00:00:32,880 ‫that we want every element on the page to inherit 11 00:00:32,880 --> 00:00:36,990 ‫or that we want to set on the entire body element. 12 00:00:36,990 --> 00:00:40,050 ‫So typically that is like a background color, 13 00:00:40,050 --> 00:00:44,400 ‫or a text color that we want the entire page to inherit. 14 00:00:44,400 --> 00:00:46,800 ‫So that's pretty standard CSS 15 00:00:46,800 --> 00:00:50,700 ‫which I'm assuming at this point that you know about. 16 00:00:50,700 --> 00:00:52,830 ‫So throughout this entire section, 17 00:00:52,830 --> 00:00:55,410 ‫I'm assuming that you are familiar at least 18 00:00:55,410 --> 00:00:57,930 ‫with the fundamentals of CSS. 19 00:00:57,930 --> 00:01:01,080 ‫Cause otherwise, without knowing CSS 20 00:01:01,080 --> 00:01:05,070 ‫it's gonna be very hard to understand Tailwind. 21 00:01:05,070 --> 00:01:09,570 ‫But anyway, here we do not use the class name, 22 00:01:09,570 --> 00:01:13,500 ‫but just class, which is regular HTML. 23 00:01:13,500 --> 00:01:18,500 ‫And so let's give this here a background color of stone 100. 24 00:01:21,930 --> 00:01:25,980 ‫And so you see that it turned a little bit darker here, 25 00:01:25,980 --> 00:01:27,270 ‫so a bit gray. 26 00:01:27,270 --> 00:01:32,030 ‫And then let's also give it the text color of 27 00:01:33,420 --> 00:01:36,480 ‫also stone and 700. 28 00:01:36,480 --> 00:01:40,710 ‫And so notice how this element, this element 29 00:01:40,710 --> 00:01:42,990 ‫now have exactly that color. 30 00:01:42,990 --> 00:01:46,050 ‫So they inherited this gray color right here 31 00:01:46,050 --> 00:01:47,673 ‫from the body element. 32 00:01:48,690 --> 00:01:51,120 ‫And so then we can actually remove that 33 00:01:51,120 --> 00:01:53,760 ‫from here, from the H1. 34 00:01:53,760 --> 00:01:56,490 ‫Great, so we already learned a little bit 35 00:01:56,490 --> 00:02:00,780 ‫about formatting text actually, or we didn't really learn 36 00:02:00,780 --> 00:02:04,920 ‫but we already used it in the first Tailwind lecture. 37 00:02:04,920 --> 00:02:08,340 ‫So we learned that we can basically position text 38 00:02:08,340 --> 00:02:10,500 ‫with text dash center, 39 00:02:10,500 --> 00:02:14,040 ‫or we can also use text dash right, 40 00:02:14,040 --> 00:02:17,010 ‫to center it to the right, or to the left, 41 00:02:17,010 --> 00:02:18,780 ‫which is not really necessary 42 00:02:18,780 --> 00:02:21,480 ‫because that's also the default. 43 00:02:21,480 --> 00:02:22,800 ‫Now, the most common thing 44 00:02:22,800 --> 00:02:24,720 ‫I would argue that we do with text 45 00:02:24,720 --> 00:02:29,010 ‫is to define the text size and the text weight, 46 00:02:29,010 --> 00:02:30,990 ‫or the font weight. 47 00:02:30,990 --> 00:02:34,320 ‫And so let's again come to our documentation 48 00:02:34,320 --> 00:02:37,860 ‫and then here we have all the most important classes 49 00:02:37,860 --> 00:02:39,810 ‫regarding typography. 50 00:02:39,810 --> 00:02:42,510 ‫And so let's start with the font size. 51 00:02:42,510 --> 00:02:44,910 ‫And as always, you can also just search, 52 00:02:44,910 --> 00:02:49,740 ‫for example, for text size right here, 53 00:02:49,740 --> 00:02:51,780 ‫or actually it should be font size 54 00:02:51,780 --> 00:02:55,713 ‫because that's the name of the CSS property. 55 00:02:58,890 --> 00:03:02,280 ‫So here you have all the classes that we can use 56 00:03:02,280 --> 00:03:05,550 ‫in order to style the size of text. 57 00:03:05,550 --> 00:03:10,550 ‫So text, extra small, small base, then large, extra large, 58 00:03:10,680 --> 00:03:13,770 ‫and then all the way to nine xl. 59 00:03:13,770 --> 00:03:17,370 ‫So which then gives us this font size of eight rem. 60 00:03:17,370 --> 00:03:20,700 ‫And notice how this not only sets the front size 61 00:03:20,700 --> 00:03:22,770 ‫but also the line height, 62 00:03:22,770 --> 00:03:27,090 ‫which immediately makes the design look a bit better. 63 00:03:27,090 --> 00:03:29,130 ‫Then let's see what else we have here. 64 00:03:29,130 --> 00:03:31,320 ‫But these are really just examples. 65 00:03:31,320 --> 00:03:33,450 ‫So usually the most important thing 66 00:03:33,450 --> 00:03:35,130 ‫is right here at the top. 67 00:03:35,130 --> 00:03:39,453 ‫And so this is how we got this text extra large right here. 68 00:03:40,620 --> 00:03:42,870 ‫Now this class name was for me 69 00:03:42,870 --> 00:03:44,670 ‫one of the more confusing ones, 70 00:03:44,670 --> 00:03:48,300 ‫because font size is the name of the CSS property. 71 00:03:48,300 --> 00:03:52,080 ‫But then in Tailwind it is called text for some reason. 72 00:03:52,080 --> 00:03:54,060 ‫But again, after some time 73 00:03:54,060 --> 00:03:57,180 ‫you will just automatically memorize this. 74 00:03:57,180 --> 00:03:59,430 ‫Then for the font weight, 75 00:03:59,430 --> 00:04:04,430 ‫the property is actually called font and then something. 76 00:04:04,800 --> 00:04:06,600 ‫So let's again search for that. 77 00:04:06,600 --> 00:04:08,973 ‫And even better, let's do it right here. 78 00:04:09,870 --> 00:04:13,170 ‫So font weight, and here we go. 79 00:04:13,170 --> 00:04:16,860 ‫So instead of having to mess with these different numbers, 80 00:04:16,860 --> 00:04:18,960 ‫now we just have names. 81 00:04:18,960 --> 00:04:21,450 ‫So font, semi-bold for example, 82 00:04:21,450 --> 00:04:24,903 ‫which is the one that we used for H1 there. 83 00:04:26,400 --> 00:04:28,983 ‫So this one right here is semi-bold. 84 00:04:30,180 --> 00:04:33,030 ‫And so I think that here in this component 85 00:04:33,030 --> 00:04:35,010 ‫we are actually finished. 86 00:04:35,010 --> 00:04:37,860 ‫So let's come here to the CartOverview again, 87 00:04:37,860 --> 00:04:41,070 ‫and let's do some changes here as well. 88 00:04:41,070 --> 00:04:45,600 ‫So first, let's make this text here also semi-bold. 89 00:04:45,600 --> 00:04:49,380 ‫And so as we start typing out these classes, 90 00:04:49,380 --> 00:04:53,910 ‫we will slowly start memorizing them automatically. 91 00:04:53,910 --> 00:04:57,150 ‫And finally, let's also make all of this uppercase 92 00:04:57,150 --> 00:04:59,430 ‫so both the link and the paragraph, 93 00:04:59,430 --> 00:05:02,790 ‫and so we can do that here in the parent element. 94 00:05:02,790 --> 00:05:04,980 ‫And so to make text uppercase, 95 00:05:04,980 --> 00:05:08,223 ‫all we have to do is the uppercase class. 96 00:05:09,600 --> 00:05:11,130 ‫Yep, that worked. 97 00:05:11,130 --> 00:05:14,040 ‫And so let's move on to the header. 98 00:05:14,040 --> 00:05:17,280 ‫And here, let's do actually the same thing. 99 00:05:17,280 --> 00:05:21,420 ‫So make this here upper case as well. 100 00:05:21,420 --> 00:05:23,670 ‫And here in this link, 101 00:05:23,670 --> 00:05:28,670 ‫I now want to also give it some letter spacing. 102 00:05:29,850 --> 00:05:32,730 ‫So let's try to see what happens 103 00:05:32,730 --> 00:05:35,193 ‫if we start typing letter spacing. 104 00:05:36,090 --> 00:05:38,370 ‫Well, nothing really happens, 105 00:05:38,370 --> 00:05:40,920 ‫while for example the uppercase class name 106 00:05:40,920 --> 00:05:42,480 ‫is pretty intuitive. 107 00:05:42,480 --> 00:05:44,130 ‫So even without knowing it, 108 00:05:44,130 --> 00:05:46,470 ‫maybe we could start writing uppercase 109 00:05:46,470 --> 00:05:50,850 ‫and then we would start seeing the auto complete coming on. 110 00:05:50,850 --> 00:05:53,523 ‫While actually that's not happening here. 111 00:05:54,840 --> 00:05:57,153 ‫Let's try that again after saving, 112 00:05:58,230 --> 00:06:01,860 ‫well, that's not really working for some reason. 113 00:06:01,860 --> 00:06:05,760 ‫Well, maybe I need to close my VS Code, and restart it, 114 00:06:05,760 --> 00:06:07,233 ‫but I'm not gonna do that. 115 00:06:08,100 --> 00:06:12,240 ‫But anyway, the class name for letter spacing 116 00:06:12,240 --> 00:06:14,250 ‫is a bit confusing. 117 00:06:14,250 --> 00:06:17,340 ‫So for me, that was one of the hardest ones. 118 00:06:17,340 --> 00:06:21,210 ‫And so let's just search for that here. 119 00:06:21,210 --> 00:06:26,043 ‫And so here we have the actual name, which is this tracking. 120 00:06:27,000 --> 00:06:30,123 ‫And so let's try this widest one. 121 00:06:34,410 --> 00:06:39,120 ‫So tracking widest and nice. 122 00:06:39,120 --> 00:06:42,663 ‫So at this, we got some space here between our letters. 123 00:06:43,890 --> 00:06:46,620 ‫Now notice how this tracking that we just used 124 00:06:46,620 --> 00:06:49,080 ‫is actually the highest one. 125 00:06:49,080 --> 00:06:51,720 ‫So it's the widest one that we can use. 126 00:06:51,720 --> 00:06:53,583 ‫But what if we want more? 127 00:06:55,800 --> 00:06:58,203 ‫Well, let's come down here. 128 00:06:59,820 --> 00:07:02,133 ‫So all of this is not really important, 129 00:07:03,000 --> 00:07:06,990 ‫at least not for now, because what we're concerned with here 130 00:07:06,990 --> 00:07:10,590 ‫right now is to give this year an arbitrary value. 131 00:07:10,590 --> 00:07:13,140 ‫So some other value that is not covered 132 00:07:13,140 --> 00:07:15,990 ‫by one of the Tailwind classes. 133 00:07:15,990 --> 00:07:17,460 ‫So in this case, 134 00:07:17,460 --> 00:07:22,460 ‫we can instead of defining this keyword here, 135 00:07:22,590 --> 00:07:26,010 ‫use the square brackets and then place any value 136 00:07:26,010 --> 00:07:27,690 ‫that we want in here. 137 00:07:27,690 --> 00:07:31,140 ‫So that can be pixels or rems, or whatever we want. 138 00:07:31,140 --> 00:07:34,770 ‫So let's say we wanted five pixels. 139 00:07:34,770 --> 00:07:38,313 ‫And so you see that then changed to five pixels, 140 00:07:39,150 --> 00:07:43,470 ‫or we can say also two rem like this. 141 00:07:43,470 --> 00:07:46,263 ‫And then we would get this huge space. 142 00:07:47,430 --> 00:07:51,150 ‫Now, okay, so that's not really so relevant, 143 00:07:51,150 --> 00:07:52,980 ‫and shouldn't be used all the time 144 00:07:52,980 --> 00:07:56,280 ‫but it's nice to know that this works in Tailwind. 145 00:07:56,280 --> 00:07:59,250 ‫And of course it doesn't only work with the tracking 146 00:07:59,250 --> 00:08:01,680 ‫where it's not really that important, 147 00:08:01,680 --> 00:08:06,680 ‫but it also works for example here with the text size. 148 00:08:06,840 --> 00:08:09,840 ‫So for example here we could also say text 149 00:08:09,840 --> 00:08:14,520 ‫should be 100 pixels, then it would become huge. 150 00:08:14,520 --> 00:08:17,850 ‫So even though there is no actual Tailwind class 151 00:08:17,850 --> 00:08:19,653 ‫for these 100 pixels. 152 00:08:20,580 --> 00:08:23,550 ‫So there is something similar maybe 96 pixels 153 00:08:23,550 --> 00:08:25,140 ‫or something like that. 154 00:08:25,140 --> 00:08:28,680 ‫But something truly huge, let's say we wanted 300, 155 00:08:28,680 --> 00:08:32,670 ‫then we would really have to use like this escape hatch. 156 00:08:32,670 --> 00:08:34,500 ‫So this is basically an escape hatch 157 00:08:34,500 --> 00:08:36,960 ‫where we can escape the predefined 158 00:08:36,960 --> 00:08:39,870 ‫in more rigid classes of Tailwind. 159 00:08:39,870 --> 00:08:42,300 ‫But most of the time we shouldn't do this 160 00:08:42,300 --> 00:08:46,020 ‫and just stick to the classes that Tailwind gives us. 161 00:08:46,020 --> 00:08:50,070 ‫99% of the cases, they are more than enough. 162 00:08:50,070 --> 00:08:51,300 ‫And now just to finish, 163 00:08:51,300 --> 00:08:55,260 ‫I want to also style this user right here. 164 00:08:55,260 --> 00:08:57,420 ‫So let's actually create a new component 165 00:08:57,420 --> 00:09:00,303 ‫here in the user feature folder. 166 00:09:07,200 --> 00:09:12,200 ‫And then here, let's for now just hard code my name again. 167 00:09:12,480 --> 00:09:16,263 ‫But later on this will actually come from Redux. 168 00:09:17,460 --> 00:09:20,790 ‫So here let's now include that. 169 00:09:20,790 --> 00:09:23,433 ‫So username like this, 170 00:09:26,190 --> 00:09:28,863 ‫and then let's just style it a little bit. 171 00:09:31,260 --> 00:09:33,570 ‫So let's make the text smaller, 172 00:09:33,570 --> 00:09:38,313 ‫so it text-sm and also make it semi-bold again. 173 00:09:39,330 --> 00:09:42,120 ‫So this time we get the auto completion, 174 00:09:42,120 --> 00:09:44,823 ‫and that is then really, really helpful. 175 00:09:46,110 --> 00:09:49,170 ‫Now, okay and with this, we have styled here 176 00:09:49,170 --> 00:09:51,930 ‫most of the text that is visible right now. 177 00:09:51,930 --> 00:09:55,350 ‫Of course, we still have all these other pages to style 178 00:09:55,350 --> 00:09:57,483 ‫but we will leave that for a bit later.