Original subtitles

We started adding some styles to our application,

by positioning the various elements,

like the navigation links and the footer.

What we'll do in this video is add some colors.

If we search for "color palette",

we'll find a page that shows the default

colors provided by Tailwind CSS.

There are various color names,

like "slate", "gray", "zinc", and so on.

And for each color there are numbers

that identify each shade in a predefined set.

The numbers go from lighter to darker,

with 50 as the lightest shade,

and 950 as the darkest.

The first few names are variations of gray,

but there are many other colors available.

You can also customize the palette if you wish,

but we'll use the default colors

in our application.

So, let's see how to use a specific color.

Suppose we want to change the background

for the whole page.

On the body, we can set a class called "bg",

for "background",

followed by the color name,

like "orange" for example.

And we'll see suggestions for

all the available shades.

Let's try "orange-100".

You can see that the background color changed.

Maybe 100 is a bit too dark,

so let's try 50 instead.

That's more subtle.

Now, we probably want to change the

color for the links as well,

because at the moment they look

the same as regular text.

But if we keep adding code to this layout file,

it's going to get a bit messy.

So let's extract this navigation bar

into a separate component first.

We can simply move this code

into a new React component.

Now, we could create a new file

under the "app" folder,

but that can be confusing, if we

start mixing pages and layouts

with regular React components,

all in the same folder.

So, a common practice is to create a separate folder,

at the top-level of our project,

called "components".

And inside there we can add a file,

let's call it "NavBar.jsx",

where we'll write our new code.

This will be a React function component,

again called "NavBar",

that will render the elements

extracted from the layout.

That's it.

Actually, we also need to import

the Link component.

But we can now save this file,

and use the NavBar component in the RootLayout.

We can simply replace the old

code with the new component.

That we also need to import of course.

I like the "css" import to be the last one,

just as a convention.

But you can see that our page in the

browser still looks the same,

even though the NavBar is

now a separate component.

We can now more easily add some

styles to all the Links.

Let me see if I can modify them all at once.

I split them into separate lines at least.

Now, let's start with the first item.

The Link component also accepts

a "className" prop,

that will be passed to the anchor

element when it's rendered.

To change the text color we can type "text-"

followed by the color name,

and I'll use "orange" again,

so it will be like the theme

color for our website.

But for the text we'll want a dark shade,

like 800 maybe.

You can see that the Home link is

now different from the rest.

Let's apply this class to the other links as well.

I could probably have done all of them at once,

but bear with me.

Ok, all our links are now orange.

It would be nice to also provide

some visual feedback

when the user moves the mouse over them.

Let's see how to do that with Tailwind.

I will select all of them this time.

We can write "hover" followed by a ":"

to apply some styles only on mouse hover.

For example, let's "underline" the text.

So, "hover" is a modifier that will apply

only to that specific element state.

If we go and try now,

when we move the mouse over the links,

we can see that the text becomes underlined. Good.

Now, there's actually another link in the footer.

We should probably apply the same

style to that one as well.

I'll simply copy these CSS classes for now,

since it's only one other link we need to style.

If we needed the same styles in more places,

we could extract them into a reusable component.

But in this case it's simpler

to just copy them over.

Ok, the RAWG link is now orange as well,

but you can see that there's no space

between the text before and the link.

That's because JSX removes the newline

when we have some text followed by an element.

One workaround is to add a space as an expression,

so it will be preserved when

rendering the text node.

It's a bit annoying, but not a big deal.

Anyway, we've seen that Tailwind

provides a default color palette

and we used a color for the links,

and also for the page background.

In the next video we'll style the

main content of our pages.