1
00:00:01,320 --> 00:00:03,270
‫Next up we're gonna take a look

2
00:00:03,270 --> 00:00:08,270
‫at element states such as "hover", "disabled", or "focus".

3
00:00:08,610 --> 00:00:12,060
‫And we will also implement CSS transitions,

4
00:00:12,060 --> 00:00:13,800
‫and we will do all this

5
00:00:13,800 --> 00:00:16,743
‫while styling some links and buttons.

6
00:00:18,480 --> 00:00:21,300
‫So here in the cart page,

7
00:00:21,300 --> 00:00:23,760
‫so up here we have this link.

8
00:00:23,760 --> 00:00:26,310
‫And now I want to style this here a little bit.

9
00:00:26,310 --> 00:00:28,950
‫So make it blue, like a usual link.

10
00:00:28,950 --> 00:00:33,000
‫And then when we hover it, I want to make it a bit darker.

11
00:00:33,000 --> 00:00:35,970
‫So that's something pretty straightforward.

12
00:00:35,970 --> 00:00:39,630
‫And so let's learn how to handle that hover state

13
00:00:39,630 --> 00:00:40,803
‫in Tailwind.

14
00:00:41,670 --> 00:00:44,520
‫So let's come here to the cart page.

15
00:00:44,520 --> 00:00:47,310
‫And so here we already have that link.

16
00:00:47,310 --> 00:00:51,000
‫And so now we just have to add some more classes.

17
00:00:51,000 --> 00:00:54,690
‫So first let's make the text smaller.

18
00:00:54,690 --> 00:00:59,690
‫So text small, and then let's also make the text blue.

19
00:01:00,390 --> 00:01:04,860
‫So a blue 500 like this.

20
00:01:04,860 --> 00:01:07,140
‫And now let's implement the hover state.

21
00:01:07,140 --> 00:01:11,370
‫And it's as simple as now writing "hover,"

22
00:01:11,370 --> 00:01:13,890
‫and then here writing another class name,

23
00:01:13,890 --> 00:01:16,680
‫which will then replace the other one.

24
00:01:16,680 --> 00:01:21,607
‫So in case we are hovering, we want text blue 600.

25
00:01:22,890 --> 00:01:25,230
‫And so this is where it becomes really handy

26
00:01:25,230 --> 00:01:27,371
‫to have all these different color variations

27
00:01:27,371 --> 00:01:29,643
‫built right into Tailwind.

28
00:01:32,130 --> 00:01:34,920
‫But anyway, let's now try this.

29
00:01:34,920 --> 00:01:39,210
‫And indeed, notice that there is a subtle color change.

30
00:01:39,210 --> 00:01:44,073
‫So as I hover, it becomes this kind of bluer blue.

31
00:01:45,690 --> 00:01:49,958
‫So here we can see it really nicely with this dark color.

32
00:01:49,958 --> 00:01:51,870
‫Okay,

33
00:01:51,870 --> 00:01:54,243
‫so basically with the "hover" prefix,

34
00:01:54,243 --> 00:01:59,243
‫we can write or define any classes that we want to appear

35
00:01:59,550 --> 00:02:01,080
‫in the hover state.

36
00:02:01,080 --> 00:02:05,040
‫So for example, we can also use "underline".

37
00:02:05,040 --> 00:02:07,320
‫And so as you can expect,

38
00:02:07,320 --> 00:02:10,140
‫then the link will also get underlined.

39
00:02:10,140 --> 00:02:12,813
‫And here of course, the color is 600.

40
00:02:12,813 --> 00:02:17,543
‫And yeah, so this is how we define hover,

41
00:02:17,543 --> 00:02:20,490
‫or how we handle the hover state.

42
00:02:20,490 --> 00:02:23,333
‫So this was just a very simple example.

43
00:02:23,333 --> 00:02:27,690
‫And so next up, let's style a more complex button.

44
00:02:27,690 --> 00:02:31,980
‫So let's come here again to "order/new".

