1
00:00:01,110 --> 00:00:04,410
‫One of the big advantages of Tailwind

2
00:00:04,410 --> 00:00:07,140
‫is its extreme flexibility

3
00:00:07,140 --> 00:00:09,120
‫which allows us to configure

4
00:00:09,120 --> 00:00:12,090
‫basically everything about it.

5
00:00:12,090 --> 00:00:14,490
‫Now, while we are not gonna go deep

6
00:00:14,490 --> 00:00:17,340
‫into configuration in this crash course,

7
00:00:17,340 --> 00:00:20,332
‫let's at least try to explore it a little bit

8
00:00:20,332 --> 00:00:23,340
‫by changing the default font family

9
00:00:23,340 --> 00:00:25,863
‫and by doing some other changes.

10
00:00:27,450 --> 00:00:29,130
‫Now, you can read all

11
00:00:29,130 --> 00:00:33,420
‫about changing the configuration right here

12
00:00:33,420 --> 00:00:37,560
‫as always in the Tailwind docks.

13
00:00:37,560 --> 00:00:40,770
‫So basically, what we will need now is this

14
00:00:40,770 --> 00:00:43,890
‫Tailwind dot config file where we can really

15
00:00:43,890 --> 00:00:47,340
‫change everything about Tailwind.

16
00:00:47,340 --> 00:00:48,990
‫Now, let's try to get rid

17
00:00:48,990 --> 00:00:51,570
‫of this ugly ES lint warning

18
00:00:51,570 --> 00:00:53,310
‫by using the comment

19
00:00:53,310 --> 00:00:58,310
‫E.S. lint disable.

20
00:00:58,770 --> 00:01:00,570
‫So that didn't work.

21
00:01:00,570 --> 00:01:04,770
‫Or maybe it's E.S. lint disable next line.

22
00:01:04,770 --> 00:01:06,330
‫Now, there we go.

23
00:01:06,330 --> 00:01:09,090
‫So this looks a lot better.

24
00:01:09,090 --> 00:01:11,255
‫But anyway, here we can see

25
00:01:11,255 --> 00:01:13,258
‫that we can really change

26
00:01:13,258 --> 00:01:15,600
‫everything that we want here.

27
00:01:15,600 --> 00:01:19,650
‫And the easiest way I found to see what exactly

28
00:01:19,650 --> 00:01:24,000
‫we can change is to open up this link here,

29
00:01:24,000 --> 00:01:27,000
‫which takes us to the default configuration.

30
00:01:27,000 --> 00:01:29,914
‫And so then here, we can see all the things that

31
00:01:29,914 --> 00:01:33,330
‫Tailwind basically sets by default.

32
00:01:33,330 --> 00:01:36,270
‫So it's all these different values here.

33
00:01:36,270 --> 00:01:37,830
‫And so this is all the stuff

34
00:01:37,830 --> 00:01:39,832
‫that we can override.

35
00:01:39,832 --> 00:01:42,270
‫And so what we will override now

36
00:01:42,270 --> 00:01:45,386
‫is the default font family.

37
00:01:45,386 --> 00:01:49,860
‫And let's get that font from Google Fonts.

38
00:01:49,860 --> 00:01:51,270
‫So Google Fonts.

39
00:01:51,270 --> 00:01:53,190
‫And let's immediately search the one

40
00:01:53,190 --> 00:01:58,173
‫that we want, which is Roboto Mono-spaced.

41
00:01:59,010 --> 00:02:01,890
‫So let's open it up right here

42
00:02:01,890 --> 00:02:04,263
‫and let's select a couple of styles.

43
00:02:05,336 --> 00:02:08,210
‫So let's say 300...

44
00:02:11,250 --> 00:02:13,380
‫Let's remove that here.

45
00:02:13,380 --> 00:02:14,550
‫So...

46
00:02:14,550 --> 00:02:15,930
‫400,

47
00:02:15,930 --> 00:02:17,130
‫500,

48
00:02:17,130 --> 00:02:18,870
‫and 600,

49
00:02:18,870 --> 00:02:20,373
‫maybe even 700.

50
00:02:22,530 --> 00:02:27,093
‫And then we can grab this link from here.

51
00:02:27,960 --> 00:02:31,678
‫So just copy this and then place it right

52
00:02:31,678 --> 00:02:34,020
‫into the HTML file.

53
00:02:34,020 --> 00:02:36,450
‫And if for some reason you were not able

54
00:02:36,450 --> 00:02:40,650
‫to get this link just feel free to copy this

