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,288
We started adding some styles to our application,
2
00:00:06,288 --> 00:00:08,958
by positioning the various elements,
3
00:00:08,958 --> 00:00:11,744
like the navigation links and the footer.
4
00:00:11,744 --> 00:00:15,445
What we'll do in this video is add some colors.
5
00:00:15,445 --> 00:00:17,911
If we search for "color palette",
6
00:00:18,345 --> 00:00:21,686
we'll find a page that shows the default
7
00:00:21,686 --> 00:00:24,358
colors provided by Tailwind CSS.
8
00:00:24,442 --> 00:00:26,848
There are various color names,
9
00:00:26,848 --> 00:00:30,176
like "slate", "gray", "zinc", and so on.
10
00:00:30,176 --> 00:00:32,726
And for each color there are numbers
11
00:00:32,726 --> 00:00:37,038
that identify each shade in a predefined set.
12
00:00:37,038 --> 00:00:40,207
The numbers go from lighter to darker,
13
00:00:40,207 --> 00:00:43,781
with 50 as the lightest shade,
14
00:00:43,781 --> 00:00:46,520
and 950 as the darkest.
15
00:00:46,639 --> 00:00:50,138
The first few names are variations of gray,
16
00:00:50,138 --> 00:00:52,639
but there are many other colors available.
17
00:00:52,639 --> 00:00:56,022
You can also customize the palette if you wish,
18
00:00:56,022 --> 00:00:58,050
but we'll use the default colors
19
00:00:58,050 --> 00:00:59,255
in our application.
20
00:00:59,318 --> 00:01:02,800
So, let's see how to use a specific color.
21
00:01:02,800 --> 00:01:05,568
Suppose we want to change the background
22
00:01:05,568 --> 00:01:06,882
for the whole page.
23
00:01:06,951 --> 00:01:10,373
On the body, we can set a class called "bg",
24
00:01:10,373 --> 00:01:11,695
for "background",
25
00:01:11,773 --> 00:01:13,939
followed by the color name,
26
00:01:13,939 --> 00:01:16,024
like "orange" for example.
27
00:01:16,104 --> 00:01:18,006
And we'll see suggestions for
28
00:01:18,006 --> 00:01:19,645
all the available shades.
29
00:01:19,711 --> 00:01:22,323
Let's try "orange-100".
30
00:01:22,323 --> 00:01:25,555
You can see that the background color changed.
31
00:01:25,555 --> 00:01:28,088
Maybe 100 is a bit too dark,
32
00:01:28,088 --> 00:01:30,486
so let's try 50 instead.
33
00:01:30,486 --> 00:01:32,033
That's more subtle.
34
00:01:32,033 --> 00:01:34,372
Now, we probably want to change the
35
00:01:34,372 --> 00:01:36,242
color for the links as well,
36
00:01:36,309 --> 00:01:38,573
because at the moment they look
37
00:01:38,573 --> 00:01:40,398
the same as regular text.
38
00:01:40,471 --> 00:01:43,997
But if we keep adding code to this layout file,
39
00:01:43,997 --> 00:01:46,092
it's going to get a bit messy.
40
00:01:46,092 --> 00:01:49,002
So let's extract this navigation bar
41
00:01:49,002 --> 00:01:51,589
into a separate component first.
42
00:01:51,670 --> 00:01:53,821
We can simply move this code
43
00:01:53,821 --> 00:01:55,894
into a new React component.
44
00:01:55,971 --> 00:01:58,315
Now, we could create a new file
45
00:01:58,315 --> 00:02:00,055
under the "app" folder,
46
00:02:00,130 --> 00:02:02,559
but that can be confusing, if we
47
00:02:02,559 --> 00:02:04,836
start mixing pages and layouts
48
00:02:04,911 --> 00:02:07,155
with regular React components,
49
00:02:07,155 --> 00:02:08,876
all in the same folder.
50
00:02:08,951 --> 00:02:12,510
So, a common practice is to create a separate folder,
51
00:02:12,510 --> 00:02:14,659
at the top-level of our project,
52
00:02:14,726 --> 00:02:16,287
called "components".
53
00:02:16,546 --> 00:02:18,916
And inside there we can add a file,
54
00:02:18,916 --> 00:02:21,861
let's call it "NavBar.jsx",
55
00:02:21,861 --> 00:02:24,014
where we'll write our new code.
56
00:02:24,014 --> 00:02:26,733
This will be a React function component,
57
00:02:27,074 --> 00:02:29,113
again called "NavBar",
58
00:02:29,354 --> 00:02:31,494
that will render the elements
59
00:02:31,494 --> 00:02:33,413
extracted from the layout.
60
00:02:33,487 --> 00:02:34,589
That's it.
61
00:02:34,589 --> 00:02:36,887
Actually, we also need to import
62
00:02:36,887 --> 00:02:38,252
the Link component.
63
00:02:38,324 --> 00:02:40,379
But we can now save this file,
64
00:02:40,379 --> 00:02:44,266
and use the NavBar component in the RootLayout.
65
00:02:44,266 --> 00:02:46,245
We can simply replace the old
66
00:02:46,245 --> 00:02:48,156
code with the new component.
67
00:02:48,224 --> 00:02:51,083
That we also need to import of course.
68
00:02:51,083 --> 00:02:54,553
I like the "css" import to be the last one,
69
00:02:54,553 --> 00:02:56,224
just as a convention.
70
00:02:56,224 --> 00:02:58,363
But you can see that our page in the
71
00:02:58,363 --> 00:03:00,086
browser still looks the same,
72
00:03:00,146 --> 00:03:01,895
even though the NavBar is
73
00:03:01,895 --> 00:03:03,644
now a separate component.
74
00:03:03,714 --> 00:03:06,082
We can now more easily add some
75
00:03:06,082 --> 00:03:07,916
styles to all the Links.
76
00:03:07,993 --> 00:03:11,205
Let me see if I can modify them all at once.
77
00:03:11,205 --> 00:03:14,290
I split them into separate lines at least.
78
00:03:14,290 --> 00:03:16,955
Now, let's start with the first item.
79
00:03:16,955 --> 00:03:19,440
The Link component also accepts
80
00:03:19,440 --> 00:03:20,964
a "className" prop,
81
00:03:21,044 --> 00:03:23,128
that will be passed to the anchor
82
00:03:23,128 --> 00:03:24,834
element when it's rendered.
83
00:03:24,897 --> 00:03:28,150
To change the text color we can type "text-"
84
00:03:28,150 --> 00:03:30,281
followed by the color name,
85
00:03:30,281 --> 00:03:32,286
and I'll use "orange" again,
86
00:03:32,286 --> 00:03:34,338
so it will be like the theme
87
00:03:34,338 --> 00:03:35,950
color for our website.
88
00:03:36,024 --> 00:03:39,177
But for the text we'll want a dark shade,
89
00:03:39,177 --> 00:03:41,185
like 800 maybe.
90
00:03:41,185 --> 00:03:43,437
You can see that the Home link is
91
00:03:43,437 --> 00:03:45,348
now different from the rest.
92
00:03:45,416 --> 00:03:48,557
Let's apply this class to the other links as well.
93
00:03:48,896 --> 00:03:51,985
I could probably have done all of them at once,
94
00:03:51,985 --> 00:03:53,102
but bear with me.
95
00:03:53,168 --> 00:03:56,100
Ok, all our links are now orange.
96
00:03:56,100 --> 00:03:58,146
It would be nice to also provide
97
00:03:58,146 --> 00:03:59,425
some visual feedback
98
00:03:59,489 --> 00:04:02,470
when the user moves the mouse over them.
99
00:04:02,470 --> 00:04:05,332
Let's see how to do that with Tailwind.
100
00:04:05,332 --> 00:04:07,885
I will select all of them this time.
101
00:04:07,885 --> 00:04:10,961
We can write "hover" followed by a ":"
102
00:04:10,961 --> 00:04:14,571
to apply some styles only on mouse hover.
103
00:04:14,571 --> 00:04:17,683
For example, let's "underline" the text.
104
00:04:17,683 --> 00:04:21,089
So, "hover" is a modifier that will apply
105
00:04:21,089 --> 00:04:24,081
only to that specific element state.
106
00:04:24,164 --> 00:04:25,819
If we go and try now,
107
00:04:25,984 --> 00:04:28,197
when we move the mouse over the links,
108
00:04:28,197 --> 00:04:32,144
we can see that the text becomes underlined. Good.
109
00:04:32,144 --> 00:04:35,159
Now, there's actually another link in the footer.
110
00:04:35,159 --> 00:04:37,393
We should probably apply the same
111
00:04:37,393 --> 00:04:39,153
style to that one as well.
112
00:04:39,220 --> 00:04:42,913
I'll simply copy these CSS classes for now,
113
00:04:42,913 --> 00:04:46,283
since it's only one other link we need to style.
114
00:04:46,283 --> 00:04:49,598
If we needed the same styles in more places,
115
00:04:49,598 --> 00:04:52,910
we could extract them into a reusable component.
116
00:04:52,910 --> 00:04:55,080
But in this case it's simpler
117
00:04:55,080 --> 00:04:56,801
to just copy them over.
118
00:04:56,876 --> 00:05:00,305
Ok, the RAWG link is now orange as well,
119
00:05:00,305 --> 00:05:02,759
but you can see that there's no space
120
00:05:02,759 --> 00:05:05,653
between the text before and the link.
121
00:05:05,653 --> 00:05:08,964
That's because JSX removes the newline
122
00:05:08,964 --> 00:05:12,215
when we have some text followed by an element.
123
00:05:12,215 --> 00:05:15,871
One workaround is to add a space as an expression,
124
00:05:15,871 --> 00:05:17,932
so it will be preserved when
125
00:05:17,932 --> 00:05:19,698
rendering the text node.
126
00:05:19,772 --> 00:05:22,555
It's a bit annoying, but not a big deal.
127
00:05:22,555 --> 00:05:25,086
Anyway, we've seen that Tailwind
128
00:05:25,086 --> 00:05:27,616
provides a default color palette
129
00:05:27,696 --> 00:05:30,349
and we used a color for the links,
130
00:05:30,349 --> 00:05:32,967
and also for the page background.
131
00:05:32,967 --> 00:05:35,373
In the next video we'll style the
132
00:05:35,373 --> 00:05:37,269
main content of our pages.
9545
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.