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:07,050
We've seen how to use colors with Tailwind CSS.
2
00:00:07,050 --> 00:00:09,538
Now, all the styles we added so
3
00:00:09,538 --> 00:00:11,624
far are in the RootLayout,
4
00:00:11,705 --> 00:00:14,353
so they will apply to all the pages,
5
00:00:14,353 --> 00:00:15,888
not just Home.
6
00:00:15,888 --> 00:00:18,014
But we'll also want to style
7
00:00:18,014 --> 00:00:19,685
the main page content.
8
00:00:19,761 --> 00:00:21,683
For example, we should make
9
00:00:21,683 --> 00:00:23,391
the heading text bigger.
10
00:00:23,462 --> 00:00:26,275
So let's add some CSS classes here.
11
00:00:26,275 --> 00:00:30,449
We can use "font-bold" to make the text bold.
12
00:00:30,449 --> 00:00:32,868
Then we can make it bigger with
13
00:00:32,868 --> 00:00:34,663
"text-2xl" for example,
14
00:00:34,741 --> 00:00:37,306
which will increase the font size.
15
00:00:37,306 --> 00:00:39,941
"xl" stands for extra-large,
16
00:00:39,941 --> 00:00:42,722
and "2xl" is even larger.
17
00:00:42,722 --> 00:00:45,940
Let's also add some padding to the bottom,
18
00:00:45,940 --> 00:00:46,706
with "pb".
19
00:00:46,783 --> 00:00:48,962
This way there some space between
20
00:00:48,962 --> 00:00:50,944
the heading and the paragraph.
21
00:00:51,010 --> 00:00:53,098
And that's enough for this page.
22
00:00:53,098 --> 00:00:56,204
But if we go to another page, like Reviews,
23
00:00:56,204 --> 00:00:59,442
this heading doesn't have any styles of course,
24
00:00:59,442 --> 00:01:02,401
because we only changed it the HomePage.
25
00:01:02,401 --> 00:01:04,909
Now, we could copy and paste these
26
00:01:04,909 --> 00:01:07,344
CSS classes into the other pages,
27
00:01:07,418 --> 00:01:11,299
but that would result in a lot of duplicated code,
28
00:01:11,299 --> 00:01:14,366
because we have quite a few different pages.
29
00:01:14,366 --> 00:01:17,194
So it's better to extract this code
30
00:01:17,194 --> 00:01:19,779
into a separate React component.
31
00:01:19,860 --> 00:01:22,761
Let's create a new file under "components",
32
00:01:22,761 --> 00:01:25,351
called "Heading.jsx".
33
00:01:25,351 --> 00:01:27,822
And we'll put the common code here.
34
00:01:27,822 --> 00:01:29,975
As usual, this will be a normal
35
00:01:29,975 --> 00:01:31,711
React function component,
36
00:01:31,781 --> 00:01:35,535
returning the code I copied from the HomePage.
37
00:01:35,535 --> 00:01:37,704
Now, we don't want to show the
38
00:01:37,704 --> 00:01:39,367
same text on all pages;
39
00:01:39,439 --> 00:01:41,891
we'll want to pass what goes inside
40
00:01:41,891 --> 00:01:43,433
the element as a prop.
41
00:01:43,503 --> 00:01:45,654
We can use "children" for that,
42
00:01:45,843 --> 00:01:50,214
and then simply display its value inside the "h1".
43
00:01:50,214 --> 00:01:53,485
Ok, so this is a very simple component,
44
00:01:53,485 --> 00:01:55,719
but it will allow us to reuse
45
00:01:55,719 --> 00:01:57,644
the same Tailwind styles.
46
00:01:57,721 --> 00:02:00,769
All we need to do is use "Heading"
47
00:02:00,769 --> 00:02:02,203
instead of "h1".
48
00:02:02,293 --> 00:02:04,181
So, here we can replace this
49
00:02:04,181 --> 00:02:06,070
code with the new component,
50
00:02:06,137 --> 00:02:08,704
that we need to import, of course.
51
00:02:08,704 --> 00:02:10,648
And if we save, the Home page
52
00:02:10,648 --> 00:02:12,457
should still look the same.
53
00:02:12,524 --> 00:02:15,486
Sometimes you just need to reload the page,
54
00:02:15,486 --> 00:02:18,891
because the browser is caching old content.
55
00:02:18,891 --> 00:02:22,000
But the heading now has the right styles.
56
00:02:22,000 --> 00:02:24,142
What we need to do at this point
57
00:02:24,142 --> 00:02:25,883
is update the other pages,
58
00:02:25,950 --> 00:02:28,894
to use this same Heading component.
59
00:02:28,894 --> 00:02:32,101
Now, since we need to update all the pages,
60
00:02:32,101 --> 00:02:35,190
what we can do is find all the right files,
61
00:02:35,190 --> 00:02:37,501
by searching for "",
62
00:02:37,630 --> 00:02:40,055
that's the element we want to replace.
63
00:02:40,055 --> 00:02:42,481
So, starting from the AboutPage,
64
00:02:42,481 --> 00:02:44,831
we can replace it with Heading,
65
00:02:44,907 --> 00:02:47,965
making sure to import the new component.
66
00:02:47,965 --> 00:02:50,516
And if we go and check the About page,
67
00:02:50,516 --> 00:02:53,226
we can see that it's using the bigger font.
68
00:02:53,226 --> 00:02:55,619
Now it's just a matter of repeating
69
00:02:55,619 --> 00:02:56,781
the same process,
70
00:02:56,849 --> 00:03:00,194
which is a bit boring, but shouldn't take long.
71
00:03:00,194 --> 00:03:02,924
This is the Reviews page sorted.
72
00:03:02,924 --> 00:03:06,275
We only have the two review pages left.
73
00:03:06,275 --> 00:03:08,616
Let's do the Hollow Knight one,
74
00:03:09,375 --> 00:03:11,229
and test that it works.
75
00:03:11,229 --> 00:03:14,194
Finally, there's the Stardew Valley page.
76
00:03:14,229 --> 00:03:17,001
Let's use the Heading component here,
77
00:03:17,309 --> 00:03:19,884
and go and check if it's displaying correctly.
78
00:03:20,089 --> 00:03:23,259
Ok, we replaced all the "h1" tags with
79
00:03:23,259 --> 00:03:25,679
our custom Heading component,
80
00:03:25,763 --> 00:03:29,248
that applies the right Tailwind CSS classes.
81
00:03:29,248 --> 00:03:31,923
This way, if in the future we decide
82
00:03:31,923 --> 00:03:33,929
to change the heading style
83
00:03:34,003 --> 00:03:36,601
we'll just need to modify this file,
84
00:03:36,601 --> 00:03:39,824
and the changes will apply to all the pages.
6079
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.