1
00:00:03,000 --> 00:00:05,109
We configured our Next.js project

2
00:00:05,609 --> 00:00:08,468
to use Tailwind CSS for styling.

3
00:00:08,968 --> 00:00:11,443
But we still haven't seen much about Tailwind,

4
00:00:11,443 --> 00:00:13,595
so let me give you a quick introduction.

5
00:00:14,148 --> 00:00:17,660
Tailwind is a "utility-first" CSS framework.

6
00:00:18,314 --> 00:00:20,882
What this means is that it provides

7
00:00:20,882 --> 00:00:22,570
many small CSS classes,

8
00:00:22,570 --> 00:00:25,431
that we can apply to our HTML elements,

9
00:00:25,431 --> 00:00:27,925
and combine these classes together

10
00:00:27,925 --> 00:00:30,933
to create the full style for a component.

11
00:00:30,933 --> 00:00:33,281
So in this sense they are called

12
00:00:33,281 --> 00:00:34,601
"utility classes".

13
00:00:35,542 --> 00:00:36,941
Let's see an example,

14
00:00:36,941 --> 00:00:39,472
that's always clearer than just words.

15
00:00:39,472 --> 00:00:41,205
This is how we could style

16
00:00:41,205 --> 00:00:43,137
a chat notification component

17
00:00:43,137 --> 00:00:45,069
using a traditional approach.

18
00:00:45,835 --> 00:00:47,821
We would assign a different class

19
00:00:47,821 --> 00:00:50,288
to each element that forms the component,

20
00:00:50,848 --> 00:00:53,057
for example, the title element

21
00:00:53,057 --> 00:00:54,676
here is a "h4" heading

22
00:00:54,676 --> 00:00:57,253
and has been assigned a class named

23
00:00:57,253 --> 00:00:59,167
"chat-notification-title".

24
00:00:59,887 --> 00:01:01,794
Then separately we can define

25
00:01:01,794 --> 00:01:03,700
the rules for each CSS class,

26
00:01:04,265 --> 00:01:07,358
so configure that "chat-notification-title"

27
00:01:07,358 --> 00:01:09,588
to have a certain text "color",

28
00:01:09,588 --> 00:01:11,243
"font-size", and so on.

29
00:01:11,887 --> 00:01:14,253
That's the traditional approach,

30
00:01:14,253 --> 00:01:16,989
and you've probably heard before that

31
00:01:16,989 --> 00:01:20,095
it's a good practice to define CSS classes

32
00:01:20,095 --> 00:01:22,387
that represent reusable styles,

33
00:01:22,387 --> 00:01:25,271
and are separate from the HTML elements

34
00:01:25,271 --> 00:01:29,190
that represent the semantic structure of the content.

35
00:01:29,190 --> 00:01:32,814
But, when using a component framework like React,

36
00:01:32,814 --> 00:01:35,402
reusability can already be achieved

37
00:01:35,402 --> 00:01:37,473
by writing React components.

38
00:01:37,473 --> 00:01:39,765
Each React component already is

39
00:01:39,765 --> 00:01:42,353
a reusable piece of user interface.

40
00:01:42,353 --> 00:01:44,719
Having to write many CSS classes

41
00:01:44,719 --> 00:01:48,047
like in this example seems a bit unnecessary.

42
00:01:49,435 --> 00:01:52,012
Now, let's see how we can do things

43
00:01:52,012 --> 00:01:53,411
using Tailwind CSS.

44
00:01:53,411 --> 00:01:56,724
This is the same chat notification component,

45
00:01:56,724 --> 00:01:58,639
but styled using Tailwind.

46
00:01:58,639 --> 00:02:01,732
The first thing you can immediately notice

47
00:02:01,732 --> 00:02:04,088
is how much shorter this code is

48
00:02:04,088 --> 00:02:06,371
compared to the first approach.

49
00:02:07,313 --> 00:02:09,329
The way this works is that

50
00:02:09,329 --> 00:02:12,044
we can style each element directly,

51
00:02:12,044 --> 00:02:15,147
by setting some Tailwind utility classes

52
00:02:15,147 --> 00:02:16,388
on this element.

53
00:02:16,388 --> 00:02:20,266
In this case, this "div" that represents the title

54
00:02:20,266 --> 00:02:21,352
has "text-xl",

55
00:02:21,352 --> 00:02:24,222
which means an extra-large font size,

56
00:02:24,222 --> 00:02:28,100
then "font-medium" that specifies the font weight,

57
00:02:28,100 --> 00:02:31,436
and "text-black" that sets the text colour.

58
00:02:31,436 --> 00:02:34,461
We can combine multiple utility classes

59
00:02:34,461 --> 00:02:38,184
to achieve the full style for the title element.

60
00:02:39,460 --> 00:02:41,895
Now, this approach can seem pretty weird

61
00:02:41,895 --> 00:02:43,478
the first time you see it.

62
00:02:44,039 --> 00:02:46,463
But in practice it actually works very well,

