We've seen how to use colors with Tailwind CSS.
Now, all the styles we added so
far are in the RootLayout,
so they will apply to all the pages,
not just Home.
But we'll also want to style
the main page content.
For example, we should make
the heading text bigger.
So let's add some CSS classes here.
We can use "font-bold" to make the text bold.
Then we can make it bigger with
"text-2xl" for example,
which will increase the font size.
"xl" stands for extra-large,
and "2xl" is even larger.
Let's also add some padding to the bottom,
with "pb".
This way there some space between
the heading and the paragraph.
And that's enough for this page.
But if we go to another page, like Reviews,
this heading doesn't have any styles of course,
because we only changed it the HomePage.
Now, we could copy and paste these
CSS classes into the other pages,
but that would result in a lot of duplicated code,
because we have quite a few different pages.
So it's better to extract this code
into a separate React component.
Let's create a new file under "components",
called "Heading.jsx".
And we'll put the common code here.
As usual, this will be a normal
React function component,
returning the code I copied from the HomePage.
Now, we don't want to show the
same text on all pages;
we'll want to pass what goes inside
the element as a prop.
We can use "children" for that,
and then simply display its value inside the "h1".
Ok, so this is a very simple component,
but it will allow us to reuse
the same Tailwind styles.
All we need to do is use "Heading"
instead of "h1".
So, here we can replace this
code with the new component,
that we need to import, of course.
And if we save, the Home page
should still look the same.
Sometimes you just need to reload the page,
because the browser is caching old content.
But the heading now has the right styles.
What we need to do at this point
is update the other pages,
to use this same Heading component.
Now, since we need to update all the pages,
what we can do is find all the right files,
by searching for "",
that's the element we want to replace.
So, starting from the AboutPage,
we can replace it with Heading,
making sure to import the new component.
And if we go and check the About page,
we can see that it's using the bigger font.
Now it's just a matter of repeating
the same process,
which is a bit boring, but shouldn't take long.
This is the Reviews page sorted.
We only have the two review pages left.
Let's do the Hollow Knight one,
and test that it works.
Finally, there's the Stardew Valley page.
Let's use the Heading component here,
and go and check if it's displaying correctly.
Ok, we replaced all the "h1" tags with
our custom Heading component,
that applies the right Tailwind CSS classes.
This way, if in the future we decide
to change the heading style
we'll just need to modify this file,
and the changes will apply to all the pages.