55
00:02:40,650 --> 00:02:43,713
‫from the final files of this section.

56
00:02:45,030 --> 00:02:45,963
‫All right.

57
00:02:46,800 --> 00:02:49,980
‫But anyway, now here inside the theme

58
00:02:49,980 --> 00:02:53,823
‫we can create the font family field.

59
00:02:55,680 --> 00:02:57,810
‫So font family

60
00:02:57,810 --> 00:03:00,960
‫And then here we can define any name that we want.

61
00:03:00,960 --> 00:03:03,180
‫So for example, let's say we wanted

62
00:03:03,180 --> 00:03:05,957
‫to call this one pizza and here

63
00:03:05,957 --> 00:03:07,780
‫the fonts stack would be

64
00:03:09,090 --> 00:03:11,520
‫Roboto Mono

65
00:03:11,520 --> 00:03:14,594
‫that we just included and

66
00:03:14,594 --> 00:03:18,270
‫I should write it correctly at least.

67
00:03:18,270 --> 00:03:20,190
‫And then as a fallback,

68
00:03:20,190 --> 00:03:23,140
‫let's just use a mono-space

69
00:03:24,780 --> 00:03:25,833
‫like this.

70
00:03:26,880 --> 00:03:27,750
‫Okay.

71
00:03:27,750 --> 00:03:29,370
‫And if we come back here

72
00:03:29,370 --> 00:03:33,903
‫then let's search for the same thing here.

73
00:03:34,980 --> 00:03:36,020
‫So...

74
00:03:37,239 --> 00:03:40,050
‫This is in an alphabetical way

75
00:03:40,050 --> 00:03:43,260
‫and indeed here we have that font family field.

76
00:03:43,260 --> 00:03:44,940
‫And so here we are now basically

77
00:03:44,940 --> 00:03:48,060
‫overriding that font family.

78
00:03:48,060 --> 00:03:50,490
‫So now we will end up with a new font

79
00:03:50,490 --> 00:03:52,413
‫which is gonna be called pizza.

80
00:03:53,460 --> 00:03:57,450
‫So let's say we wanted to use this in the header.

81
00:03:57,450 --> 00:03:59,779
‫So let's open that

82
00:03:59,779 --> 00:04:03,387
‫and so, in order to select a font,

83
00:04:03,387 --> 00:04:06,060
‫we just write font.

84
00:04:06,060 --> 00:04:11,060
‫And then we see that we get this font called pizza.

85
00:04:11,340 --> 00:04:13,050
‫So if we hover over this,

86
00:04:13,050 --> 00:04:16,601
‫we get exactly what we specified earlier.

87
00:04:16,601 --> 00:04:21,361
‫And so if we give this a safe, then there it is.

88
00:04:21,361 --> 00:04:25,315
‫Great. This is however not that helpful

89
00:04:25,315 --> 00:04:29,040
‫at least not if we want to use this everywhere.

90
00:04:29,040 --> 00:04:31,290
‫And so instead, what we can do is

91
00:04:31,290 --> 00:04:34,740
‫to override the sense font that

92
00:04:34,740 --> 00:04:38,610
‫Tailwind automatically injects into our HTML.

93
00:04:38,610 --> 00:04:41,190
‫So therefore, if we change this here then

94
00:04:41,190 --> 00:04:45,000
‫this will automatically update for the entire page.

95
00:04:45,000 --> 00:04:49,260
‫So if I save this now, then we immediately notice that

96
00:04:49,260 --> 00:04:53,613
‫the entire page gets this new Roboto Mono font.

97
00:04:54,450 --> 00:04:55,950
‫Beautiful.

98
00:04:55,950 --> 00:04:59,010
‫So this looks a lot nicer than before

99
00:04:59,010 --> 00:05:00,660
‫and indeed you see here that

100
00:05:00,660 --> 00:05:04,140
‫the first font is this sans.

101
00:05:04,140 --> 00:05:06,816
‫And so now we did override this.

102
00:05:06,816 --> 00:05:08,946
‫Now we still have the serif,

103
00:05:08,946 --> 00:05:11,883
‫so we could also use that one.

104
00:05:12,900 --> 00:05:15,185
‫So here, the font pizza no longer exists

105
00:05:15,185 --> 00:05:18,990
‫but we can use serif if we want it,

106
00:05:18,990 --> 00:05:21,540
‫or at least I thought so.

107
00:05:21,540 --> 00:05:24,290
‫So maybe by doing this right here,

108
00:05:24,290 --> 00:05:26,430
‫we overrode everything.

