1 00:00:01,080 --> 00:00:03,900 ‫The way in which responsive design works 2 00:00:03,900 --> 00:00:05,490 ‫in Tailwind is one 3 00:00:05,490 --> 00:00:07,770 ‫of the most fundamental things that you need 4 00:00:07,770 --> 00:00:10,230 ‫to understand about Tailwind. 5 00:00:10,230 --> 00:00:12,303 ‫And so let's now get to that. 6 00:00:13,920 --> 00:00:18,510 ‫So by default, Tailwind comes with five breakpoints 7 00:00:18,510 --> 00:00:21,660 ‫and these breakpoints are mobile first, 8 00:00:21,660 --> 00:00:25,410 ‫which means that they are min with media queries. 9 00:00:25,410 --> 00:00:27,210 ‫So let's again head over 10 00:00:27,210 --> 00:00:30,990 ‫to the documentation and check this out. 11 00:00:30,990 --> 00:00:33,700 ‫So this is one of the core concepts 12 00:00:34,980 --> 00:00:38,250 ‫and of course, you can read about all these other ones 13 00:00:38,250 --> 00:00:41,580 ‫but here we are focused on responsive design. 14 00:00:41,580 --> 00:00:44,430 ‫And so here we have these five min 15 00:00:44,430 --> 00:00:47,880 ‫with media queries that I was just talking about. 16 00:00:47,880 --> 00:00:50,730 ‫So again, these are mobile first. 17 00:00:50,730 --> 00:00:53,460 ‫This means that when we're working with Tailwind, 18 00:00:53,460 --> 00:00:55,830 ‫it's usually a good idea to start 19 00:00:55,830 --> 00:00:58,890 ‫by implementing the mobile layout. 20 00:00:58,890 --> 00:01:01,800 ‫So a mobile-first design. 21 00:01:01,800 --> 00:01:04,500 ‫So the way that this works in practice 22 00:01:04,500 --> 00:01:08,490 ‫is that we can prefix any of Tailwind's class names 23 00:01:08,490 --> 00:01:11,790 ‫with one of these breakpoint prefixes. 24 00:01:11,790 --> 00:01:15,120 ‫So this one is for the small media query. 25 00:01:15,120 --> 00:01:17,130 ‫So for all the viewport width 26 00:01:17,130 --> 00:01:21,120 ‫that are larger than 640 pixels. 27 00:01:21,120 --> 00:01:23,730 ‫And the same with these other ones. 28 00:01:23,730 --> 00:01:26,880 ‫But since this is a bit confusing to just understand 29 00:01:26,880 --> 00:01:30,033 ‫like this, let's again use it in practice. 30 00:01:30,930 --> 00:01:34,230 ‫So since Tailwind is mobile first, 31 00:01:34,230 --> 00:01:36,750 ‫all of these classes here will, by default, 32 00:01:36,750 --> 00:01:39,360 ‫apply for all the screen width. 33 00:01:39,360 --> 00:01:42,630 ‫And then if we use one of these prefixes, 34 00:01:42,630 --> 00:01:47,190 ‫that will then apply from that viewport width on. 35 00:01:47,190 --> 00:01:50,790 ‫So let's say that when the viewport is a bit larger, 36 00:01:50,790 --> 00:01:54,480 ‫we actually want more space here and here. 37 00:01:54,480 --> 00:01:57,480 ‫And so we can basically redefine this margin here 38 00:01:57,480 --> 00:01:59,940 ‫for one of these breakpoints. 39 00:01:59,940 --> 00:02:03,090 ‫So let's say that at the small breakpoint, 40 00:02:03,090 --> 00:02:05,580 ‫so sm, then colon, 41 00:02:05,580 --> 00:02:09,210 ‫we want margin Y to be 16. 42 00:02:09,210 --> 00:02:11,790 ‫And so as we give this a save now, 43 00:02:11,790 --> 00:02:15,330 ‫then you see that immediately something changed here. 44 00:02:15,330 --> 00:02:16,830 ‫But to really see this, 45 00:02:16,830 --> 00:02:19,560 ‫let's open up here at the responsive view 46 00:02:19,560 --> 00:02:22,893 ‫and then here we can change the width as with like. 47 00:02:23,730 --> 00:02:28,730 ‫So notice how here the small breakpoint starts at 640 48 00:02:29,100 --> 00:02:33,210 ‫and so whenever the width is greater than 640, 49 00:02:33,210 --> 00:02:37,320 ‫then this margin here will override the default one 50 00:02:37,320 --> 00:02:38,490 ‫that we have here. 51 00:02:38,490 --> 00:02:40,710 ‫And so that's what I was saying initially 52 00:02:40,710 --> 00:02:43,470 ‫so that these classes here, so the default ones 53 00:02:43,470 --> 00:02:47,640 ‫without any prefix are the mobile-first classes. 54 00:02:47,640 --> 00:02:49,020 ‫So they apply only 55 00:02:49,020 --> 00:02:51,933 ‫if there is no breakpoint overriding them. 56 00:02:52,950 --> 00:02:56,430 ‫So here as we approach then that other width, 57 00:02:56,430 --> 00:02:59,040 ‫then here we get this extra space. 58 00:02:59,040 --> 00:03:00,930 ‫So the margin is then increased 59 00:03:00,930 --> 00:03:03,420 ‫because then from there on, 60 00:03:03,420 --> 00:03:06,030 ‫this class here is going to be applied 61 00:03:06,030 --> 00:03:09,480 ‫and is overriding this one, all right? 62 00:03:09,480 --> 00:03:11,580 ‫So it's very important that straight 63 00:03:11,580 --> 00:03:15,180 ‫from the very beginning, you start getting into the habit 64 00:03:15,180 --> 00:03:19,560 ‫and into the mindset of building your layouts mobile first. 65 00:03:19,560 --> 00:03:20,550 ‫And then from there, 66 00:03:20,550 --> 00:03:23,730 ‫you can start adding these prefixes here 67 00:03:23,730 --> 00:03:26,310 ‫for different media queries. 68 00:03:26,310 --> 00:03:27,210 ‫Okay? 69 00:03:27,210 --> 00:03:30,960 ‫So now let's start also applying a bit more spacing here 70 00:03:30,960 --> 00:03:34,233 ‫in the header and also in the CartOverview. 71 00:03:35,970 --> 00:03:40,200 ‫So here also from the small viewport on, 72 00:03:40,200 --> 00:03:45,200 ‫let's change the padding in the X direction to six. 73 00:03:47,700 --> 00:03:51,300 ‫Give it a save, and there we get that additional space. 74 00:03:51,300 --> 00:03:55,440 ‫And as we get below that value, then that is gone. 75 00:03:55,440 --> 00:03:59,640 ‫And so then again, the default here is starting to apply. 76 00:03:59,640 --> 00:04:03,390 ‫So don't make the mistake that many developers make, 77 00:04:03,390 --> 00:04:07,110 ‫which is to think that this small here means 78 00:04:07,110 --> 00:04:10,920 ‫that this class is going to apply to small screens. 79 00:04:10,920 --> 00:04:12,660 ‫So that's not how it works. 80 00:04:12,660 --> 00:04:16,410 ‫How it works instead is that this class starts being applied 81 00:04:16,410 --> 00:04:18,480 ‫from this value on. 82 00:04:18,480 --> 00:04:23,480 ‫So from the small breakpoint on which is this 640 pixels. 83 00:04:23,790 --> 00:04:26,520 ‫But below that everything that we have here 84 00:04:26,520 --> 00:04:29,283 ‫without the prefix will be applied. 85 00:04:30,180 --> 00:04:33,480 ‫All right, let's also come to our cart 86 00:04:33,480 --> 00:04:35,673 ‫and do the same thing right here. 87 00:04:36,570 --> 00:04:39,570 ‫So here we have padding four on all sides, 88 00:04:39,570 --> 00:04:42,720 ‫but now let's also do something different here 89 00:04:42,720 --> 00:04:44,310 ‫on a small breakpoint. 90 00:04:44,310 --> 00:04:49,310 ‫So here we will have the px, so padding at X also set 91 00:04:50,580 --> 00:04:54,930 ‫to six, but as we save this, actually nothing happens. 92 00:04:54,930 --> 00:04:56,070 ‫And the reason for that 93 00:04:56,070 --> 00:05:00,960 ‫is that we do not have the unprefixed version of this. 94 00:05:00,960 --> 00:05:05,960 ‫So instead of p-4, let's do px-4 and py-4, 95 00:05:07,920 --> 00:05:10,980 ‫which is effectively the exact same thing. 96 00:05:10,980 --> 00:05:13,680 ‫But with this, this media query here 97 00:05:13,680 --> 00:05:16,083 ‫can then override only this part. 98 00:05:17,370 --> 00:05:19,470 ‫Well, still nothing happens. 99 00:05:19,470 --> 00:05:21,330 ‫Ah, but that's because I'm also here 100 00:05:21,330 --> 00:05:23,460 ‫at the wrong breakpoint. 101 00:05:23,460 --> 00:05:28,460 ‫So now here we have that extra space and to stay consistent, 102 00:05:28,830 --> 00:05:32,940 ‫let's also change this one, so small. 103 00:05:32,940 --> 00:05:37,940 ‫Then space-x-4, or actually that should be six, of course. 104 00:05:39,960 --> 00:05:41,790 ‫Four we already had. 105 00:05:41,790 --> 00:05:44,730 ‫And notice how these media queries here. 106 00:05:44,730 --> 00:05:48,150 ‫So the breakpoints will always get pushed to the end 107 00:05:48,150 --> 00:05:52,470 ‫of this clustering automatically by the Prettier extension 108 00:05:52,470 --> 00:05:55,683 ‫or the Prettier plugin that we installed earlier. 109 00:05:57,000 --> 00:05:59,670 ‫All right, so we did a few things here 110 00:05:59,670 --> 00:06:01,800 ‫on this small breakpoint. 111 00:06:01,800 --> 00:06:04,320 ‫Let's now also increase the text here 112 00:06:04,320 --> 00:06:06,810 ‫for another breakpoint. 113 00:06:06,810 --> 00:06:10,830 ‫So for the next one, so next up, we have the medium one, 114 00:06:10,830 --> 00:06:14,790 ‫which starts applying at 768 pixels. 115 00:06:14,790 --> 00:06:18,033 ‫So this basically here is to target tablets. 116 00:06:19,290 --> 00:06:23,460 ‫Now, if you took any of my HTML and CSS courses, 117 00:06:23,460 --> 00:06:28,080 ‫you will know that we should usually not target any devices 118 00:06:28,080 --> 00:06:31,710 ‫in our breakpoints, but instead, we should set breakpoints 119 00:06:31,710 --> 00:06:35,730 ‫at specific points where our design actually breaks. 120 00:06:35,730 --> 00:06:38,910 ‫So where there is some problems in our designs. 121 00:06:38,910 --> 00:06:42,480 ‫And so if you are using Tailwind in a real-world project, 122 00:06:42,480 --> 00:06:45,840 ‫you should actually customize these breakpoints. 123 00:06:45,840 --> 00:06:47,790 ‫So basically creating your own, 124 00:06:47,790 --> 00:06:51,460 ‫which should be explained somewhere down here in this page 125 00:06:53,160 --> 00:06:56,130 ‫or maybe not here. 126 00:06:56,130 --> 00:06:58,170 ‫Ah, but yeah, right here actually. 127 00:06:58,170 --> 00:07:01,080 ‫So you can customize your theme again 128 00:07:01,080 --> 00:07:03,010 ‫in the Tailwind config file 129 00:07:04,290 --> 00:07:07,770 ‫where you can then give it your own names. 130 00:07:07,770 --> 00:07:09,780 ‫So you could call them tablet, laptop 131 00:07:09,780 --> 00:07:13,920 ‫and desktop instead of just small, large, and medium. 132 00:07:13,920 --> 00:07:17,163 ‫And then also specify your own values here. 133 00:07:18,030 --> 00:07:21,360 ‫But here we are just going with stock Tailwind. 134 00:07:21,360 --> 00:07:23,730 ‫So just with all the default values. 135 00:07:23,730 --> 00:07:27,480 ‫So now let's increase the text here as soon 136 00:07:27,480 --> 00:07:30,540 ‫as we reach the medium breakpoint. 137 00:07:30,540 --> 00:07:33,750 ‫So let's actually first make the text a bit smaller, 138 00:07:33,750 --> 00:07:36,990 ‫so by default on all screens. 139 00:07:36,990 --> 00:07:39,690 ‫And so for that, let's use text-sm. 140 00:07:39,690 --> 00:07:41,310 ‫So text small. 141 00:07:41,310 --> 00:07:45,390 ‫And so yeah, with that the text just got small. 142 00:07:45,390 --> 00:07:48,543 ‫But then as we reach the medium break point, 143 00:07:52,530 --> 00:07:57,530 ‫so at medium, we want to put it back to text and then base 144 00:07:58,530 --> 00:08:01,473 ‫which is basically just the default text size. 145 00:08:02,490 --> 00:08:04,020 ‫And so let's now go 146 00:08:04,020 --> 00:08:07,380 ‫to that next breakpoint and indeed, 147 00:08:07,380 --> 00:08:09,603 ‫then our text gets larger. 148 00:08:11,520 --> 00:08:13,260 ‫Now, next up, let's also style 149 00:08:13,260 --> 00:08:16,770 ‫a little bit here this CreateUser. 150 00:08:16,770 --> 00:08:19,380 ‫So here we don't have any styles yet, 151 00:08:19,380 --> 00:08:21,540 ‫and so let's now change that. 152 00:08:21,540 --> 00:08:24,840 ‫So let's format this paragraph here a little bit 153 00:08:24,840 --> 00:08:28,023 ‫and let's start by adding some margin to the bottom. 154 00:08:29,250 --> 00:08:31,170 ‫Yeah, just like that. 155 00:08:31,170 --> 00:08:33,603 ‫Then let's make the text also small. 156 00:08:34,470 --> 00:08:39,240 ‫And this will actually look great on a mobile phone. 157 00:08:39,240 --> 00:08:42,540 ‫So I tested all of this out actually on a mobile phone 158 00:08:42,540 --> 00:08:44,430 ‫and it looked great. 159 00:08:44,430 --> 00:08:47,340 ‫So that's how I took all of these design decisions here, 160 00:08:47,340 --> 00:08:50,100 ‫which, of course, I cannot go through here. 161 00:08:50,100 --> 00:08:51,510 ‫So here we are just learning 162 00:08:51,510 --> 00:08:54,990 ‫how Tailwind works, not the exact decision 163 00:08:54,990 --> 00:08:58,590 ‫behind all of these styles, but anyway, 164 00:08:58,590 --> 00:09:01,330 ‫let's make the text a bit lighter also here 165 00:09:02,550 --> 00:09:05,340 ‫so that this one here stands out more. 166 00:09:05,340 --> 00:09:08,520 ‫And then just like with the other text below, 167 00:09:08,520 --> 00:09:11,010 ‫as soon as the screen gets larger, 168 00:09:11,010 --> 00:09:12,540 ‫so at the medium breakpoint, 169 00:09:12,540 --> 00:09:16,500 ‫we set the text back to the base text, 170 00:09:16,500 --> 00:09:19,503 ‫so basically to the normal text size. 171 00:09:20,820 --> 00:09:23,460 ‫And so let's see that happening. 172 00:09:23,460 --> 00:09:24,723 ‫And there it is. 173 00:09:26,160 --> 00:09:28,800 ‫Finally, let's just add a little bit. 174 00:09:28,800 --> 00:09:31,593 ‫So just one class here to this input. 175 00:09:32,910 --> 00:09:36,330 ‫So className, and we will have a whole lecture 176 00:09:36,330 --> 00:09:39,210 ‫about styling these input fields later. 177 00:09:39,210 --> 00:09:41,670 ‫But for now, the only thing that I want to do 178 00:09:41,670 --> 00:09:44,010 ‫is to increase the width here. 179 00:09:44,010 --> 00:09:46,470 ‫So that is also related to the box model, 180 00:09:46,470 --> 00:09:49,950 ‫which we talked about earlier, but let's just do that now. 181 00:09:49,950 --> 00:09:51,960 ‫So in order to change the width, 182 00:09:51,960 --> 00:09:56,700 ‫we can just write w and then the value for the width. 183 00:09:56,700 --> 00:10:01,700 ‫So let's say 72, which is again, not 72 pixels 184 00:10:01,950 --> 00:10:05,070 ‫but it is some value in the Tailwind scale. 185 00:10:05,070 --> 00:10:09,843 ‫So in this case, this just corresponds to 288 pixels. 186 00:10:11,040 --> 00:10:14,823 ‫Then we also could set the height, let's say to 10. 187 00:10:15,750 --> 00:10:19,533 ‫And so this will then set the height to 40 pixels. 188 00:10:20,460 --> 00:10:22,470 ‫That's not what we want here. 189 00:10:22,470 --> 00:10:24,480 ‫And so let's just keep it like this 190 00:10:24,480 --> 00:10:27,213 ‫and the rest of the styling we will do later. 191 00:10:28,170 --> 00:10:32,040 ‫Great, so we're making great progress here. 192 00:10:32,040 --> 00:10:34,830 ‫Next up, one of the most important things 193 00:10:34,830 --> 00:10:39,150 ‫we haven't talked about yet is basically building layouts. 194 00:10:39,150 --> 00:10:41,670 ‫So Flexbox and CSS Grid. 195 00:10:41,670 --> 00:10:44,430 ‫And so let's start talking about Flexbox 196 00:10:44,430 --> 00:10:46,173 ‫right in the next video.