1
00:00:03,000 --> 00:00:06,783
In this video we'll see how to do Responsive

2
00:00:06,783 --> 00:00:08,933
Design with Tailwind CSS.

3
00:00:09,019 --> 00:00:11,387
Something that conceptually belongs

4
00:00:11,387 --> 00:00:13,687
more in the section about Styling,

5
00:00:13,755 --> 00:00:15,471
but in the previous section

6
00:00:15,471 --> 00:00:17,123
we didn't have any images,

7
00:00:17,187 --> 00:00:20,238
so I couldn't really show you a good example.

8
00:00:20,238 --> 00:00:24,678
Now, "Responsive Design" means styling our pages

9
00:00:24,678 --> 00:00:26,688
so that they will look good

10
00:00:26,688 --> 00:00:28,401
both on a small screen,

11
00:00:28,475 --> 00:00:30,142
like on a mobile phone,

12
00:00:30,142 --> 00:00:33,556
and on large screens, such as on desktop.

13
00:00:33,556 --> 00:00:36,204
To achieve this, sometimes we want

14
00:00:36,204 --> 00:00:38,851
to lay out our content differently

15
00:00:38,929 --> 00:00:41,070
depending on the screen size.

16
00:00:41,070 --> 00:00:44,080
To help with this, Tailwind predefines

17
00:00:44,080 --> 00:00:45,427
five breakpoints,

18
00:00:45,506 --> 00:00:49,448
where a "breakpoint" is a fixed screen width

19
00:00:49,448 --> 00:00:52,339
that we can use to tailor our content.

20
00:00:52,339 --> 00:00:56,235
The breakpoints are "sm", short for "small",

21
00:00:56,235 --> 00:01:01,430
that corresponds to a minimum width of "640px",

22
00:01:01,430 --> 00:01:03,219
"md", for "medium",

23
00:01:03,219 --> 00:01:06,441
that's at least 768 pixels,

24
00:01:06,441 --> 00:01:11,784
and so on, up to "2xl" that's "1536px".

25
00:01:11,784 --> 00:01:15,193
We can use these breakpoints to apply different

26
00:01:15,193 --> 00:01:17,513
styles based on the screen size.

27
00:01:17,586 --> 00:01:19,671
There's a simple example here.

28
00:01:19,671 --> 00:01:22,310
This will set the image width

29
00:01:22,310 --> 00:01:24,221
to "w-16" by default,

30
00:01:24,312 --> 00:01:28,747
but use "w-32" instead on a medium screen,

31
00:01:28,747 --> 00:01:32,157
and "w-48" on a large screen.

32
00:01:32,157 --> 00:01:34,670
So, it will automatically make the

33
00:01:34,670 --> 00:01:36,961
image wider on a larger screen.

34
00:01:37,035 --> 00:01:39,519
Now, it's important to note that

35
00:01:39,519 --> 00:01:42,819
we should target smaller screens by default,

36
00:01:42,819 --> 00:01:47,077
and then override the styles for larger screens.

37
00:01:47,077 --> 00:01:48,699
This is a good approach,

38
00:01:48,699 --> 00:01:52,825
because it encourages us to design our pages so that

39
00:01:52,825 --> 00:01:56,237
they look good on small screens by default.

40
00:01:56,316 --> 00:01:59,277
Once you do that it's usually easier to

41
00:01:59,277 --> 00:02:02,009
adapt the styles for larger screens.

42
00:02:02,085 --> 00:02:04,659
While if you take the opposite approach,

43
00:02:04,659 --> 00:02:07,401
and start designing for a large screen,

44
00:02:07,401 --> 00:02:10,413
it can be then difficult to make everything

45
00:02:10,413 --> 00:02:12,865
fit on a smaller screen afterwards.

46
00:02:12,935 --> 00:02:15,933
So, let's see how this works in practice.

47
00:02:15,933 --> 00:02:17,915
At the moment, we're listing all

48
00:02:17,915 --> 00:02:19,464
the reviews on this page,

49
00:02:19,526 --> 00:02:22,620
but, our Home page is still mostly empty.

50
00:02:22,620 --> 00:02:26,714
What we could do is show a featured review here,

51
00:02:26,714 --> 00:02:29,778
that could be the latest review we published,

52
00:02:29,778 --> 00:02:30,596
for example.

53
00:02:30,664 --> 00:02:34,167
So people can come back and visit our home page

54
00:02:34,167 --> 00:02:36,933
to see what's the latest review available.

55
00:02:36,933 --> 00:02:39,247
We can start by copying the card

