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.