45
00:02:31,980 --> 00:02:36,753
‫And now we want to style this "order now" button right here.

46
00:02:37,930 --> 00:02:40,050
‫So let's close this,

47
00:02:40,050 --> 00:02:45,050
‫and then in "create order," this is where our button is.

48
00:02:45,690 --> 00:02:46,923
‫Yeah, right here.

49
00:02:49,590 --> 00:02:52,290
‫And let's start here with some basic stuff.

50
00:02:52,290 --> 00:02:55,320
‫So let's give it the same background color

51
00:02:55,320 --> 00:02:56,733
‫as the rest of the app.

52
00:02:57,900 --> 00:03:00,300
‫So, yellow 400.

53
00:03:00,300 --> 00:03:04,357
‫And actually I think that here I used 500,

54
00:03:04,357 --> 00:03:08,820
‫but I'm looking for 400 actually.

55
00:03:08,820 --> 00:03:11,520
‫So 500 is a bit too dark.

56
00:03:11,520 --> 00:03:13,740
‫Yeah, that looks nicer,

57
00:03:13,740 --> 00:03:15,720
‫and so let's keep going.

58
00:03:15,720 --> 00:03:18,930
‫So let's make the text also uppercase.

59
00:03:18,930 --> 00:03:21,543
‫Let's make the font semibold.

60
00:03:22,440 --> 00:03:24,420
‫Let's make the text also darker,

61
00:03:24,420 --> 00:03:28,440
‫since we are now on this yellow background.

62
00:03:28,440 --> 00:03:31,681
‫And so remember that our gray is stone.

63
00:03:31,681 --> 00:03:35,850
‫And then let's use the 800 variation.

64
00:03:35,850 --> 00:03:39,570
‫And finally, let's add some paddings here.

65
00:03:39,570 --> 00:03:42,000
‫So vertically, let's use three

66
00:03:42,000 --> 00:03:44,880
‫and horizontally, let's use four.

67
00:03:44,880 --> 00:03:47,700
‫And in order for this to actually take effect

68
00:03:47,700 --> 00:03:50,520
‫we need to make this button an inline-block.

69
00:03:50,520 --> 00:03:52,949
‫So that's "display:inline-block."

70
00:03:52,949 --> 00:03:55,410
‫And the corresponding Tailwind class

71
00:03:55,410 --> 00:03:58,053
‫is just "inline-block" like this.

72
00:03:59,730 --> 00:04:03,540
‫All right, so this is already looking pretty nice.

73
00:04:03,540 --> 00:04:07,650
‫Let's just add maybe some letter spacing there.

74
00:04:07,650 --> 00:04:09,960
‫And we can really place this anywhere we want

75
00:04:09,960 --> 00:04:12,090
‫because the prettier extension

76
00:04:12,090 --> 00:04:14,583
‫will then take care of ordering this.

77
00:04:16,290 --> 00:04:18,930
‫So tracking, let's choose this one.

78
00:04:18,930 --> 00:04:23,310
‫And then finally, let's also give it some rounded corners.

79
00:04:23,310 --> 00:04:26,640
‫So that's a new class that we haven't talked about yet,

80
00:04:26,640 --> 00:04:28,200
‫but it's very simple.

81
00:04:28,200 --> 00:04:30,690
‫So we just specify rounded here,

82
00:04:30,690 --> 00:04:32,370
‫and then we can use

83
00:04:32,370 --> 00:04:36,330
‫these different values that we have here.

84
00:04:36,330 --> 00:04:39,291
‫For example, "rounded large," which will give us

85
00:04:39,291 --> 00:04:41,829
‫I think it is eight pixels.

86
00:04:41,829 --> 00:04:46,829
‫Yeah, but actually what we want is "rounded full."

87
00:04:47,340 --> 00:04:51,930
‫So this pill shape button here that many applications use.

88
00:04:51,930 --> 00:04:53,640
‫And so this basically gives us

89
00:04:53,640 --> 00:04:57,106
‫a really really large border radius like this.

