‫So next up let's style some
‫form input elements using Tailwind.
‫And let's start with this one right here.
‫So, with search order.
‫All right. So let's add our class name right here
‫and let's get immediately started.
‫So first of all, we want it to be completely rounded.
‫So like with this pill shape.
‫So exactly what we have right there.
‫Then let's add some padding to it.
‫So PX, let's say four, and PY, two.
‫And so to make it a bit smaller
‫let's make the text smaller.
‫So text, SM, for small.
‫And there we go.
‫Let's also give it a very faint yellow background
‫so that it blends in a little bit better
‫with that background color.
‫And next up, let's actually also style the placeholder.
‫So in CSS, we can easily style
‫the placeholder pseudo element.
‫And so in Tailwind we can do the same,
‫simply by Prefixing placeholder.
‫So basically we want the placeholder
‫to have a text
‫color of stone 400.
‫So making it a little bit darker.
‫Now I'm not sure if that actually worked.
‫Let's try something else.
‫Ah, and indeed it does work.
‫Also, let's actually make it a little bit wider.
‫So setting the width, so that's just W and then 28.
‫And so, well, that's actually pretty small.
‫But the reason for that is that, remember,
‫this is actually the style for the responsive layout.
‫And so here we need this to be really tiny
‫because otherwise it might not fit besides the logo there.
‫And then right in the next Media Query,
‫so at the next breakpoint, we can make it a bit bigger.
‫So, in the small breakpoint
‫let's immediately increase the width to 64.
‫Yeah, so that's a lot better.
‫Next up, let's then also make it a little bit bigger
‫as soon as we focus the element.
‫So let's make it then 72 wide.
‫And so, as we click, it gets a little bit bigger.
‫However, it does kind of jump from one state to the other,
‫and so that means that we need a transition here.
‫And let's this time actually use Transition Owl
‫and let's set the duration
‫again to 300 milliseconds.
‫And that's a lot better.
‫And now next up, let's take care of that focus ring.
‫So let's first get rid of that. So focus,
‫outline none, and then focus.
‫Let's use the ring.
‫Let's give it a color.
‫So, let's make it yellow 500 this time actually
‫so that it stands out from the background.
‫So, let's try this out.
‫And this is looking quite nice.
‫Let's give this maybe some opacity here
‫so that we can try to play around with another color here.
‫So ring opacity 50,
‫so to make it a little bit more subtle,
‫so a nice but subtle effect.
‫So I think this looks really nice.
‫Now there's just one small problem,
‫which is if this is really tiny,
‫then if we now click here then it becomes
‫really big and messes up the entire layout.
‫So we need to fix that.
‫So, basically, we only want this part here to happen
‫at the small break point.
‫So only after that break point, this should happen.
‫And that's no problem at all
‫because we can actually prefix all of this
‫also with the small breakpoint.
‫So this looks now even more confusing
‫because now we have the small (unspecified) focus
‫and (unspecified) class
‫but that's just perfectly valid in Tailwind.
‫So now if we click here, then nothing happens.
‫But then, as soon as we are here in this bigger breakpoint,
‫so at this bigger view port width,
‫then that starts working again.
‫Great. So we successfully styled this form input element.
‫And so now let's go ahead to this form again
‫and style these other ones.
‫So, where is that?
‫Yeah, right here.
‫So let's do it here in the address for now.
‫And let's again, first give it the completely round corners
‫and let's make it more visible again.
‫And now we want to create some contrast here
‫between the field and the background.
‫So we want this to become a bit more visible.
‫So, let's add a border.
‫And this one is simply one pixel.
‫So, if we don't write any number here
‫then by default it's just one pixel.
‫And then let's give it some color.
‫So border stone 200, let's say.
‫And then also, as always, some space.
‫So some padding here vertically
‫and some padding horizontally
‫or, actually, the other way around.
‫Nice. And now we could go ahead and copy
‫some of the styles that we just wrote earlier,
‫but instead let's just keep going here
‫and just write the code.
‫So again, making it a bit smaller here
‫giving it a transition.
‫So transition all, setting the duration to 300
‫and also style the placeholder.
‫So let's say text stone 400.
‫And actually there isn't even any placeholder here
‫so I'm not sure why I did that,
‫but I guess it can not hurt, also.
‫The next, let's get rid of that focus.
‫So outline none, and instead,
‫let's bring back our focus ring.
‫And then also giving it the color of yellow 400.
‫All right, and this looks already a lot better.
‫So this one compared to this one.
‫Now what I also want to do is to actually
‫give it the full width of the form.
‫So, let's do width full, which is exactly the width of 100%.
‫So then it fills up the entire form.
‫So, at this point, it doesn't look so nice
‫but we will take care
‫of styling the page and the form itself later.
‫What matters is that, of course,
‫once the page becomes bigger,
‫then all of this stays nicely in the center.
‫All right. And also as we go bigger,
‫let's increase the field also a little bit more.
‫So from the medium break point on,
‫let's have the padding X set to six
‫and then in the wide direction, two, three.
‫And here, I forgot the prefix,
‫which was caught actually by the prettier extension.
‫So the prettier plugin that we installed earlier.
‫So, that's really, really helpful
‫because it just caught a small bug for me here.
‫And that's actually it.
‫So I could now go ahead
‫and copy this entire thing right here into this input.
‫So, also this one and this one,
‫but actually I will show you a way
‫of reusing these classes here in the next lecture.
‫And so for now, let's just leave it like this
‫and not style these ones yet.
‫So the only one that I want to style now
‫to finish is this checkbox right there.
‫So, let's go there. Add a class name.
‫And the way we do this is to define a height and width.
‫So let's say height of six, which let's see what that is.
‫So, 24 pixels. Looks great.
‫Then it should have the same width.
‫And then here we can use the accent class.
‫So, the accent, which allow us to
‫also specify a color, which will then
‫style the input like this.
‫So basically, what this does is to set the accent color,
‫which is a pretty modern CSS property,
‫which, well, then makes our style box
‫or our checkbox look like that.
‫And then let's grab these focus styles from here.
‫With the only difference that,
‫since the focus ring now has the same color,
‫it needs some space here.
‫So when there is a focus,
‫then make the ring offset to two.
‫Beautiful. And of course, again,
‫all these styling issues that still remain here,
‫we will take care of them
‫once we actually style this entire page.
‫But here, we were just worried
‫about actually styling these form elements.