63
00:02:46,463 --> 00:02:47,895
at least in my experience.

64
00:02:48,451 --> 00:02:51,178
As we use Tailwind to style our components

65
00:02:51,178 --> 00:02:52,672
in our Shop application

66
00:02:52,672 --> 00:02:54,946
hopefully you'll get a feel for it.

67
00:02:54,946 --> 00:02:57,414
Let's start with some simple examples.

68
00:02:58,109 --> 00:03:00,140
We probably want to add some space

69
00:03:00,140 --> 00:03:01,693
around the "main" element,

70
00:03:02,253 --> 00:03:04,262
so let's add a "className" property.

71
00:03:05,153 --> 00:03:07,428
Now, utility classes in Tailwind

72
00:03:07,428 --> 00:03:09,561
tend to have very short names,

73
00:03:10,133 --> 00:03:11,713
like, to add some "padding"

74
00:03:11,713 --> 00:03:13,117
we can simply write "p",

75
00:03:13,676 --> 00:03:16,565
and then specify an amount as a number,

76
00:03:16,565 --> 00:03:17,379
like "p-1".

77
00:03:17,954 --> 00:03:20,319
If we save, we can see in the page that

78
00:03:20,319 --> 00:03:22,200
there's a little bit of padding

79
00:03:22,200 --> 00:03:23,898
around the "Next Shop" text.

80
00:03:24,520 --> 00:03:26,537
If we change this to "p-2",

81
00:03:26,537 --> 00:03:29,077
there's now a little more padding.

82
00:03:29,077 --> 00:03:31,915
Now, 1 and 2 here doesn't mean pixels,

83
00:03:31,915 --> 00:03:33,932
or any other standard unit.

84
00:03:33,932 --> 00:03:36,622
They're just some predefined choices

85
00:03:36,622 --> 00:03:38,116
offered by Tailwind.

86
00:03:38,990 --> 00:03:40,812
If you installed the Tailwind

87
00:03:40,812 --> 00:03:42,572
Visual Studio Code extension

88
00:03:42,572 --> 00:03:45,590
you can get suggestions showing all the options,

89
00:03:45,590 --> 00:03:48,544
but also the rules corresponding to each class.

90
00:03:49,233 --> 00:03:52,972
So in this case "p-2" results in a "padding"

91
00:03:52,972 --> 00:03:54,587
of "0.5 rem" units,

92
00:03:54,587 --> 00:03:57,052
which by default means "8px".

93
00:03:57,052 --> 00:04:00,877
But there's no need to remember those values,

94
00:04:01,632 --> 00:04:03,817
we can just try different numbers,

95
00:04:03,817 --> 00:04:04,460
like "p-4"

96
00:04:05,025 --> 00:04:06,495
and see how they look.

97
00:04:06,495 --> 00:04:09,437
A bigger value means more padding of course.

98
00:04:10,004 --> 00:04:12,732
We can also specify different padding values

99
00:04:12,732 --> 00:04:14,220
in different directions.

100
00:04:14,783 --> 00:04:16,945
If we write "px" this means

101
00:04:16,945 --> 00:04:18,868
"padding" on the X axis,

102
00:04:18,868 --> 00:04:21,591
so we get some horizontal padding.

103
00:04:22,252 --> 00:04:23,991
While if we write "py"

104
00:04:23,991 --> 00:04:27,152
that means on the Y axis, or vertically.

105
00:04:27,732 --> 00:04:30,453
This allows us to specify different values

106
00:04:30,453 --> 00:04:32,008
in different directions,

107
00:04:32,008 --> 00:04:34,988
so we can put a bit more padding horizontally.

108
00:04:35,618 --> 00:04:37,424
All these short class names

109
00:04:37,424 --> 00:04:39,566
may seem a bit cryptic at first,

110
00:04:39,566 --> 00:04:41,640
but as you get used to Tailwind

111
00:04:41,640 --> 00:04:44,183
they'll start to feel quite intuitive.

112
00:04:44,183 --> 00:04:47,061
And of course, all of these utility classes

113
00:04:47,061 --> 00:04:49,671
are documented on the Tailwind website.

114
00:04:50,506 --> 00:04:53,514
Now, let's add some styles to our heading as well,

115
00:04:54,014 --> 00:04:55,622
so set a "className",

116
00:04:57,314 --> 00:04:59,842
and we could increase the text size

117
00:04:59,842 --> 00:05:03,238
by setting "text-lg", that's short for "large".

118
00:05:03,238 --> 00:05:06,995
You can see that the Next Shop text is a bit bigger.

119
00:05:07,640 --> 00:05:09,647
We could make it even bigger

120
00:05:09,647 --> 00:05:12,514
by setting "text-xl", for "extra-large".

121
00:05:13,086 --> 00:05:14,330
And in fact there are

122
00:05:14,330 --> 00:05:16,937
a number of other options for the text size.

123
00:05:17,497 --> 00:05:20,906
There's also "2xl", "3xl", and so on.

