Original subtitles

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.