1
00:00:03,000 --> 00:00:06,604
We set up Tailwind CSS in our project.

2
00:00:06,604 --> 00:00:08,747
Now let's see how to use it,

3
00:00:08,747 --> 00:00:11,481
to add some styles to our layout.

4
00:00:11,607 --> 00:00:15,381
Let's say we want some padding inside the body.

5
00:00:15,381 --> 00:00:18,987
With React, we need to set the "className" prop,

6
00:00:18,987 --> 00:00:22,181
and here we'll add some utility classes.

7
00:00:22,181 --> 00:00:25,457
Tailwind has some excellent documentation,

8
00:00:25,457 --> 00:00:27,697
so if we search for "padding"

9
00:00:27,697 --> 00:00:30,269
we'll find the relevant instructions.

10
00:00:30,269 --> 00:00:32,692
We can add "horizontal padding"

11
00:00:32,692 --> 00:00:37,222
by writing "px-" and then a number, like 8.

12
00:00:37,222 --> 00:00:39,940
This will seem cryptic at first,

13
00:00:39,940 --> 00:00:42,441
but the "p" stands for "padding",

14
00:00:42,441 --> 00:00:47,320
"x" means along the X axis, that is horizontally,

15
00:00:47,320 --> 00:00:50,258
and 8 is the amount of padding.

16
00:00:50,258 --> 00:00:53,372
If we want some "vertical padding" instead,

17
00:00:53,372 --> 00:00:56,772
we'll write "py-" followed by the number.

18
00:00:56,772 --> 00:00:58,961
"p" always means padding,

19
00:00:58,961 --> 00:01:03,300
and "y" means on the Y axis, that is vertically.

20
00:01:03,300 --> 00:01:06,371
As you get used to these naming conventions,

21
00:01:06,371 --> 00:01:08,535
you'll be able to quickly figure

22
00:01:08,535 --> 00:01:10,225
out the right class names

23
00:01:10,293 --> 00:01:12,955
even without looking at the documentation.

24
00:01:12,955 --> 00:01:15,885
So, let's add some horizontal padding,

25
00:01:15,885 --> 00:01:17,957
by writing "px-"

26
00:01:17,957 --> 00:01:19,660
and the editor will suggest

27
00:01:19,660 --> 00:01:21,299
all the available options.

28
00:01:21,362 --> 00:01:23,998
This is thanks to the Tailwind extension

29
00:01:23,998 --> 00:01:26,304
we installed in the previous video.

30
00:01:26,370 --> 00:01:29,328
The popup shows exactly which rules

31
00:01:29,328 --> 00:01:32,202
will be applied by each CSS class.

32
00:01:32,286 --> 00:01:35,915
So "px-0" will set both "padding-left"

33
00:01:35,915 --> 00:01:38,588
and "padding-right" to zero.

34
00:01:38,684 --> 00:01:44,284
While "px-1" will set them both to "0.25 rem",

35
00:01:44,284 --> 00:01:47,850
where "rem" is a CSS unit that is relative

36
00:01:47,850 --> 00:01:51,162
to the font size of the "root element".

37
00:01:51,246 --> 00:01:54,370
As the comment shows, by default

38
00:01:54,370 --> 00:01:57,103
"0.25 rem" will be 4 pixels.

39
00:01:57,201 --> 00:02:02,471
"px-2" will use "0.5 rem", or 8px.

40
00:02:02,471 --> 00:02:08,711
"px-3" is "0.75 rem", or "12px", and so on.

41
00:02:08,711 --> 00:02:11,517
So, you can see that Tailwind gives us

42
00:02:11,517 --> 00:02:14,102
a number of options to choose from,

43
00:02:14,176 --> 00:02:16,361
but within some constraints.

44
00:02:16,361 --> 00:02:20,484
There's no class to apply 10 pixels for example.

45
00:02:20,484 --> 00:02:22,839
We can either choose "px-2",

46
00:02:22,839 --> 00:02:24,941
that's effectively "8px",

47
00:02:25,025 --> 00:02:28,618
or "px-3", that's "12px".

48
00:02:28,618 --> 00:02:31,156
Limiting the available choices will

49
00:02:31,156 --> 00:02:33,477
make our design more consistent.

50
00:02:33,549 --> 00:02:36,193
Anyway, let's select "px-4",

