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.