In this section we'll finally add
some styling to our website.
Now, the simplest way to write some rules
is by using a regular CSS file.
This is especially useful for styles
that will apply to our entire app.
For example, let's create a
file called "globals.css".
The name doesn't really matter,
but I'll follow the same convention
used by Create Next App.
Here we can write our CSS rules.
Suppose we want to change the
text font for example.
We can add a rule matching the "body" element,
and here set the "font-family".
I'll use "sans-serif",
which will select whatever sans serif
font is the default on each system.
Now, for this CSS file to actually be
used we need to import it somewhere.
And since it contains global styles,
the best place to do that is in the layout file,
because the RootLayout applies to all pages.
So here we want to import "globals.css",
relative to the same folder as this file.
Note that we can import CSS files
into a JavaScript file.
This will be handled automatically
by the Next.js dev server,
and also by the build command.
In fact, if we save
you can see that our page is
now using a different font.
By the way, there's a warning in the Console,
saying that a CSS file was preloaded
"but not used within a few seconds".
This is rather strange, because if it's a CSS file
surely it must have been used,
to apply the styles within it.
I suspect this is a small issue
with the Chrome browser,
showing a false warning.
Maybe by the time you watch this
video it will have been fixed.
But in any case, it only happens in dev,
not in production,
and we can safely ignore it.
Back to our styles, they will apply to all pages.
But what if we want some rules that
only apply to a specific component?
For example, in this page we have two lists:
one with the navigation links,
that's defined in the RootLayout.
And the other one is specific to the Reviews page,
listing all the available game reviews.
Now, we'll want to style the list
in the navigation bar differently
from the review list in the middle of this page.
We could do that with CSS classes,
but there are also libraries that provide
isolated styles for each component.
Next.js supports a number of
different styling solutions.
We've already seen how to use a global CSS,
that's the first item in this list.
Another option is "CSS Modules",
that, as I was mentioning, provides
"locally scoped CSS".
Let's take a quick look at an example.
This approach lets us define
rules in a regular CSS file
and apply them to a CSS class,
like in this case "dashboard".
But then we can import those styles
into our JavaScript code
and reference each CSS class like
a regular property in JavaScript,
as "styles.dashboard" in this example.
So this is one possible option.
Then there are some libraries that do "CSS-in-JS",
which means that we can write CSS styles
directly in our JavaScript code.
The most popular of these is probably
"styled-components".
So, if you're already familiar with it
you can use it with Next.js as well.
Some of you may have used
the "Sass" pre-processor,
and again, if that's your favorite choice
you can find instructions on this page
on how to set it up in a Next.js project.
But for our example we'll be using Tailwind CSS,
that is a very popular library,
and it's also my preferred choice.
Tailwind is a "utility-first" CSS framework.
The example on this page gives the idea.
Suppose we want to style this
"ChitChat" notification card.
With a traditional approach,
you would add CSS classes to each HTML element,
like a "chat-notification"
class to the outer "div".
And then, in a separate CSS file,
you would write rules that apply to that class.
For example, set "display" to "flex",
to use the flexbox layout.
The problem with this is that you end
up with a very long list of rules,
and they're not really reusable anyway,
because they only apply to that
chat notification component.
Tailwind provides a number of
ready-made utility classes.
A utility class is simply a predefined CSS class,
like "flex",
that applies a specific rule to this element,
like enabling flexbox layout.
So we can add a bunch of these utility
classes directly to each element,
and this results in much more concise code.
If you see this approach for the first time,
it will look pretty strange.
It even seems to go against CSS best practices.
In fact, it looks similar to using inline styles.
But there are some important differences.
Tailwind provides a set of predefined classes,
that constrain your choices, making
your design more consistent.
It also makes it easy to do responsive design,
because it defines some default breakpoints
that let you apply some rules only
on large screens for example.
It also provides a way to apply classes
only to specific states,
like "hover", "focus" and so on.
All these things are not possible
with inline styles.
In my experience, Tailwind works especially well
together with a component framework, like React.
Because if you want to reuse some styles
in different parts of your application
you can simply extract a React component
encapsulating the HTML elements
together with their styles.
We'll see how Tailwind works in practice
as we develop our sample application.
To begin with, in the next video we'll install
and configure Tailwind CSS in our project.