51
00:02:36,193 --> 00:02:37,815
that is "1rem".

52
00:02:37,815 --> 00:02:38,893
And if we save,

53
00:02:38,893 --> 00:02:41,965
you can see that there's now some horizontal

54
00:02:41,965 --> 00:02:43,641
padding around the body.

55
00:02:43,711 --> 00:02:47,021
Let's add some vertical padding as well,

56
00:02:47,021 --> 00:02:47,849
with "py",

57
00:02:47,931 --> 00:02:49,732
maybe "py-2".

58
00:02:49,811 --> 00:02:52,157
And you can see the result in the page.

59
00:02:52,157 --> 00:02:54,590
When it comes to choosing a number,

60
00:02:54,590 --> 00:02:56,756
you can basically just try something

61
00:02:56,756 --> 00:02:58,380
and see what it looks like,

62
00:02:58,441 --> 00:03:02,686
and then pick a bigger number if you want more padding,

63
00:03:02,686 --> 00:03:03,767
or vice versa.

64
00:03:03,844 --> 00:03:06,318
By the way, there's always this annoying

65
00:03:06,318 --> 00:03:08,236
warning in the browser console.

66
00:03:08,298 --> 00:03:10,983
What I'll do is simply filter it out,

67
00:03:10,983 --> 00:03:13,723
by writing "-preload" here,

68
00:03:13,723 --> 00:03:16,862
which means it will exclude any messages

69
00:03:16,862 --> 00:03:18,667
that contain "preload".

70
00:03:18,746 --> 00:03:22,077
Otherwise it just fills the logs with noise.

71
00:03:22,077 --> 00:03:24,452
Now, we may want to add some space

72
00:03:24,452 --> 00:03:26,827
around the "main" element as well.

73
00:03:26,897 --> 00:03:29,795
We just need some vertical padding here,

74
00:03:29,795 --> 00:03:31,887
let's try "py-3".

75
00:03:31,887 --> 00:03:33,280
That looks better.

76
00:03:33,280 --> 00:03:35,762
Next, we could sort out the links

77
00:03:35,762 --> 00:03:37,417
in the navigation bar.

78
00:03:37,492 --> 00:03:40,555
We'll want to display them all in the same row,

79
00:03:40,555 --> 00:03:43,588
and one way to do that is using "flex".

80
00:03:43,588 --> 00:03:46,571
You can also hover over a CSS class

81
00:03:46,571 --> 00:03:49,387
to see exactly which rules it applies.

82
00:03:49,387 --> 00:03:51,593
"flex" simply sets the "display"

83
00:03:51,593 --> 00:03:53,041
property accordingly.

84
00:03:53,110 --> 00:03:56,265
We'll also want some space between each item,

85
00:03:56,265 --> 00:03:57,690
with "gap-2".

86
00:03:57,765 --> 00:04:01,177
"gap" is a property you can use with flexbox.

87
00:04:01,177 --> 00:04:03,187
You can see that all the links

88
00:04:03,187 --> 00:04:04,862
are now on the same line,

89
00:04:04,929 --> 00:04:07,101
with some space between them.

90
00:04:07,101 --> 00:04:09,889
I'll just use the various Tailwind

91
00:04:09,889 --> 00:04:12,185
utility classes from now on,

92
00:04:12,267 --> 00:04:15,557
without explaining each one in great detail.

93
00:04:15,557 --> 00:04:19,134
So you can get a feel for how Tailwind works,

94
00:04:19,134 --> 00:04:22,601
but we won't spend too much time on styling.

95
00:04:22,601 --> 00:04:24,247
Remember that you can always

96
00:04:24,247 --> 00:04:25,717
look at the documentation

97
00:04:25,776 --> 00:04:28,942
if you want to see more detailed instructions.

98
00:04:28,942 --> 00:04:30,880
Now, since we're positioning

99
00:04:30,880 --> 00:04:32,611
the elements on the page,

100
00:04:32,680 --> 00:04:35,465
let's take care of the "footer" as well.

101
00:04:35,465 --> 00:04:38,455
For a start, we can center the text.

102
00:04:38,455 --> 00:04:41,631
We could also make it smaller with "xs",

103
00:04:41,631 --> 00:04:43,647
that means "extra-small".

104
00:04:43,647 --> 00:04:46,215
This will decrease the font size.