56
00:02:39,247 --> 00:02:41,199
code from the Reviews page,

57
00:02:41,272 --> 00:02:44,624
since the featured review will be fairly similar.

58
00:02:44,624 --> 00:02:47,126
Let's put it after the tagline.

59
00:02:47,126 --> 00:02:49,225
But here we don't have a list;

60
00:02:49,225 --> 00:02:52,350
we can use a "div" rather than a list item.

61
00:02:52,350 --> 00:02:55,652
And we'll also need to import the Link component.

62
00:02:55,652 --> 00:02:58,950
I like to keep third party imports first,

63
00:02:58,950 --> 00:03:00,639
before local modules.

64
00:03:00,719 --> 00:03:02,751
Anyway, you can see the review

65
00:03:02,751 --> 00:03:04,105
card in the browser.

66
00:03:04,173 --> 00:03:06,948
Let's add some space below the paragraph,

67
00:03:07,033 --> 00:03:09,351
with the "pb-3" class.

68
00:03:09,351 --> 00:03:10,417
That's better.

69
00:03:10,417 --> 00:03:13,850
Now, let's think about responsive design.

70
00:03:13,850 --> 00:03:17,352
How does this page look on a larger screen?

71
00:03:17,352 --> 00:03:19,811
There's a bit too much blank space.

72
00:03:19,811 --> 00:03:22,296
What we could do is show the game

73
00:03:22,296 --> 00:03:24,103
title next to the image,

74
00:03:24,178 --> 00:03:25,678
rather than below it.

75
00:03:25,818 --> 00:03:29,336
If we set the parent element to use flexbox,

76
00:03:29,336 --> 00:03:33,093
this will display all the child elements in a row.

77
00:03:33,093 --> 00:03:36,193
But in this case we shouldn't limit the width,

78
00:03:36,193 --> 00:03:39,189
so let me remove "w-80" for now.

79
00:03:39,189 --> 00:03:42,023
Ok, the review title is on the right,

80
00:03:42,023 --> 00:03:44,676
and the card will stretch to fill all

81
00:03:44,676 --> 00:03:46,899
the available horizontal space.

82
00:03:46,971 --> 00:03:49,701
You can imagine that we could also display

83
00:03:49,701 --> 00:03:51,781
some other text below the title,

84
00:03:51,846 --> 00:03:54,023
like a summary of the review.

85
00:03:54,023 --> 00:03:56,476
But we won't actually do that right now.

86
00:03:56,476 --> 00:03:58,944
What we're more interested in at the moment

87
00:03:58,944 --> 00:04:01,421
is that this layout won't work

88
00:04:01,421 --> 00:04:03,320
well on a small screen,

89
00:04:03,402 --> 00:04:06,367
because you cannot see the full text any more.

90
00:04:06,367 --> 00:04:08,814
So, let's keep the title below

91
00:04:08,814 --> 00:04:11,180
the image on smaller screens,

92
00:04:11,261 --> 00:04:14,678
and to its right only on larger screens.

93
00:04:14,678 --> 00:04:17,137
Translated into CSS classes,

94
00:04:17,137 --> 00:04:19,482
this means that by default we want

95
00:04:19,482 --> 00:04:21,757
to arrange the items in a column,

96
00:04:21,827 --> 00:04:25,342
and the default applies to smaller screens.

97
00:04:25,342 --> 00:04:28,580
But then we can use the "sm" modifier

98
00:04:28,580 --> 00:04:30,792
to switch to "flex-row"

99
00:04:30,792 --> 00:04:33,002
if the screen is larger than

100
00:04:33,002 --> 00:04:34,817
the "small" breakpoint.

101
00:04:34,896 --> 00:04:36,951
Let's see how this works now.

102
00:04:36,951 --> 00:04:39,375
If we enlarge the browser window,

103
00:04:39,375 --> 00:04:42,334
you can see that at some point the "Stardew

104
00:04:42,334 --> 00:04:44,536
Valley" text moves to the right.

105
00:04:44,605 --> 00:04:46,786
And if we shrink the window,

106
00:04:46,786 --> 00:04:49,874
the text will move back below the image.

107
00:04:49,874 --> 00:04:53,343
The Chrome DevTools show the viewport size

108
00:04:53,343 --> 00:04:56,317
in the top-right corner of the page.

109
00:04:56,399 --> 00:04:59,277
If you notice, the switch happens

110
00:04:59,277 --> 00:05:01,893
as soon as we pass 640 pixels,