90
00:04:57,106 --> 00:05:00,685
‫Okay, and so with this basic styling in place,

91
00:05:00,685 --> 00:05:03,450
‫let's now add some element states.

92
00:05:03,450 --> 00:05:06,150
‫Starting again with "hover."

93
00:05:06,150 --> 00:05:07,140
‫So when we hover,

94
00:05:07,140 --> 00:05:10,593
‫this time we want to make the background a bit lighter.

95
00:05:11,550 --> 00:05:16,550
‫So let's go 100 down, make it yellow 100,

96
00:05:16,573 --> 00:05:20,670
‫or not 100, 300 actually.

97
00:05:20,670 --> 00:05:22,830
‫And so, let's see.

98
00:05:22,830 --> 00:05:24,690
‫And indeed that works.

99
00:05:24,690 --> 00:05:28,650
‫However, there is no transition here, so no animation,

100
00:05:28,650 --> 00:05:33,060
‫which usually we also have in most web applications.

101
00:05:33,060 --> 00:05:37,170
‫And so let's now add that transition here in Tailwind.

102
00:05:37,170 --> 00:05:41,402
‫And the way that we do this is to do "transition"

103
00:05:41,402 --> 00:05:43,620
‫and then the properties

104
00:05:43,620 --> 00:05:46,920
‫that we actually want to be transitioned.

105
00:05:46,920 --> 00:05:51,780
‫So many times when we write normal CSS, we just do all.

106
00:05:51,780 --> 00:05:53,100
‫So we can do this,

107
00:05:53,100 --> 00:05:54,549
‫but let's be a bit more specific

108
00:05:54,549 --> 00:05:55,904
‫because we already know

109
00:05:55,904 --> 00:05:59,310
‫that only the color should be animated.

110
00:05:59,310 --> 00:06:04,310
‫And so we can then specify "transition colors" like this.

111
00:06:05,070 --> 00:06:07,273
‫So this is already going to work.

112
00:06:07,273 --> 00:06:08,850
‫Nice.

113
00:06:08,850 --> 00:06:11,700
‫But if we want to specify also the duration,

114
00:06:11,700 --> 00:06:14,370
‫we can do so with "duration"

115
00:06:14,370 --> 00:06:18,420
‫and then dash whatever milliseconds that we want.

116
00:06:18,420 --> 00:06:22,861
‫So let's say 300 milliseconds, and beautiful.

117
00:06:22,861 --> 00:06:26,493
‫But now, notice what happens when I click on this button.

118
00:06:27,560 --> 00:06:32,560
‫Well, for now here we get, of course, these problems.

119
00:06:32,609 --> 00:06:34,380
‫Well, first of all,

120
00:06:34,380 --> 00:06:38,100
‫let's actually deactivate all of this here.

121
00:06:38,100 --> 00:06:40,680
‫So I don't want anything to happen.

122
00:06:40,680 --> 00:06:42,181
‫So when I click on that button,

123
00:06:42,181 --> 00:06:44,643
‫I don't want to create a new order,

124
00:06:45,510 --> 00:06:48,453
‫because now all I want to do is to style this.

125
00:06:52,470 --> 00:06:56,013
‫So now here we get the wrong phone number.

126
00:06:58,129 --> 00:07:00,300
‫So let's fix this.

127
00:07:00,300 --> 00:07:03,690
‫And well, this is not what I wanted.

128
00:07:03,690 --> 00:07:05,100
‫So let's go back.

129
00:07:05,100 --> 00:07:06,219
‫And what I wanted to show you

130
00:07:06,219 --> 00:07:09,600
‫in the first place was actually the focus state here.

131
00:07:09,600 --> 00:07:11,640
‫So let's just do it this way.

132
00:07:11,640 --> 00:07:15,240
‫So hitting the "tab" key to reach this button.

133
00:07:15,240 --> 00:07:19,140
‫So here we have this really ugly looking blue outline,

