All language subtitles for 001 Styling Solutions_en

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.