111
00:05:01,980 --> 00:05:04,692
that is in fact the predefined width

112
00:05:04,692 --> 00:05:06,725
for the "small" breakpoint.

113
00:05:06,800 --> 00:05:09,629
So this is how we can apply different

114
00:05:09,629 --> 00:05:12,381
styles depending on the screen size.

115
00:05:12,458 --> 00:05:15,458
We could add more rules for other breakpoints,

116
00:05:15,458 --> 00:05:17,935
like "medium", "large", and so on.

117
00:05:17,935 --> 00:05:19,994
But we'll only use the "small"

118
00:05:19,994 --> 00:05:21,915
breakpoint for this example.

119
00:05:21,983 --> 00:05:24,421
Now, to make this look better we

120
00:05:24,421 --> 00:05:26,859
should re-add "w-80" by default.

121
00:05:26,936 --> 00:05:30,694
This way the card will be as wide as the image.

122
00:05:30,694 --> 00:05:34,201
But if the screen exceeds the "small" breakpoint,

123
00:05:34,201 --> 00:05:37,000
we can set the width to full instead.

124
00:05:37,000 --> 00:05:39,428
This way the card will expand

125
00:05:39,428 --> 00:05:41,856
to fill the horizontal space.

126
00:05:41,940 --> 00:05:45,830
Now, let's tweak the styles for this screen size.

127
00:05:45,830 --> 00:05:49,182
We'll need some space before the "h2" text,

128
00:05:49,182 --> 00:05:52,663
so, for "sm", let's add "px-2".

129
00:05:52,663 --> 00:05:55,703
Ok, there's some horizontal padding.

130
00:05:55,703 --> 00:05:57,585
But that's not required when

131
00:05:57,585 --> 00:05:59,265
the screen is very small.

132
00:05:59,332 --> 00:06:01,409
What else do we need to tweak?

133
00:06:02,332 --> 00:06:05,014
The image is only rounded at the top.

134
00:06:05,014 --> 00:06:07,785
It's barely noticeable, but there's no

135
00:06:07,785 --> 00:06:10,337
rounding in the bottom-left corner.

136
00:06:10,410 --> 00:06:12,237
When the image is displayed

137
00:06:12,237 --> 00:06:13,862
to the left of the text,

138
00:06:13,929 --> 00:06:16,561
we should change the rounding accordingly.

139
00:06:16,561 --> 00:06:19,970
So for "sm" we want "rounded-l",

140
00:06:19,970 --> 00:06:21,825
which means on the left.

141
00:06:21,825 --> 00:06:24,678
The left side in fact looks good now.

142
00:06:24,678 --> 00:06:28,749
But the top-right corner also has some rounding,

143
00:06:28,749 --> 00:06:30,062
and it shouldn't.

144
00:06:30,062 --> 00:06:33,859
That's because we set "rounded-t" by default,

145
00:06:33,859 --> 00:06:37,269
so it always applies the rounding to the top.

146
00:06:37,269 --> 00:06:40,363
We'll need to disable any rounding

147
00:06:40,363 --> 00:06:42,000
on the right side,

148
00:06:42,091 --> 00:06:45,065
by using "rounded-r-none".

149
00:06:45,065 --> 00:06:48,050
This way it should finally be consistent

150
00:06:48,050 --> 00:06:49,618
with the card border.

151
00:06:49,693 --> 00:06:52,222
You can see how some times you have

152
00:06:52,222 --> 00:06:54,101
to fiddle with the styles,

153
00:06:54,174 --> 00:06:57,844
to make sure they look good on all screen sizes.

154
00:06:57,844 --> 00:07:00,147
This can be quite time consuming,

155
00:07:00,147 --> 00:07:02,236
which is why I won't make all

156
00:07:02,236 --> 00:07:04,182
our pages fully responsive,

157
00:07:04,254 --> 00:07:07,552
nor cover all possible screen sizes.

158
00:07:07,552 --> 00:07:10,280
But this example should give you the

159
00:07:10,280 --> 00:07:12,478
basic idea of how to do that.

160
00:07:12,554 --> 00:07:15,742
The key is to choose a style that works

161
00:07:15,742 --> 00:07:18,604
well on smaller screens by default,

162
00:07:18,686 --> 00:07:20,707
like in this case displaying

163
00:07:20,707 --> 00:07:22,583
all the items in a column.

164
00:07:22,656 --> 00:07:26,870
And then override that style for larger screens,

165
00:07:26,870 --> 00:07:30,655
for example to display the items in a row instead.