134
00:07:19,140 --> 00:07:21,210
‫and so we don't want that.

135
00:07:21,210 --> 00:07:23,613
‫And so, let's get rid of it.

136
00:07:24,540 --> 00:07:26,520
‫In here, let's just quickly

137
00:07:26,520 --> 00:07:29,640
‫and temporarily fix that error that we had earlier,

138
00:07:29,640 --> 00:07:32,790
‫which was that we wasn't returning anything here.

139
00:07:32,790 --> 00:07:35,460
‫So let's at least return null.

140
00:07:35,460 --> 00:07:37,653
‫So we will just remove that a bit later.

141
00:07:38,565 --> 00:07:42,480
‫So in order to remove that ugly focus there,

142
00:07:42,480 --> 00:07:46,413
‫we can do "focus," so the focus state,

143
00:07:46,413 --> 00:07:49,890
‫and then here, "outline-none."

144
00:07:49,890 --> 00:07:52,710
‫However, we cannot just leave it like this

145
00:07:52,710 --> 00:07:56,400
‫because this will create some accessibility issues.

146
00:07:56,400 --> 00:07:58,323
‫And so we need to do something else.

147
00:07:59,910 --> 00:08:03,080
‫So in this focus state, instead of having this outline,

148
00:08:03,080 --> 00:08:05,924
‫we can use something that Tailwind created,

149
00:08:05,924 --> 00:08:08,853
‫which is what they call a ring.

150
00:08:10,800 --> 00:08:14,910
‫So a ring, as we can see here, is basically some shadows

151
00:08:14,910 --> 00:08:17,725
‫that they will place outside the element.

152
00:08:17,725 --> 00:08:19,714
‫So this creates this ring.

153
00:08:19,714 --> 00:08:23,850
‫And then we also need to define the color of the ring.

154
00:08:23,850 --> 00:08:26,913
‫So again, that's within the focus state.

155
00:08:28,380 --> 00:08:30,090
‫So all of this should only happen

156
00:08:30,090 --> 00:08:31,740
‫when the element is focused,

157
00:08:31,740 --> 00:08:33,990
‫and so we need to prefix all of this

158
00:08:33,990 --> 00:08:36,873
‫always with this "focus" word.

159
00:08:38,157 --> 00:08:43,157
‫So let's make it the same color as the button already has.

160
00:08:45,120 --> 00:08:49,120
‫So that's yellow 300, at least in the focused state

161
00:08:50,040 --> 00:08:52,500
‫because actually when we focus the button,

162
00:08:52,500 --> 00:08:54,614
‫we also want the entire background color

163
00:08:54,614 --> 00:08:56,643
‫to change to that yellow,

164
00:08:58,230 --> 00:08:59,943
‫so yellow 300.

165
00:09:01,020 --> 00:09:04,740
‫And so now watch what happens when we focus.

166
00:09:04,740 --> 00:09:06,480
‫Now we still cannot really see it,

167
00:09:06,480 --> 00:09:09,335
‫because we forgot the offset.

168
00:09:09,335 --> 00:09:14,335
‫So focus, ring offset, and let's set it two.

169
00:09:18,870 --> 00:09:20,190
‫Ah, nice.

170
00:09:20,190 --> 00:09:24,450
‫So this is looking a lot better than before, right?

171
00:09:24,450 --> 00:09:27,150
‫So that ugly blue outline is gone.

172
00:09:27,150 --> 00:09:31,110
‫And so now if we use the tab key to reach this element,

173
00:09:31,110 --> 00:09:34,110
‫then this is what the focus state looks like.

174
00:09:34,110 --> 00:09:37,410
‫So this looks quite nice, and so we achieved this

175
00:09:37,410 --> 00:09:40,800
‫by using this Tailwind concept of rings.

176
00:09:40,800 --> 00:09:43,050
‫And again, you can learn all about that

177
00:09:43,050 --> 00:09:45,270
‫here in the documentation.

178
00:09:45,270 --> 00:09:47,670
‫So again, when the button is focused

