1 00:00:01,140 --> 00:00:04,080 ‫So next up let's style some 2 00:00:04,080 --> 00:00:07,563 ‫form input elements using Tailwind. 3 00:00:08,790 --> 00:00:12,420 ‫And let's start with this one right here. 4 00:00:12,420 --> 00:00:14,523 ‫So, with search order. 5 00:00:15,870 --> 00:00:20,490 ‫All right. So let's add our class name right here 6 00:00:20,490 --> 00:00:23,370 ‫and let's get immediately started. 7 00:00:23,370 --> 00:00:27,780 ‫So first of all, we want it to be completely rounded. 8 00:00:27,780 --> 00:00:30,150 ‫So like with this pill shape. 9 00:00:30,150 --> 00:00:33,210 ‫So exactly what we have right there. 10 00:00:33,210 --> 00:00:36,180 ‫Then let's add some padding to it. 11 00:00:36,180 --> 00:00:40,953 ‫So PX, let's say four, and PY, two. 12 00:00:42,300 --> 00:00:44,280 ‫And so to make it a bit smaller 13 00:00:44,280 --> 00:00:46,800 ‫let's make the text smaller. 14 00:00:46,800 --> 00:00:49,770 ‫So text, SM, for small. 15 00:00:49,770 --> 00:00:51,810 ‫And there we go. 16 00:00:51,810 --> 00:00:56,700 ‫Let's also give it a very faint yellow background 17 00:00:56,700 --> 00:00:58,890 ‫so that it blends in a little bit better 18 00:00:58,890 --> 00:01:01,020 ‫with that background color. 19 00:01:01,020 --> 00:01:05,400 ‫And next up, let's actually also style the placeholder. 20 00:01:05,400 --> 00:01:08,160 ‫So in CSS, we can easily style 21 00:01:08,160 --> 00:01:10,500 ‫the placeholder pseudo element. 22 00:01:10,500 --> 00:01:12,810 ‫And so in Tailwind we can do the same, 23 00:01:12,810 --> 00:01:15,870 ‫simply by Prefixing placeholder. 24 00:01:15,870 --> 00:01:18,030 ‫So basically we want the placeholder 25 00:01:18,030 --> 00:01:19,750 ‫to have a text 26 00:01:20,670 --> 00:01:24,390 ‫color of stone 400. 27 00:01:24,390 --> 00:01:26,970 ‫So making it a little bit darker. 28 00:01:26,970 --> 00:01:28,860 ‫Now I'm not sure if that actually worked. 29 00:01:28,860 --> 00:01:30,690 ‫Let's try something else. 30 00:01:30,690 --> 00:01:33,390 ‫Ah, and indeed it does work. 31 00:01:33,390 --> 00:01:36,060 ‫Also, let's actually make it a little bit wider. 32 00:01:36,060 --> 00:01:40,383 ‫So setting the width, so that's just W and then 28. 33 00:01:42,480 --> 00:01:46,350 ‫And so, well, that's actually pretty small. 34 00:01:46,350 --> 00:01:49,440 ‫But the reason for that is that, remember, 35 00:01:49,440 --> 00:01:54,440 ‫this is actually the style for the responsive layout. 36 00:01:55,110 --> 00:01:58,050 ‫And so here we need this to be really tiny 37 00:01:58,050 --> 00:02:02,580 ‫because otherwise it might not fit besides the logo there. 38 00:02:02,580 --> 00:02:06,060 ‫And then right in the next Media Query, 39 00:02:06,060 --> 00:02:09,363 ‫so at the next breakpoint, we can make it a bit bigger. 40 00:02:11,370 --> 00:02:13,050 ‫So, in the small breakpoint 41 00:02:13,050 --> 00:02:16,803 ‫let's immediately increase the width to 64. 42 00:02:21,000 --> 00:02:23,850 ‫Yeah, so that's a lot better. 43 00:02:23,850 --> 00:02:26,940 ‫Next up, let's then also make it a little bit bigger 44 00:02:26,940 --> 00:02:30,180 ‫as soon as we focus the element. 45 00:02:30,180 --> 00:02:33,423 ‫So let's make it then 72 wide. 46 00:02:34,530 --> 00:02:37,863 ‫And so, as we click, it gets a little bit bigger. 47 00:02:40,680 --> 00:02:44,190 ‫However, it does kind of jump from one state to the other, 48 00:02:44,190 --> 00:02:48,690 ‫and so that means that we need a transition here. 49 00:02:48,690 --> 00:02:52,050 ‫And let's this time actually use Transition Owl 50 00:02:52,050 --> 00:02:53,830 ‫and let's set the duration 51 00:02:54,870 --> 00:02:57,483 ‫again to 300 milliseconds. 52 00:02:59,340 --> 00:03:01,800 ‫And that's a lot better. 53 00:03:01,800 --> 00:03:06,630 ‫And now next up, let's take care of that focus ring. 54 00:03:06,630 --> 00:03:09,993 ‫So let's first get rid of that. So focus, 55 00:03:11,160 --> 00:03:14,343 ‫outline none, and then focus. 56 00:03:15,480 --> 00:03:17,430 ‫Let's use the ring. 57 00:03:17,430 --> 00:03:19,143 ‫Let's give it a color. 58 00:03:20,160 --> 00:03:25,160 ‫So, let's make it yellow 500 this time actually 59 00:03:25,920 --> 00:03:28,680 ‫so that it stands out from the background. 60 00:03:28,680 --> 00:03:30,810 ‫So, let's try this out. 61 00:03:30,810 --> 00:03:33,420 ‫And this is looking quite nice. 62 00:03:33,420 --> 00:03:36,210 ‫Let's give this maybe some opacity here 63 00:03:36,210 --> 00:03:40,710 ‫so that we can try to play around with another color here. 64 00:03:40,710 --> 00:03:43,993 ‫So ring opacity 50, 65 00:03:47,910 --> 00:03:51,090 ‫so to make it a little bit more subtle, 66 00:03:51,090 --> 00:03:53,430 ‫so a nice but subtle effect. 67 00:03:53,430 --> 00:03:55,833 ‫So I think this looks really nice. 68 00:03:57,874 --> 00:03:59,310 ‫Now there's just one small problem, 69 00:03:59,310 --> 00:04:02,340 ‫which is if this is really tiny, 70 00:04:02,340 --> 00:04:05,070 ‫then if we now click here then it becomes 71 00:04:05,070 --> 00:04:08,580 ‫really big and messes up the entire layout. 72 00:04:08,580 --> 00:04:10,110 ‫So we need to fix that. 73 00:04:10,110 --> 00:04:15,110 ‫So, basically, we only want this part here to happen 74 00:04:15,570 --> 00:04:17,640 ‫at the small break point. 75 00:04:17,640 --> 00:04:20,850 ‫So only after that break point, this should happen. 76 00:04:20,850 --> 00:04:22,350 ‫And that's no problem at all 77 00:04:22,350 --> 00:04:25,350 ‫because we can actually prefix all of this 78 00:04:25,350 --> 00:04:28,740 ‫also with the small breakpoint. 79 00:04:28,740 --> 00:04:31,110 ‫So this looks now even more confusing 80 00:04:31,110 --> 00:04:34,410 ‫because now we have the small (unspecified) focus 81 00:04:34,410 --> 00:04:36,000 ‫and (unspecified) class 82 00:04:36,000 --> 00:04:40,500 ‫but that's just perfectly valid in Tailwind. 83 00:04:40,500 --> 00:04:44,130 ‫So now if we click here, then nothing happens. 84 00:04:44,130 --> 00:04:49,130 ‫But then, as soon as we are here in this bigger breakpoint, 85 00:04:49,590 --> 00:04:52,050 ‫so at this bigger view port width, 86 00:04:52,050 --> 00:04:54,633 ‫then that starts working again. 87 00:04:55,770 --> 00:05:00,480 ‫Great. So we successfully styled this form input element. 88 00:05:00,480 --> 00:05:04,440 ‫And so now let's go ahead to this form again 89 00:05:04,440 --> 00:05:06,273 ‫and style these other ones. 90 00:05:08,340 --> 00:05:09,873 ‫So, where is that? 91 00:05:11,670 --> 00:05:12,570 ‫Yeah, right here. 92 00:05:12,570 --> 00:05:15,723 ‫So let's do it here in the address for now. 93 00:05:16,980 --> 00:05:21,670 ‫And let's again, first give it the completely round corners 94 00:05:24,120 --> 00:05:27,000 ‫and let's make it more visible again. 95 00:05:27,000 --> 00:05:29,310 ‫And now we want to create some contrast here 96 00:05:29,310 --> 00:05:31,950 ‫between the field and the background. 97 00:05:31,950 --> 00:05:34,860 ‫So we want this to become a bit more visible. 98 00:05:34,860 --> 00:05:37,200 ‫So, let's add a border. 99 00:05:37,200 --> 00:05:40,230 ‫And this one is simply one pixel. 100 00:05:40,230 --> 00:05:42,570 ‫So, if we don't write any number here 101 00:05:42,570 --> 00:05:45,210 ‫then by default it's just one pixel. 102 00:05:45,210 --> 00:05:47,610 ‫And then let's give it some color. 103 00:05:47,610 --> 00:05:51,270 ‫So border stone 200, let's say. 104 00:05:51,270 --> 00:05:55,080 ‫And then also, as always, some space. 105 00:05:55,080 --> 00:05:57,990 ‫So some padding here vertically 106 00:05:57,990 --> 00:06:00,120 ‫and some padding horizontally 107 00:06:00,120 --> 00:06:01,870 ‫or, actually, the other way around. 108 00:06:03,600 --> 00:06:07,050 ‫Nice. And now we could go ahead and copy 109 00:06:07,050 --> 00:06:09,900 ‫some of the styles that we just wrote earlier, 110 00:06:09,900 --> 00:06:12,180 ‫but instead let's just keep going here 111 00:06:12,180 --> 00:06:14,280 ‫and just write the code. 112 00:06:14,280 --> 00:06:16,840 ‫So again, making it a bit smaller here 113 00:06:18,450 --> 00:06:20,490 ‫giving it a transition. 114 00:06:20,490 --> 00:06:25,093 ‫So transition all, setting the duration to 300 115 00:06:26,340 --> 00:06:28,773 ‫and also style the placeholder. 116 00:06:30,540 --> 00:06:33,210 ‫So let's say text stone 400. 117 00:06:33,210 --> 00:06:36,270 ‫And actually there isn't even any placeholder here 118 00:06:36,270 --> 00:06:39,180 ‫so I'm not sure why I did that, 119 00:06:39,180 --> 00:06:41,853 ‫but I guess it can not hurt, also. 120 00:06:43,110 --> 00:06:48,110 ‫The next, let's get rid of that focus. 121 00:06:48,150 --> 00:06:50,160 ‫So outline none, and instead, 122 00:06:50,160 --> 00:06:52,653 ‫let's bring back our focus ring. 123 00:06:56,009 --> 00:06:58,560 ‫And then also giving it the color of yellow 400. 124 00:07:02,400 --> 00:07:07,110 ‫All right, and this looks already a lot better. 125 00:07:07,110 --> 00:07:10,290 ‫So this one compared to this one. 126 00:07:10,290 --> 00:07:12,780 ‫Now what I also want to do is to actually 127 00:07:12,780 --> 00:07:15,900 ‫give it the full width of the form. 128 00:07:15,900 --> 00:07:20,900 ‫So, let's do width full, which is exactly the width of 100%. 129 00:07:23,550 --> 00:07:26,700 ‫So then it fills up the entire form. 130 00:07:26,700 --> 00:07:28,920 ‫So, at this point, it doesn't look so nice 131 00:07:28,920 --> 00:07:29,880 ‫but we will take care 132 00:07:29,880 --> 00:07:33,390 ‫of styling the page and the form itself later. 133 00:07:33,390 --> 00:07:35,640 ‫What matters is that, of course, 134 00:07:35,640 --> 00:07:37,620 ‫once the page becomes bigger, 135 00:07:37,620 --> 00:07:40,683 ‫then all of this stays nicely in the center. 136 00:07:43,230 --> 00:07:47,040 ‫All right. And also as we go bigger, 137 00:07:47,040 --> 00:07:50,430 ‫let's increase the field also a little bit more. 138 00:07:50,430 --> 00:07:53,070 ‫So from the medium break point on, 139 00:07:53,070 --> 00:07:58,070 ‫let's have the padding X set to six 140 00:07:59,100 --> 00:08:02,643 ‫and then in the wide direction, two, three. 141 00:08:03,570 --> 00:08:08,490 ‫And here, I forgot the prefix, 142 00:08:08,490 --> 00:08:13,380 ‫which was caught actually by the prettier extension. 143 00:08:13,380 --> 00:08:17,370 ‫So the prettier plugin that we installed earlier. 144 00:08:17,370 --> 00:08:19,830 ‫So, that's really, really helpful 145 00:08:19,830 --> 00:08:23,103 ‫because it just caught a small bug for me here. 146 00:08:24,600 --> 00:08:27,270 ‫And that's actually it. 147 00:08:27,270 --> 00:08:28,920 ‫So I could now go ahead 148 00:08:28,920 --> 00:08:33,920 ‫and copy this entire thing right here into this input. 149 00:08:34,320 --> 00:08:36,960 ‫So, also this one and this one, 150 00:08:36,960 --> 00:08:38,820 ‫but actually I will show you a way 151 00:08:38,820 --> 00:08:43,200 ‫of reusing these classes here in the next lecture. 152 00:08:43,200 --> 00:08:46,380 ‫And so for now, let's just leave it like this 153 00:08:46,380 --> 00:08:49,080 ‫and not style these ones yet. 154 00:08:49,080 --> 00:08:51,450 ‫So the only one that I want to style now 155 00:08:51,450 --> 00:08:54,573 ‫to finish is this checkbox right there. 156 00:08:55,830 --> 00:09:00,390 ‫So, let's go there. Add a class name. 157 00:09:00,390 --> 00:09:04,800 ‫And the way we do this is to define a height and width. 158 00:09:04,800 --> 00:09:09,800 ‫So let's say height of six, which let's see what that is. 159 00:09:09,810 --> 00:09:12,510 ‫So, 24 pixels. Looks great. 160 00:09:12,510 --> 00:09:14,700 ‫Then it should have the same width. 161 00:09:14,700 --> 00:09:18,270 ‫And then here we can use the accent class. 162 00:09:18,270 --> 00:09:22,020 ‫So, the accent, which allow us to 163 00:09:22,020 --> 00:09:24,810 ‫also specify a color, which will then 164 00:09:24,810 --> 00:09:28,680 ‫style the input like this. 165 00:09:28,680 --> 00:09:32,250 ‫So basically, what this does is to set the accent color, 166 00:09:32,250 --> 00:09:35,220 ‫which is a pretty modern CSS property, 167 00:09:35,220 --> 00:09:38,730 ‫which, well, then makes our style box 168 00:09:38,730 --> 00:09:41,610 ‫or our checkbox look like that. 169 00:09:41,610 --> 00:09:45,273 ‫And then let's grab these focus styles from here. 170 00:09:48,570 --> 00:09:50,160 ‫With the only difference that, 171 00:09:50,160 --> 00:09:52,800 ‫since the focus ring now has the same color, 172 00:09:52,800 --> 00:09:55,110 ‫it needs some space here. 173 00:09:55,110 --> 00:09:56,640 ‫So when there is a focus, 174 00:09:56,640 --> 00:10:01,640 ‫then make the ring offset to two. 175 00:10:04,920 --> 00:10:07,320 ‫Beautiful. And of course, again, 176 00:10:07,320 --> 00:10:10,530 ‫all these styling issues that still remain here, 177 00:10:10,530 --> 00:10:11,760 ‫we will take care of them 178 00:10:11,760 --> 00:10:14,700 ‫once we actually style this entire page. 179 00:10:14,700 --> 00:10:16,440 ‫But here, we were just worried 180 00:10:16,440 --> 00:10:19,413 ‫about actually styling these form elements.