109
00:05:26,430 --> 00:05:29,490
‫So I'm actually just trying things out here

110
00:05:29,490 --> 00:05:31,710
‫as we go and making things up.

111
00:05:31,710 --> 00:05:33,390
‫So I never actually tried to use

112
00:05:33,390 --> 00:05:36,150
‫this fonts serif anywhere.

113
00:05:36,150 --> 00:05:37,410
‫So let's just ignore this

114
00:05:37,410 --> 00:05:40,503
‫because this was just an experiment anyway,

115
00:05:42,840 --> 00:05:44,790
‫but here are some more things

116
00:05:44,790 --> 00:05:47,250
‫that we could try if we wanted.

117
00:05:47,250 --> 00:05:50,190
‫So for example, we could also create

118
00:05:50,190 --> 00:05:52,140
‫some other color here.

119
00:05:52,140 --> 00:05:57,140
‫So let's say colors and then let's again call it pizza.

120
00:05:58,260 --> 00:06:03,260
‫And then let's make it some weird color like this.

121
00:06:04,350 --> 00:06:07,350
‫Here we get an error and then we have

122
00:06:07,350 --> 00:06:10,170
‫another error because now all of these

123
00:06:10,170 --> 00:06:12,106
‫color classes that we used earlier

124
00:06:12,106 --> 00:06:15,300
‫do actually no longer exist because

125
00:06:15,300 --> 00:06:17,189
‫now the only colors that we have

126
00:06:17,189 --> 00:06:20,070
‫are these ones over here.

127
00:06:20,070 --> 00:06:22,680
‫So if we wanted to keep the colors

128
00:06:22,680 --> 00:06:25,112
‫that we already have, but add this one

129
00:06:25,112 --> 00:06:29,133
‫then we would have to place this into the extent.

130
00:06:30,180 --> 00:06:31,980
‫So basically keeping everything

131
00:06:31,980 --> 00:06:35,220
‫from Tailwind but simply extending it.

132
00:06:35,220 --> 00:06:37,436
‫And so, now we should get

133
00:06:37,436 --> 00:06:40,440
‫this other color here as well.

134
00:06:40,440 --> 00:06:44,370
‫So maybe let's, instead of this yellow

135
00:06:44,370 --> 00:06:47,970
‫let's use our pizza color.

136
00:06:47,970 --> 00:06:51,213
‫And so indeed it becomes blue.

137
00:06:52,050 --> 00:06:55,290
‫So that's, our 1, 2, 3, 4, 5, 6

138
00:06:55,290 --> 00:06:57,652
‫which somehow has been converted here

139
00:06:57,652 --> 00:07:00,690
‫but still it is exactly that blue color

140
00:07:00,690 --> 00:07:02,430
‫that we saw earlier.

141
00:07:02,430 --> 00:07:03,788
‫So by doing this,

142
00:07:03,788 --> 00:07:07,290
‫we extended Tailwind's color palette

143
00:07:07,290 --> 00:07:09,540
‫which is new color here.

144
00:07:09,540 --> 00:07:12,480
‫However, this is not really what we're interested in

145
00:07:12,480 --> 00:07:15,213
‫but we are interested in something else.

146
00:07:16,140 --> 00:07:17,910
‫So let's again come back here

147
00:07:17,910 --> 00:07:19,563
‫so that I can show you.

148
00:07:20,910 --> 00:07:25,080
‫So again, here, we could now basically extend all

149
00:07:25,080 --> 00:07:26,820
‫of this that we wanted.

150
00:07:26,820 --> 00:07:30,635
‫So we could do, for example, font sizes

151
00:07:30,635 --> 00:07:33,057
‫and then create

152
00:07:33,057 --> 00:07:35,823
‫like something called huge.

153
00:07:36,750 --> 00:07:40,232
‫And then here we could give it,

154
00:07:40,232 --> 00:07:42,160
‫for example, copy this

155
00:07:44,610 --> 00:07:46,683
‫and make it 80-rem.

156
00:07:47,910 --> 00:07:51,810
‫And then in the header we could again use that

157
00:07:51,810 --> 00:07:56,280
‫so text and then huge,

158
00:07:56,280 --> 00:07:57,870
‫and then we would have

159
00:07:57,870 --> 00:08:02,870
‫our 80 rem or whatever we chose there text, right?

160
00:08:05,941 --> 00:08:10,941
‫So really the possibilities are absolutely endless

161
00:08:12,090 --> 00:08:13,710
‫as you can see.

