00:00:02 How to make your websites look good on all different kinds of devices?

00:00:06 Well, Tailwind makes responsive design easy by using mobile-first breakpoints.

00:00:11 It gives you a set of predefined device widths, ranging from small, medium, and large to extra large.

00:00:19 What's cool about them is that by default, they set a min-width.

00:00:22 which means that it sets styles for a specific screen width or larger, not smaller.

00:00:29 Okay?

00:00:29 That means that we're talking about a mobile-first methodology.

00:00:33 Still, you're open to use something known as a max-width to set up styles for a specific screen width or smaller.

00:00:40 But as I said, Tailwind is mobile-first, so the min-width queries will be applied by default.

00:00:45 Now, let me show you how that works in practice.

00:00:47 Let's say that we have a div, and that div will render a p tag, That'll say something like, I appear on screens wider than 768 pixels.

00:01:01 Let's also give it a class equal to text-white.

00:01:05 Perfect.

00:01:05 Here it is.

00:01:06 Now, how would we actually make this piece of text do what it says it's gonna do?

00:01:10 Well, very easily.

00:01:12 by giving this outer div a class of medium devices block, but typically hidden.

00:01:19 So what this means is that we will apply a display of none, but only on medium devices where media width is greater than or equal to 48 rem,

00:01:30 which is about 770 pixels, then we change the display to block.

00:01:34 So now, if I move this around a bit, you can see the width on the top right.

00:01:38 And if I expand it over 768 pixels, there we go.

00:01:43 You can see that it appears right here.

00:01:45 So these two characters in a column right here are what's called a media query.

00:01:50 Media queries allow you to change CSS properties depending on the screen width.

00:01:55 Now, on top of being able to change the display properties of certain elements, Using media queries, you can change whatever you want.

00:02:02 So let me make this always visible, but let's change the text background color depending on different screen sizes.

00:02:09 We start with small, and on small, we can give it a background of something like...

00:02:15 Well, you know what?

00:02:15 We can already start with these pretty fine colors.

00:02:17 I'll go from 500 all the way until the end.

00:02:21 So let's start with 500. And now, if we go over 640 pixels, you'll be able to see it right here.

00:02:27 But what happens if we change it to medium, something like BG Amber of 700? Well, then, if you go even wider, you'll see that it'll change once again.

00:02:37 So there's one thing that we can deduct from this, and that is that larger screen sizes will always override the smaller ones.

00:02:44 Even though here it says that the width has to be greater than 40 rems, which it is in this case as well, but still, this one is not being applied because

00:02:52 the medium one is being applied, because it's greater than 48 rems, even though both of them are true.

00:02:58 But you can also flip it around on its head by using the max-width media queries.

00:03:03 As I said, by default, Tailwind uses min-width, but if you say max-sm, or if you say max-md, then it'll be applying that only if the width is lower than

00:03:15 that specific size.

00:03:17 So now you can see that currently it's like this, but then we increase it, it changes again.

00:03:22 So you have two different ways of targeting different elements.

00:03:24 Tailwind's doc page on this is super useful.

00:03:27 You can see the different breakpoints that they recommend, and you have a couple of examples of a simple marketing page component that uses a stack layout

00:03:34 on a small screen and a side-by-side layout on larger screens.

00:03:38 which means that you have full control over how it works.

00:03:40 The only thing you have to do is play with the media queries.

00:03:43 They even give you a full explanation of that example.

00:03:46 And right below, they mentioned the mobile-first approach that I was telling you about.

00:03:50 This means that unprefixed utilities, like uppercase, take effect on all screen sizes, while prefixed utilities, like empty uppercase,

00:03:59 only take effect on specified breakpoint, the end above being the keyword right here.

00:04:04 So getting back to our example, without using the max prefix, just using the regular small and medium, small will only work on small and above,

00:04:14 and medium will only work on medium and above.

00:04:18 Keep that in mind.

00:04:19 If there's only one thing you take away from this lesson, then it's that Tailwind uses a mobile-first approach, and it looks at the media query and above.

00:04:28 Or if you want to switch it around, then you apply a max before it.

00:04:32 And I might be repeating myself a bit here, but I think it's important to dive a bit deeper into this.

00:04:37 Because while it doesn't click, it's gonna feel weird.

00:04:40 So Tailwind even has another section on it.

00:04:42 What surprises people the most about the mobile-first approach is that to style something for mobile, you need to use the unprefixed version of a utility,

00:04:52 not the small prefixed version.

00:04:54 Don't think of small as on small screens.

00:04:57 Think of it as at the small breakpoint.

00:05:00 So, do not use small to target mobile devices, because this will only center text on screens 640 and wider, not on small screens.

00:05:10 Rather, use unprefixed utilities to immediately target mobile by default, okay?

00:05:17 So the text will center on mobile by default, and then only change it if you want to change it for larger devices.

00:05:24 And I think this dives right into the reason of what mobile-first approach means in the first place.

00:05:30 And that is that it's a good idea to implement the mobile layout for a design first, and then layer on any changes that make sense for small screens,

00:05:38 followed by medium screens, and so on.

00:05:41 And of course, it's super important to mention that you can fully customize your breakpoints.

00:05:45 If you want to make sure that it works on specific types of devices, or your specific layout breaks on specific widths, well,

00:05:52 you can fully customize the exact breakpoints you want to add, such as extra small or even triple XL.

00:05:59 And remember the just-in-time compiler?

00:06:01 It allows you to provide arbitrary values, which means that you can say min 320 pixels and then apply something for that specific screen width.

00:06:10 Pretty cool, right?

00:06:11 Well, with that in mind, you know more about media queries than most people out there.

00:06:16 So put it to good use and remember to design and develop mobile first.