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.