124
00:05:21,406 --> 00:05:23,548
Let's try "2xl" for example.

125
00:05:24,048 --> 00:05:26,355
I think that's big enough for our heading.

126
00:05:26,914 --> 00:05:28,251
Let's check what happens

127
00:05:28,251 --> 00:05:30,702
if we have some other elements in this page.

128
00:05:31,480 --> 00:05:33,551
At some point we'll want to display

129
00:05:33,551 --> 00:05:34,675
some products here.

130
00:05:34,675 --> 00:05:36,687
Right now the heading is too close

131
00:05:36,687 --> 00:05:37,989
to the following text,

132
00:05:38,667 --> 00:05:40,807
so let's add some padding here as well.

133
00:05:41,307 --> 00:05:43,566
But in this case we can use "pb",

134
00:05:43,566 --> 00:05:45,483
that means "padding-bottom",

135
00:05:46,052 --> 00:05:47,984
and let's try "2" as the value.

136
00:05:47,984 --> 00:05:50,041
That's better, but maybe we could

137
00:05:50,041 --> 00:05:51,475
increase it a bit more.

138
00:05:52,100 --> 00:05:53,705
Let's try "pb-4".

139
00:05:54,366 --> 00:05:55,737
Ok, I think that's enough.

140
00:05:56,237 --> 00:05:59,075
So this was just a very quick example

141
00:05:59,075 --> 00:06:02,067
of how to use Tailwind utility classes.

142
00:06:02,067 --> 00:06:04,982
As I mentioned we'll see more examples

143
00:06:04,982 --> 00:06:08,280
as we continue developing our shop website.

144
00:06:08,280 --> 00:06:11,119
But let's talk about reusability now.

145
00:06:11,926 --> 00:06:14,857
What if we have other pages in our website

146
00:06:14,857 --> 00:06:18,208
and want a similar heading with the same styles?

147
00:06:18,208 --> 00:06:21,768
Of course we could simply copy and paste this code,

148
00:06:21,768 --> 00:06:23,233
but that's not ideal.

149
00:06:23,233 --> 00:06:25,816
How can we make these styles reusable

150
00:06:25,816 --> 00:06:28,887
so we can apply them in other pages as well?

151
00:06:29,737 --> 00:06:31,383
The simplest option is to

152
00:06:31,383 --> 00:06:34,083
put this code in its own React component.

153
00:06:34,649 --> 00:06:36,369
We've seen in our Blog website

154
00:06:36,369 --> 00:06:38,892
that we typically want a "components' folder

155
00:06:38,892 --> 00:06:40,383
at the top of our project,

156
00:06:40,997 --> 00:06:43,021
where we keep reusable components.

157
00:06:43,521 --> 00:06:45,898
So we could create a "Title" module,

158
00:06:45,898 --> 00:06:48,936
that's just a normal React function component.

159
00:06:50,787 --> 00:06:54,013
And here we can paste the code for the heading,

160
00:06:54,013 --> 00:06:55,798
including the CSS classes.

161
00:06:56,367 --> 00:06:58,740
Let's export this function as the default.

162
00:07:01,300 --> 00:07:03,435
But, to make it actually reusable,

163
00:07:03,435 --> 00:07:05,382
we can take the "children" prop

164
00:07:05,944 --> 00:07:08,617
and display "children" as the content

165
00:07:08,617 --> 00:07:10,351
inside the "h1" element.

166
00:07:10,923 --> 00:07:13,418
This way we can pass anything we want

167
00:07:13,418 --> 00:07:14,834
as the Title content.

168
00:07:15,401 --> 00:07:17,215
At this point in our HomePage

169
00:07:17,215 --> 00:07:19,217
we can replace the existing code

170
00:07:19,779 --> 00:07:21,503
with our new "Title" component,

171
00:07:23,712 --> 00:07:26,453
and pass "Next Shop" as the content.

172
00:07:26,953 --> 00:07:27,922
So if we save,

173
00:07:27,922 --> 00:07:29,997
the page still looks the same,

174
00:07:29,997 --> 00:07:32,764
but it is using the new Title component.

175
00:07:33,686 --> 00:07:36,554
This means that, if we add another page,

176
00:07:36,554 --> 00:07:39,851
we can simply reuse this Title component there

177
00:07:39,851 --> 00:07:41,930
and it will display a heading

178
00:07:41,930 --> 00:07:45,084
that uses the same Tailwind utility classes.

179
00:07:45,084 --> 00:07:46,805
So by using Tailwind CSS

180
00:07:46,805 --> 00:07:50,102
we can add the styles directly to the elements

181
00:07:50,102 --> 00:07:51,464
where we want them,

182
00:07:51,464 --> 00:07:53,543
but we still have the ability

183
00:07:53,543 --> 00:07:55,550
to make the styles reusable,

184
00:07:55,550 --> 00:07:58,561
simply by creating small React components,

185
00:07:58,561 --> 00:08:00,425
like this Title component.