105
00:04:46,215 --> 00:04:49,638
The footer always contains the fine print.

106
00:04:49,638 --> 00:04:51,486
Maybe we could also separate it

107
00:04:51,486 --> 00:04:53,036
from the rest of the page,

108
00:04:53,096 --> 00:04:55,634
by adding some border at the top.

109
00:04:55,634 --> 00:04:57,620
The "t" stands for "top".

110
00:04:57,620 --> 00:05:00,762
The line is too close to the text though;

111
00:05:00,762 --> 00:05:03,512
let's add some vertical padding as well.

112
00:05:03,512 --> 00:05:05,193
Ok, that's better.

113
00:05:05,193 --> 00:05:07,208
Now, ideally the footer should

114
00:05:07,208 --> 00:05:09,154
be at the bottom of the page.

115
00:05:09,222 --> 00:05:12,941
Even if the rest of the content doesn't fill the full screen,

116
00:05:12,941 --> 00:05:14,039
like in this case.

117
00:05:14,100 --> 00:05:16,653
We can push the footer to the bottom

118
00:05:16,653 --> 00:05:19,207
by setting the "body" to use flexbox

119
00:05:19,278 --> 00:05:22,531
but in the column direction, with "flex-col".

120
00:05:22,531 --> 00:05:25,374
Then set a minimum height for the body,

121
00:05:25,374 --> 00:05:30,430
using "min-h-screen", which sets it to "100vh",

122
00:05:30,430 --> 00:05:34,561
that means 100% of the visible height.

123
00:05:34,561 --> 00:05:36,652
In other words, the body should

124
00:05:36,652 --> 00:05:37,934
fill the full page.

125
00:05:38,001 --> 00:05:41,472
And then we can set the "main" element to expand,

126
00:05:41,472 --> 00:05:43,655
by using the "grow" class,

127
00:05:43,655 --> 00:05:46,302
that sets "flex-grow" to 1.

128
00:05:46,302 --> 00:05:48,946
This way the main content will expand

129
00:05:48,946 --> 00:05:51,232
to take all the available space,

130
00:05:51,303 --> 00:05:53,541
pushing the footer to the bottom.

131
00:05:53,541 --> 00:05:56,722
You can always use the Chrome Developer Tools

132
00:05:56,861 --> 00:05:59,621
to inspect any element on the page,

133
00:05:59,621 --> 00:06:02,133
and see what styles it's using.

134
00:06:02,133 --> 00:06:05,125
For example, if we select the "main" element

135
00:06:05,125 --> 00:06:08,666
we can see that it has the "py-3" class,

136
00:06:08,666 --> 00:06:13,081
that sets "padding-top" and "padding-bottom"

137
00:06:13,081 --> 00:06:14,385
to "0.75rem".

138
00:06:14,486 --> 00:06:16,584
And the "grow" class, that

139
00:06:16,584 --> 00:06:18,521
sets "flex-grow" to "1".

140
00:06:18,601 --> 00:06:21,970
We can also see the the "body" is using "flex".

141
00:06:21,970 --> 00:06:25,962
The DevTools have special support for flexbox,

142
00:06:25,962 --> 00:06:29,339
showing a dotted line around each item.

143
00:06:29,339 --> 00:06:31,635
If you're not familiar with

144
00:06:31,635 --> 00:06:33,847
the Flexbox layout in CSS,

145
00:06:33,932 --> 00:06:36,220
you can find a link in the Resources

146
00:06:36,220 --> 00:06:37,300
for this lecture,

147
00:06:37,364 --> 00:06:39,583
where you can learn more about it.

148
00:06:39,583 --> 00:06:42,093
But we can see that the "main" element

149
00:06:42,093 --> 00:06:43,877
takes up most of the space,

150
00:06:43,943 --> 00:06:46,065
because we set it to "grow".

151
00:06:46,065 --> 00:06:49,185
And that's how we can make sure that the footer

152
00:06:49,185 --> 00:06:51,907
is always at the very bottom of the page.

153
00:06:51,973 --> 00:06:54,928
So, we used Tailwind to position all

154
00:06:54,928 --> 00:06:57,389
the main elements of our page.

155
00:06:57,471 --> 00:06:59,347
In the next video we'll see

156
00:06:59,347 --> 00:07:00,944
how to add some colors.