Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
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.
11383
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.