‫The way in which responsive design works
‫in Tailwind is one
‫of the most fundamental things that you need
‫to understand about Tailwind.
‫And so let's now get to that.
‫So by default, Tailwind comes with five breakpoints
‫and these breakpoints are mobile first,
‫which means that they are min with media queries.
‫So let's again head over
‫to the documentation and check this out.
‫So this is one of the core concepts
‫and of course, you can read about all these other ones
‫but here we are focused on responsive design.
‫And so here we have these five min
‫with media queries that I was just talking about.
‫So again, these are mobile first.
‫This means that when we're working with Tailwind,
‫it's usually a good idea to start
‫by implementing the mobile layout.
‫So a mobile-first design.
‫So the way that this works in practice
‫is that we can prefix any of Tailwind's class names
‫with one of these breakpoint prefixes.
‫So this one is for the small media query.
‫So for all the viewport width
‫that are larger than 640 pixels.
‫And the same with these other ones.
‫But since this is a bit confusing to just understand
‫like this, let's again use it in practice.
‫So since Tailwind is mobile first,
‫all of these classes here will, by default,
‫apply for all the screen width.
‫And then if we use one of these prefixes,
‫that will then apply from that viewport width on.
‫So let's say that when the viewport is a bit larger,
‫we actually want more space here and here.
‫And so we can basically redefine this margin here
‫for one of these breakpoints.
‫So let's say that at the small breakpoint,
‫so sm, then colon,
‫we want margin Y to be 16.
‫And so as we give this a save now,
‫then you see that immediately something changed here.
‫But to really see this,
‫let's open up here at the responsive view
‫and then here we can change the width as with like.
‫So notice how here the small breakpoint starts at 640
‫and so whenever the width is greater than 640,
‫then this margin here will override the default one
‫that we have here.
‫And so that's what I was saying initially
‫so that these classes here, so the default ones
‫without any prefix are the mobile-first classes.
‫So they apply only
‫if there is no breakpoint overriding them.
‫So here as we approach then that other width,
‫then here we get this extra space.
‫So the margin is then increased
‫because then from there on,
‫this class here is going to be applied
‫and is overriding this one, all right?
‫So it's very important that straight
‫from the very beginning, you start getting into the habit
‫and into the mindset of building your layouts mobile first.
‫And then from there,
‫you can start adding these prefixes here
‫for different media queries.
‫Okay?
‫So now let's start also applying a bit more spacing here
‫in the header and also in the CartOverview.
‫So here also from the small viewport on,
‫let's change the padding in the X direction to six.
‫Give it a save, and there we get that additional space.
‫And as we get below that value, then that is gone.
‫And so then again, the default here is starting to apply.
‫So don't make the mistake that many developers make,
‫which is to think that this small here means
‫that this class is going to apply to small screens.
‫So that's not how it works.
‫How it works instead is that this class starts being applied
‫from this value on.
‫So from the small breakpoint on which is this 640 pixels.
‫But below that everything that we have here
‫without the prefix will be applied.
‫All right, let's also come to our cart
‫and do the same thing right here.
‫So here we have padding four on all sides,
‫but now let's also do something different here
‫on a small breakpoint.
‫So here we will have the px, so padding at X also set
‫to six, but as we save this, actually nothing happens.
‫And the reason for that
‫is that we do not have the unprefixed version of this.
‫So instead of p-4, let's do px-4 and py-4,
‫which is effectively the exact same thing.
‫But with this, this media query here
‫can then override only this part.
‫Well, still nothing happens.
‫Ah, but that's because I'm also here
‫at the wrong breakpoint.
‫So now here we have that extra space and to stay consistent,
‫let's also change this one, so small.
‫Then space-x-4, or actually that should be six, of course.
‫Four we already had.
‫And notice how these media queries here.
‫So the breakpoints will always get pushed to the end
‫of this clustering automatically by the Prettier extension
‫or the Prettier plugin that we installed earlier.
‫All right, so we did a few things here
‫on this small breakpoint.
‫Let's now also increase the text here
‫for another breakpoint.
‫So for the next one, so next up, we have the medium one,
‫which starts applying at 768 pixels.
‫So this basically here is to target tablets.
‫Now, if you took any of my HTML and CSS courses,
‫you will know that we should usually not target any devices
‫in our breakpoints, but instead, we should set breakpoints
‫at specific points where our design actually breaks.
‫So where there is some problems in our designs.
‫And so if you are using Tailwind in a real-world project,
‫you should actually customize these breakpoints.
‫So basically creating your own,
‫which should be explained somewhere down here in this page
‫or maybe not here.
‫Ah, but yeah, right here actually.
‫So you can customize your theme again
‫in the Tailwind config file
‫where you can then give it your own names.
‫So you could call them tablet, laptop
‫and desktop instead of just small, large, and medium.
‫And then also specify your own values here.
‫But here we are just going with stock Tailwind.
‫So just with all the default values.
‫So now let's increase the text here as soon
‫as we reach the medium breakpoint.
‫So let's actually first make the text a bit smaller,
‫so by default on all screens.
‫And so for that, let's use text-sm.
‫So text small.
‫And so yeah, with that the text just got small.
‫But then as we reach the medium break point,
‫so at medium, we want to put it back to text and then base
‫which is basically just the default text size.
‫And so let's now go
‫to that next breakpoint and indeed,
‫then our text gets larger.
‫Now, next up, let's also style
‫a little bit here this CreateUser.
‫So here we don't have any styles yet,
‫and so let's now change that.
‫So let's format this paragraph here a little bit
‫and let's start by adding some margin to the bottom.
‫Yeah, just like that.
‫Then let's make the text also small.
‫And this will actually look great on a mobile phone.
‫So I tested all of this out actually on a mobile phone
‫and it looked great.
‫So that's how I took all of these design decisions here,
‫which, of course, I cannot go through here.
‫So here we are just learning
‫how Tailwind works, not the exact decision
‫behind all of these styles, but anyway,
‫let's make the text a bit lighter also here
‫so that this one here stands out more.
‫And then just like with the other text below,
‫as soon as the screen gets larger,
‫so at the medium breakpoint,
‫we set the text back to the base text,
‫so basically to the normal text size.
‫And so let's see that happening.
‫And there it is.
‫Finally, let's just add a little bit.
‫So just one class here to this input.
‫So className, and we will have a whole lecture
‫about styling these input fields later.
‫But for now, the only thing that I want to do
‫is to increase the width here.
‫So that is also related to the box model,
‫which we talked about earlier, but let's just do that now.
‫So in order to change the width,
‫we can just write w and then the value for the width.
‫So let's say 72, which is again, not 72 pixels
‫but it is some value in the Tailwind scale.
‫So in this case, this just corresponds to 288 pixels.
‫Then we also could set the height, let's say to 10.
‫And so this will then set the height to 40 pixels.
‫That's not what we want here.
‫And so let's just keep it like this
‫and the rest of the styling we will do later.
‫Great, so we're making great progress here.
‫Next up, one of the most important things
‫we haven't talked about yet is basically building layouts.
‫So Flexbox and CSS Grid.
‫And so let's start talking about Flexbox
‫right in the next video.