There we go. So now if I switch back to Chrome and we give this a refresh, here's what we get. So you'll notice that because we set a display of flex up here, the browser is trying to fit as many of these items in a row as it possibly can. You'll notice that we did set a width of one-fourth, but that's kind of like telling it, in a best case scenario, I would like the width to be 25%. However, we got to get this all in a row, so we're going to take it as a suggestion, but if we need to shrink it in order to fit all of these items, then that's what we're going to do. All right, this is where flex-wrap comes into play.

All right, and there we go. So we have our first helper class here. But now, what if we want to say, well, it'd be useful to have a 25% width, but only for desktop-level devices? So this is where you have to think of the prefix you want to use. Now, something like Tailwind will use small, medium, and large. It might have an extra large. I can't quite remember. You can check your Tailwind's configuration for that. But other test frameworks will use something more traditional like mobile, tablet, desktop,

So if we were to grab even this first one here, give it a refresh, it's still set to a width of one-fourth, and that's because it's being applied everywhere. That specifies whether or not it should be applied. Let's wrap that in such a condition. We could say media, and if the minimum width is, I'm going to go low here just to make it easy, 576. That's more of like a medium breakpoint, but nonetheless, you get the idea. So if the browser width is at least 576 pixels, on that condition, I would like this following class to be available. All right, let's come back and give it a refresh.

That's the gist of a responsive helper. So now that you understand the basics, let's get rid of all of this, because something like Tailwind offers that out of the box. So let's bring it back to what we had before, give it a refresh. And now we have a four-column grid here. But maybe for mobile devices, we just want one column there. Maybe we want it to take up all of the space. Okay, no problem. So let's select all of the columns here, and now I'm going to add the large prefix. Now we're saying for large devices, I would like to apply a width of one-fourth.

So let's come back. On desktop, we have four columns. As we reduce to a tablet level, we have two columns. And now when we get to a mobile level, we have single columns. So an important thing to understand with Tailwind is it's mobile first. And what I mean by that is any class you apply will take effect for mobile all the way up to a widescreen level. For example, let's set a text-red for this first item here. Okay, what if you only want that color to be red for a large device? All right, you can say lg:text-red.

items. And if you want each of these to expand to take up all of the space, don't forget, let's select all of this, you could say flex: 1. So remember, there we're saying, okay, for each of these elements, you're allowed to flex to take up as much space as you possibly can. And if we have situations like, I don't think there's a flex-2 with Tailwind, let's see. No. Let's imagine there was though. Let's select Tailwind ourselves. Give it a refresh, okay.