Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:03,000 --> 00:00:05,329
In this section we'll finally add
2
00:00:05,329 --> 00:00:07,306
some styling to our website.
3
00:00:07,377 --> 00:00:10,772
Now, the simplest way to write some rules
4
00:00:10,772 --> 00:00:13,339
is by using a regular CSS file.
5
00:00:13,422 --> 00:00:16,361
This is especially useful for styles
6
00:00:16,361 --> 00:00:19,139
that will apply to our entire app.
7
00:00:19,221 --> 00:00:21,710
For example, let's create a
8
00:00:21,710 --> 00:00:24,106
file called "globals.css".
9
00:00:24,198 --> 00:00:26,097
The name doesn't really matter,
10
00:00:26,097 --> 00:00:28,888
but I'll follow the same convention
11
00:00:28,888 --> 00:00:30,802
used by Create Next App.
12
00:00:30,882 --> 00:00:33,552
Here we can write our CSS rules.
13
00:00:33,552 --> 00:00:35,727
Suppose we want to change the
14
00:00:35,727 --> 00:00:37,378
text font for example.
15
00:00:37,453 --> 00:00:40,518
We can add a rule matching the "body" element,
16
00:00:40,518 --> 00:00:43,019
and here set the "font-family".
17
00:00:43,019 --> 00:00:44,726
I'll use "sans-serif",
18
00:00:44,726 --> 00:00:47,428
which will select whatever sans serif
19
00:00:47,428 --> 00:00:49,985
font is the default on each system.
20
00:00:50,058 --> 00:00:52,986
Now, for this CSS file to actually be
21
00:00:52,986 --> 00:00:55,835
used we need to import it somewhere.
22
00:00:55,915 --> 00:00:58,780
And since it contains global styles,
23
00:00:58,780 --> 00:01:02,455
the best place to do that is in the layout file,
24
00:01:02,455 --> 00:01:06,445
because the RootLayout applies to all pages.
25
00:01:06,445 --> 00:01:10,346
So here we want to import "globals.css",
26
00:01:10,346 --> 00:01:14,007
relative to the same folder as this file.
27
00:01:14,007 --> 00:01:16,802
Note that we can import CSS files
28
00:01:16,802 --> 00:01:18,749
into a JavaScript file.
29
00:01:18,834 --> 00:01:21,267
This will be handled automatically
30
00:01:21,267 --> 00:01:23,127
by the Next.js dev server,
31
00:01:23,199 --> 00:01:25,437
and also by the build command.
32
00:01:25,437 --> 00:01:27,023
In fact, if we save
33
00:01:27,023 --> 00:01:29,112
you can see that our page is
34
00:01:29,112 --> 00:01:31,126
now using a different font.
35
00:01:31,201 --> 00:01:33,958
By the way, there's a warning in the Console,
36
00:01:33,958 --> 00:01:37,281
saying that a CSS file was preloaded
37
00:01:37,281 --> 00:01:40,603
"but not used within a few seconds".
38
00:01:40,695 --> 00:01:44,538
This is rather strange, because if it's a CSS file
39
00:01:44,538 --> 00:01:46,706
surely it must have been used,
40
00:01:46,706 --> 00:01:48,873
to apply the styles within it.
41
00:01:48,945 --> 00:01:50,962
I suspect this is a small issue
42
00:01:50,962 --> 00:01:52,523
with the Chrome browser,
43
00:01:52,588 --> 00:01:54,819
showing a false warning.
44
00:01:54,819 --> 00:01:56,856
Maybe by the time you watch this
45
00:01:56,856 --> 00:01:58,765
video it will have been fixed.
46
00:01:58,829 --> 00:02:01,765
But in any case, it only happens in dev,
47
00:02:01,765 --> 00:02:03,087
not in production,
48
00:02:03,160 --> 00:02:05,070
and we can safely ignore it.
49
00:02:05,070 --> 00:02:08,838
Back to our styles, they will apply to all pages.
50
00:02:08,838 --> 00:02:11,558
But what if we want some rules that
51
00:02:11,558 --> 00:02:14,279
only apply to a specific component?
52
00:02:14,357 --> 00:02:17,888
For example, in this page we have two lists:
53
00:02:17,888 --> 00:02:19,853
one with the navigation links,
54
00:02:19,853 --> 00:02:22,399
that's defined in the RootLayout.
55
00:02:22,399 --> 00:02:26,143
And the other one is specific to the Reviews page,
56
00:02:26,143 --> 00:02:29,062
listing all the available game reviews.
57
00:02:29,062 --> 00:02:31,433
Now, we'll want to style the list
58
00:02:31,433 --> 00:02:33,803
in the navigation bar differently
59
00:02:33,875 --> 00:02:37,139
from the review list in the middle of this page.
60
00:02:37,139 --> 00:02:40,031
We could do that with CSS classes,
61
00:02:40,031 --> 00:02:43,130
but there are also libraries that provide
62
00:02:43,130 --> 00:02:45,775
isolated styles for each component.
63
00:02:45,850 --> 00:02:48,396
Next.js supports a number of
64
00:02:48,396 --> 00:02:50,941
different styling solutions.
65
00:02:51,032 --> 00:02:54,779
We've already seen how to use a global CSS,
66
00:02:54,779 --> 00:02:57,031
that's the first item in this list.
67
00:02:57,031 --> 00:03:00,319
Another option is "CSS Modules",
68
00:03:00,319 --> 00:03:03,227
that, as I was mentioning, provides
69
00:03:03,227 --> 00:03:04,972
"locally scoped CSS".
70
00:03:05,055 --> 00:03:07,484
Let's take a quick look at an example.
71
00:03:07,484 --> 00:03:09,853
This approach lets us define
72
00:03:09,853 --> 00:03:12,138
rules in a regular CSS file
73
00:03:12,222 --> 00:03:14,617
and apply them to a CSS class,
74
00:03:14,617 --> 00:03:17,013
like in this case "dashboard".
75
00:03:17,092 --> 00:03:19,725
But then we can import those styles
76
00:03:19,725 --> 00:03:21,529
into our JavaScript code
77
00:03:21,605 --> 00:03:24,191
and reference each CSS class like
78
00:03:24,191 --> 00:03:26,777
a regular property in JavaScript,
79
00:03:26,855 --> 00:03:30,438
as "styles.dashboard" in this example.
80
00:03:30,438 --> 00:03:33,279
So this is one possible option.
81
00:03:33,279 --> 00:03:37,744
Then there are some libraries that do "CSS-in-JS",
82
00:03:37,744 --> 00:03:40,917
which means that we can write CSS styles
83
00:03:40,917 --> 00:03:43,455
directly in our JavaScript code.
84
00:03:43,534 --> 00:03:46,221
The most popular of these is probably
85
00:03:46,221 --> 00:03:47,673
"styled-components".
86
00:03:47,746 --> 00:03:50,291
So, if you're already familiar with it
87
00:03:50,291 --> 00:03:53,131
you can use it with Next.js as well.
88
00:03:53,131 --> 00:03:54,987
Some of you may have used
89
00:03:54,987 --> 00:03:56,844
the "Sass" pre-processor,
90
00:03:56,918 --> 00:03:59,970
and again, if that's your favorite choice
91
00:03:59,970 --> 00:04:02,473
you can find instructions on this page
92
00:04:02,473 --> 00:04:05,991
on how to set it up in a Next.js project.
93
00:04:05,991 --> 00:04:09,902
But for our example we'll be using Tailwind CSS,
94
00:04:09,902 --> 00:04:12,053
that is a very popular library,
95
00:04:12,053 --> 00:04:14,584
and it's also my preferred choice.
96
00:04:14,584 --> 00:04:19,146
Tailwind is a "utility-first" CSS framework.
97
00:04:19,146 --> 00:04:21,831
The example on this page gives the idea.
98
00:04:21,831 --> 00:04:24,142
Suppose we want to style this
99
00:04:24,142 --> 00:04:26,453
"ChitChat" notification card.
100
00:04:26,532 --> 00:04:28,523
With a traditional approach,
101
00:04:28,523 --> 00:04:32,803
you would add CSS classes to each HTML element,
102
00:04:32,803 --> 00:04:34,927
like a "chat-notification"
103
00:04:34,927 --> 00:04:36,969
class to the outer "div".
104
00:04:37,051 --> 00:04:39,915
And then, in a separate CSS file,
105
00:04:39,915 --> 00:04:43,385
you would write rules that apply to that class.
106
00:04:43,385 --> 00:04:46,509
For example, set "display" to "flex",
107
00:04:46,509 --> 00:04:48,704
to use the flexbox layout.
108
00:04:48,788 --> 00:04:51,541
The problem with this is that you end
109
00:04:51,541 --> 00:04:54,071
up with a very long list of rules,
110
00:04:54,145 --> 00:04:57,041
and they're not really reusable anyway,
111
00:04:57,041 --> 00:04:59,323
because they only apply to that
112
00:04:59,323 --> 00:05:01,384
chat notification component.
113
00:05:01,457 --> 00:05:04,011
Tailwind provides a number of
114
00:05:04,011 --> 00:05:06,388
ready-made utility classes.
115
00:05:06,476 --> 00:05:10,738
A utility class is simply a predefined CSS class,
116
00:05:10,738 --> 00:05:11,782
like "flex",
117
00:05:11,869 --> 00:05:15,123
that applies a specific rule to this element,
118
00:05:15,123 --> 00:05:17,594
like enabling flexbox layout.
119
00:05:17,594 --> 00:05:20,297
So we can add a bunch of these utility
120
00:05:20,297 --> 00:05:22,644
classes directly to each element,
121
00:05:22,715 --> 00:05:26,396
and this results in much more concise code.
122
00:05:26,396 --> 00:05:29,217
If you see this approach for the first time,
123
00:05:29,217 --> 00:05:31,012
it will look pretty strange.
124
00:05:31,076 --> 00:05:35,181
It even seems to go against CSS best practices.
125
00:05:35,181 --> 00:05:39,094
In fact, it looks similar to using inline styles.
126
00:05:39,094 --> 00:05:41,898
But there are some important differences.
127
00:05:41,898 --> 00:05:46,032
Tailwind provides a set of predefined classes,
128
00:05:46,032 --> 00:05:48,772
that constrain your choices, making
129
00:05:48,772 --> 00:05:50,964
your design more consistent.
130
00:05:51,043 --> 00:05:54,655
It also makes it easy to do responsive design,
131
00:05:54,655 --> 00:05:58,070
because it defines some default breakpoints
132
00:05:58,070 --> 00:06:00,483
that let you apply some rules only
133
00:06:00,483 --> 00:06:02,540
on large screens for example.
134
00:06:02,611 --> 00:06:06,053
It also provides a way to apply classes
135
00:06:06,053 --> 00:06:08,170
only to specific states,
136
00:06:08,259 --> 00:06:11,070
like "hover", "focus" and so on.
137
00:06:11,070 --> 00:06:13,593
All these things are not possible
138
00:06:13,593 --> 00:06:15,045
with inline styles.
139
00:06:15,121 --> 00:06:18,700
In my experience, Tailwind works especially well
140
00:06:18,700 --> 00:06:22,406
together with a component framework, like React.
141
00:06:22,406 --> 00:06:25,144
Because if you want to reuse some styles
142
00:06:25,144 --> 00:06:27,744
in different parts of your application
143
00:06:27,812 --> 00:06:31,028
you can simply extract a React component
144
00:06:31,028 --> 00:06:33,579
encapsulating the HTML elements
145
00:06:33,579 --> 00:06:35,801
together with their styles.
146
00:06:35,883 --> 00:06:39,091
We'll see how Tailwind works in practice
147
00:06:39,091 --> 00:06:41,786
as we develop our sample application.
148
00:06:41,786 --> 00:06:45,086
To begin with, in the next video we'll install
149
00:06:45,086 --> 00:06:48,922
and configure Tailwind CSS in our project.
10991
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.