Tailwind Essentials: Adjusting Width

CSS Tailwind CSS
Transcript

English (Auto-generated)

the tailwind again. And we're going to talk about how to how we can you know, adjust the vid in the tailwind. So there is uh you know kind of very interesting things we have about the vivid in the tail wind, you can see that. So first of all the you know to apply the video, you need to go with the W. Okay. Um There is a thing that you can see that the W. Or you know when you put the margin, you get the m. Then you put the padding, you get the piece. So this is called utility first because you know there are classes specifically for the utility. So the W. W. Is a utility so it's exactly defining itself. So instead of instead of having a package or you know making it you know a kind of huge deal it simply gives you what size of video want. Maybe W. Zero which is absolutely we don't want, maybe W. P. X. Which we don't want. But also the W. 0.5 or W. One W. One is this size. I mean you know you can have different sizes, you can try W. Four W. Five, you can try W. Six. I'm gonna go with the W. Six for now And I simply need to apply the W6 to the specific column. For example, this one I saved it and then here you can see that the video is only six and this is actually literally destroying the look. So how far we can go. We can go till the 96. So let's just apply 96 for now the W 96 it would be big but you can see that not enough big. And also if I just make it call one for the whole grade so still it is the size is not you know suitable. Wait a minute and just let me check a thing in the grid. There is a great call. I'm sorry. Mhm. Not this one but great template column. Okay. Yeah, that's okay. I was just checking that when we put the one it is called or called, this should be called but it is called anyway so just cancel this one and I'm gonna go back to this and then Okay we got the 96. Now there is one more option you can go with the you know percentage, so maybe you want the 50% with, so you can go with the 12. So you know, it's it's literally telling itself that too from two you're going with one. So you know the half, this literally says half the half means 50%. If I simply apply this one, the w and then the you know, hyphen 1-1 slash two. So it's going to be the half, you can see that it's covering the half of the area. That's awesome. But if you go with the one by three, so absolutely one third, this is one, this is one third. You know, very simple logic. One third. If I simply go there and you know this is the one third which is Um 33 and if you go with the two third it is you know 66.66. So let's just make it to third, it would be a little more than the, you know we have because it's 66. So there are many values just like them, you can see that the 14, you can also have the 1/4 and which which should be enough. 25%, so that's obvious, I'm just gonna change 14 so there are values like that, you just need to refresh, you do not need to refresh by the way, you just got it Similarly you also you know you can apply you know different values. There are many values, you can just see that the 24, The here is to 4th 3rd, 3 4th. The 1/5 okay the 1/5 ultimately you know um the 20% the 2/5 is 40%. The 3/5 is 60%. Absolutely this is this is awesome and you need to know them. So let's just say 16 to 16%. So absolutely two sixes, 33%. But if we go with the 1 12 is 8% 2 12 is 16% and absolutely the 3 12 is 25%. So these are the values until the 1112, You can have the 1212 because To get the 1212 better, you just simply put the W. zero. So let's just go with this one The 11th of the 12th. So let's just try and it's gonna be something really big. I'm gonna go to the browser, you can see that, you can see that it's a lot You can see that it's 91. So 10 12 would be a little different. Let's just make it 10 12. And just double check the size is different now so you can apply all of these values. You also can if you just want the full vid you can apply with the W. Full. So you just need to put w. Full and then you're gonna have the full vid. Oh this is actually enough full that it's breaking the the original one this grid anyway. Okay. Uh Okay here so you know the boot straps So you can uh sorry you know the CSS then you can understand the you know if you just want the you know uh the V. H. This is also a unit in the CSS to have the full screen with it. So you can apply this one too and there is the W. Min W. Max if you want the minimum content. Maximum content. So you can apply these values. So I think this is good enough. There is a logic that defined if you want to use if you want to have the fix with you can have the WP X. Or maybe some values like them. I mean not these ones but the other ones, you can apply any of them like these ones but if you want, you know percentage values, you can go with this way. They've also created a beautiful beautiful charts. So you would be able to understand the chart, you know some easy ways. So this is a view ports with W W. Screen or you know, so I think we just had a discussion on the UID then if we talk about the minimum wage, we already had a discussion if you want the minimum wage it would absolutely cover the minimum wage and it would cover the maximum width. Okay, this one is the maximum bit thing actually. So in the maximum bit, if you want the max with as 20 R E. M it would be smaller but not more than that. So absolutely, it would work similarly, you know you have the sizes here to like, you know The max with max, it should be 100 or max width, should be a DRM or maybe max with you want something like you know the 36 RM or 42 RM. So you can apply them to, let's say I'm gonna apply this one so you have the opportunity to do that. I'm doing this and you can see that there is there is something I wanted the max with maximum in which we use when we are creating a responsive layout. So it is awesome in such cases. So I think this is quite simple and quite understandable that the max and the min with in the next video, we're going to talk about the height and then we're gonna move on until then stay tuned.
113 Views 0 Likes 0 Comments

Let's go over how to adjust the width of items using Tailwind.

Comment
Leave a comment (supports markdown format)