162
00:08:13,710 --> 00:08:15,690
‫So I keep doing some things here,

163
00:08:15,690 --> 00:08:17,850
‫but what I actually wanted to change

164
00:08:17,850 --> 00:08:22,770
‫is now this height.

165
00:08:22,770 --> 00:08:25,903
‫So right here, remember how in the layout

166
00:08:25,903 --> 00:08:28,350
‫we used the height of screen,

167
00:08:28,350 --> 00:08:32,640
‫which corresponds to 100 viewport height units.

168
00:08:32,640 --> 00:08:36,480
‫However, this creates problems on mobile browsers.

169
00:08:36,480 --> 00:08:38,606
‫And so instead of using this unit,

170
00:08:38,606 --> 00:08:41,820
‫we should use an even more modern unit,

171
00:08:41,820 --> 00:08:44,223
‫which is called D.V.H.

172
00:08:45,300 --> 00:08:48,150
‫So let's do that.

173
00:08:48,150 --> 00:08:51,061
‫And I will just for the sake of fun,

174
00:08:51,061 --> 00:08:52,623
‫keep this one here.

175
00:08:52,623 --> 00:08:55,353
‫But now let's update the height.

176
00:08:56,640 --> 00:08:57,780
‫And so in the height,

177
00:08:57,780 --> 00:09:00,423
‫what we want to change is screen.

178
00:09:01,449 --> 00:09:06,449
‫So screen should now no longer be 100 V.H.,

179
00:09:06,480 --> 00:09:09,090
‫but 100 D.V.H

180
00:09:09,090 --> 00:09:12,840
‫which stands for dynamic viewport height units.

181
00:09:12,840 --> 00:09:14,571
‫And so with this, we no longer have the problem

182
00:09:14,571 --> 00:09:19,020
‫that on mobile browsers sometimes the viewport type

183
00:09:19,020 --> 00:09:21,623
‫is not really 100%.

184
00:09:22,740 --> 00:09:23,790
‫All right.

185
00:09:23,790 --> 00:09:27,960
‫And so if we come here now and hover over this,

186
00:09:27,960 --> 00:09:32,340
‫you see that now we have our 100 D.V.H,

187
00:09:32,340 --> 00:09:36,120
‫so exactly what we just specified there earlier.

188
00:09:36,120 --> 00:09:38,970
‫So this all looks pretty magical

189
00:09:38,970 --> 00:09:41,760
‫and it is indeed really amazing.

190
00:09:41,760 --> 00:09:45,056
‫So all the things that we can change here

191
00:09:45,056 --> 00:09:49,230
‫really opens up a lot of possibilities.

192
00:09:49,230 --> 00:09:50,940
‫But this was actually all that

193
00:09:50,940 --> 00:09:54,210
‫I wanted to show you here in this lecture.

194
00:09:54,210 --> 00:09:56,730
‫So configuring some stuff here

195
00:09:56,730 --> 00:09:59,220
‫where what we do here so...

196
00:09:59,220 --> 00:10:01,170
‫just in the theme object

197
00:10:01,170 --> 00:10:04,740
‫basically overrides everything in that category.

198
00:10:04,740 --> 00:10:06,861
‫While here, if we just extend

199
00:10:06,861 --> 00:10:10,380
‫then we keep the original things of Tailwind

200
00:10:10,380 --> 00:10:12,570
‫but add our own ones.

201
00:10:12,570 --> 00:10:16,200
‫So for example, if we placed this one out here

202
00:10:16,200 --> 00:10:20,340
‫then all the font sizes that we were using no longer exist.

203
00:10:20,340 --> 00:10:22,590
‫So for example, here, text small

204
00:10:22,590 --> 00:10:25,953
‫then no longer exists 'cause we just overrode it.

205
00:10:27,390 --> 00:10:28,680
‫Okay?

206
00:10:28,680 --> 00:10:31,410
‫And now we learned most of the stuff

207
00:10:31,410 --> 00:10:33,944
‫that we actually wanted to learn in this section.

208
00:10:33,944 --> 00:10:36,397
‫And so now over the next few lectures

209
00:10:36,397 --> 00:10:39,840
‫all we have to do is to basically style

210
00:10:39,840 --> 00:10:42,570
‫the remaining part of the application.

211
00:10:42,570 --> 00:10:46,262
‫So for example, this card or this menu here.

212
00:10:46,262 --> 00:10:49,463
‫So let's actually start with this menu

213
00:10:49,463 --> 00:10:51,093
‫in the next lecture.