179
00:09:47,670 --> 00:09:50,280
‫we give it this yellow background color

180
00:09:50,280 --> 00:09:53,490
‫which is the same one as the hover one.

181
00:09:53,490 --> 00:09:54,900
‫So this one here.

182
00:09:54,900 --> 00:09:59,190
‫And then we remove the outline and give it this ring.

183
00:09:59,190 --> 00:10:01,247
‫And here we could also specify some values

184
00:10:01,247 --> 00:10:03,550
‫to make it a larger ring.

185
00:10:03,550 --> 00:10:07,080
‫And then here we give the ring a color and an offset.

186
00:10:07,080 --> 00:10:11,179
‫So a space between the ring and the element itself.

187
00:10:11,179 --> 00:10:12,333
‫Okay.

188
00:10:13,680 --> 00:10:17,310
‫Next up, we could also use the "active" state.

189
00:10:17,310 --> 00:10:19,050
‫So which is basically the state

190
00:10:19,050 --> 00:10:21,333
‫whenever the button is being clicked.

191
00:10:22,620 --> 00:10:24,510
‫So this one we are not interested in here,

192
00:10:24,510 --> 00:10:28,260
‫but I just want to show you something.

193
00:10:28,260 --> 00:10:30,900
‫So just let's say we give it another color,

194
00:10:30,900 --> 00:10:34,053
‫and so as I click, it will get that new color.

195
00:10:36,090 --> 00:10:40,200
‫Okay, but now finally what we actually want to do,

196
00:10:40,200 --> 00:10:42,993
‫is to also style the disabled state.

197
00:10:44,808 --> 00:10:48,979
‫So in the disabled state, we want to change the cursor.

198
00:10:48,979 --> 00:10:52,233
‫So we can use a cursor class.

199
00:10:52,233 --> 00:10:57,233
‫So "cursor," and then let's use the "not allowed."

200
00:10:57,457 --> 00:11:00,780
‫And again, just make sure to check out

201
00:11:00,780 --> 00:11:02,670
‫the documentation to find out

202
00:11:02,670 --> 00:11:05,700
‫which cursors can be used.

203
00:11:05,700 --> 00:11:09,480
‫So here, let's just temporarily set this to true

204
00:11:09,480 --> 00:11:11,040
‫so we can see.

205
00:11:11,040 --> 00:11:14,400
‫And so now as we hover, we can no longer click it

206
00:11:14,400 --> 00:11:17,400
‫and we get this visual confirmation of that.

207
00:11:17,400 --> 00:11:19,800
‫So this new cursor right there.

208
00:11:19,800 --> 00:11:23,043
‫And of course we could do all other kinds of stuff.

209
00:11:24,171 --> 00:11:27,410
‫So for example, again, changing the background color

210
00:11:27,410 --> 00:11:29,793
‫to something like this.

211
00:11:32,340 --> 00:11:35,004
‫But let's remove this because I think like this,

212
00:11:35,004 --> 00:11:37,833
‫this is already more than enough.

213
00:11:40,619 --> 00:11:41,970
‫All right.

214
00:11:41,970 --> 00:11:45,870
‫So this is by far the biggest element that we wrote yet.

215
00:11:45,870 --> 00:11:48,390
‫So the biggest class name string.

216
00:11:48,390 --> 00:11:49,500
‫But don't worry,

217
00:11:49,500 --> 00:11:51,570
‫if we later want to reuse this button,

218
00:11:51,570 --> 00:11:55,410
‫we will be just able to create a new component

219
00:11:55,410 --> 00:11:57,270
‫and then use that component

220
00:11:57,270 --> 00:12:00,210
‫and reuse it all over the application.

221
00:12:00,210 --> 00:12:02,610
‫But let's leave that for a bit later,

222
00:12:02,610 --> 00:12:06,390
‫and next up, talk about styling form elements.

223
00:12:06,390 --> 00:12:09,213
‫So like these input fields right here.