1
00:00:03,000 --> 00:00:05,985
Now that we have created a new Next.js project,

2
00:00:05,985 --> 00:00:08,590
let's think about what we're going to use

3
00:00:08,590 --> 00:00:09,924
to style our website.

4
00:00:10,551 --> 00:00:12,982
In our Blog app we used "styled-jsx",

5
00:00:12,982 --> 00:00:14,625
but I also mentioned that

6
00:00:14,625 --> 00:00:17,121
there are many other possible options.

7
00:00:17,753 --> 00:00:21,181
In this example we're going to use Tailwind CSS.

8
00:00:21,181 --> 00:00:23,610
Tailwind is a CSS framework that's

9
00:00:23,610 --> 00:00:25,324
very popular these days.

10
00:00:25,324 --> 00:00:27,252
It's not specific to React,

11
00:00:27,252 --> 00:00:30,109
in fact you can use it with any website,

12
00:00:30,109 --> 00:00:32,537
but I find that it works very well

13
00:00:32,537 --> 00:00:34,752
together with React components.

14
00:00:34,752 --> 00:00:38,324
We'll see what makes Tailwind special in a minute,

15
00:00:39,323 --> 00:00:42,466
but first we need to install it into our project.

16
00:00:42,966 --> 00:00:45,376
If we search the docs for "next"

17
00:00:45,376 --> 00:00:46,881
we'll find a page on

18
00:00:46,881 --> 00:00:49,667
installing Tailwind CSS with Next.js.

19
00:00:50,317 --> 00:00:53,261
There are actually two ways to do that.

20
00:00:53,261 --> 00:00:56,054
The first is to use "create-next-app"

21
00:00:56,054 --> 00:01:00,055
to generate a project that already includes Tailwind.

22
00:01:00,055 --> 00:01:02,395
This can be done by passing the

23
00:01:02,395 --> 00:01:06,169
"-e with-tailwindcss" option to "create-next-app",

24
00:01:06,169 --> 00:01:09,641
where "-e" lets you specify an example project

25
00:01:09,641 --> 00:01:11,679
to use as a starting point.

26
00:01:11,679 --> 00:01:14,396
This is convenient, but I found that

27
00:01:14,396 --> 00:01:17,869
this way what you get is not always up to date

28
00:01:17,869 --> 00:01:20,511
with the latest versions of Next.js

29
00:01:20,511 --> 00:01:21,945
and other packages.

30
00:01:23,199 --> 00:01:25,712
So I prefer to use the other approach,

31
00:01:25,712 --> 00:01:29,083
that is to add Tailwind CSS to an existing project,

32
00:01:29,649 --> 00:01:31,457
that is, a default project

33
00:01:31,457 --> 00:01:33,473
generated by create-next-app.

34
00:01:33,473 --> 00:01:35,697
The first thing we'll need to do

35
00:01:35,697 --> 00:01:37,713
is install some npm packages.

36
00:01:38,421 --> 00:01:40,194
Let me put this page on one side,

37
00:01:40,194 --> 00:01:41,912
so we can go back to our editor.

38
00:01:44,554 --> 00:01:45,985
In a terminal, we need to

39
00:01:45,985 --> 00:01:47,473
stop the dev server first,

40
00:01:48,030 --> 00:01:49,903
then we can run "npm install",

41
00:01:50,403 --> 00:01:53,107
and we want to save these packages

42
00:01:53,107 --> 00:01:54,857
as "dev" dependencies.

43
00:01:54,857 --> 00:01:57,799
The instructions use the "-D" option,

44
00:01:57,799 --> 00:02:01,060
which is the short form for "--save-dev".

45
00:02:01,798 --> 00:02:04,290
We want the "tailwindcss" package,

46
00:02:04,790 --> 00:02:08,199
along with "postcss" and "autoprefixer",

47
00:02:08,990 --> 00:02:12,902
that are two tools used to transform CSS code.

48
00:02:13,402 --> 00:02:15,409
Ok. So this should have installed

49
00:02:15,409 --> 00:02:16,869
those "devDependencies".

50
00:02:17,429 --> 00:02:20,743
And we can move to the next step in the instructions.

51
00:02:20,743 --> 00:02:23,618
We now need to create some configuration files

52
00:02:24,180 --> 00:02:27,435
by running this command, that we can simply copy

53
00:02:27,435 --> 00:02:29,333
and paste into our terminal.

54
00:02:29,333 --> 00:02:32,452
This runs the "tailwindcss" command line tool,

55
00:02:32,452 --> 00:02:35,909
and "init" will initialise the configuration files,

56
00:02:36,612 --> 00:02:38,899
including one for PostCSS,

57
00:02:38,899 --> 00:02:41,889
because we passed the "-p" option.

58
00:02:42,476 --> 00:02:44,106
Ok. This should have created

59
00:02:44,106 --> 00:02:45,561
two files in our project.

60
00:02:46,119 --> 00:02:48,911
We have a "postcss.config.js",

61
00:02:48,911 --> 00:02:52,074
where it configures PostCSS to use

62
00:02:52,074 --> 00:02:56,260
the "tailwindcss" and "autoprefixer" plugins.

63
00:02:56,946 --> 00:02:59,963
And then there a "tailwind.config.js",

64
00:02:59,963 --> 00:03:03,218
with some configuration used by Tailwind.

65
00:03:03,797 --> 00:03:07,158
In fact we'll need to modify this configuration file

66
00:03:07,158 --> 00:03:09,484
as the next step, if we scroll down.

67
00:03:10,048 --> 00:03:12,446
Here it says to configure Tailwind

68
00:03:12,446 --> 00:03:15,125
to remove unused styles in production.

69
00:03:15,695 --> 00:03:18,470
We can do that by copying this "purge" option

70
00:03:19,328 --> 00:03:21,251
and overwrite the existing value

71
00:03:21,251 --> 00:03:22,812
in the configuration file.

72
00:03:23,372 --> 00:03:25,878
I'll split this array into multiple lines,

73
00:03:25,878 --> 00:03:28,026
otherwise you cannot see everything.

74
00:03:29,038 --> 00:03:31,703
So what this "purge" options does is:

75
00:03:31,703 --> 00:03:34,584
it will look at all the JavaScript files

76
00:03:34,584 --> 00:03:37,681
inside our "components" and "pages" folder,

77
00:03:37,681 --> 00:03:41,209
which effectively means all our React components.

78
00:03:41,209 --> 00:03:44,954
So it will see which styles we use in our components

79
00:03:44,954 --> 00:03:46,899
and only keep those styles,

80
00:03:46,899 --> 00:03:48,915
removing all the other rules

81
00:03:48,915 --> 00:03:50,860
that come with Tailwind CSS

82
00:03:50,860 --> 00:03:53,596
but we don't actually use in our code.

83
00:03:54,673 --> 00:03:57,631
This will make our production bundle a lot smaller.

84
00:03:58,131 --> 00:04:00,460
Ok. The final step in the set up

85
00:04:00,460 --> 00:04:02,935
is to include Tailwind in our CSS.

86
00:04:02,935 --> 00:04:05,847
And again there are two ways to do this:

87
00:04:05,847 --> 00:04:08,614
one is to import the Tailwind CSS file

88
00:04:08,614 --> 00:04:11,307
directly in the custom App component.

89
00:04:12,098 --> 00:04:15,183
But we're going to follow the second approach,

90
00:04:15,183 --> 00:04:17,999
that is to include Tailwind in a CSS file.

91
00:04:17,999 --> 00:04:20,212
This way we have more flexibility

92
00:04:20,212 --> 00:04:22,625
if we want to add our own CSS rules.

93
00:04:23,326 --> 00:04:26,894
In practice, we just need to copy these three lines

94
00:04:26,894 --> 00:04:30,393
and go and paste them into our "globals.css" file.

95
00:04:30,963 --> 00:04:34,010
We want to replace the entire content of this file

96
00:04:34,010 --> 00:04:35,047
with these lines.

97
00:04:35,608 --> 00:04:38,633
Now, these are Tailwind "directives",

98
00:04:38,633 --> 00:04:41,250
they're not standard CSS syntax.

99
00:04:41,250 --> 00:04:44,358
This code will be processed by PostCSS

100
00:04:44,358 --> 00:04:47,302
and replaced with standard CSS rules

101
00:04:47,302 --> 00:04:49,918
defined in the Tailwind library.

102
00:04:50,745 --> 00:04:53,025
And because it's not standard CSS,

103
00:04:53,025 --> 00:04:55,036
if you want Visual Studio Code

104
00:04:55,036 --> 00:04:56,644
to recognise that syntax

105
00:04:57,278 --> 00:04:59,549
you need to install an extension,

106
00:04:59,549 --> 00:05:03,126
such as this one called "Tailwind CSS IntelliSense".

107
00:05:03,694 --> 00:05:06,962
It will also give you Tailwind-specific suggestions

108
00:05:06,962 --> 00:05:08,243
and stuff like that.

109
00:05:08,807 --> 00:05:10,638
Anyway, with this we're done

110
00:05:10,638 --> 00:05:13,188
setting up Tailwind CSS in our project,

111
00:05:13,754 --> 00:05:15,761
so we can go back to our terminal

112
00:05:15,761 --> 00:05:17,404
and restart the dev server.

113
00:05:18,254 --> 00:05:20,896
Let's go back to our website in the browser,

114
00:05:20,896 --> 00:05:21,737
and reload it.

115
00:05:25,987 --> 00:05:28,282
We can tell that the heading style

116
00:05:28,282 --> 00:05:29,430
is different now.

117
00:05:29,998 --> 00:05:32,347
In the next video we'll see how to

118
00:05:32,347 --> 00:05:35,180
actually use the Tailwind utility classes

119
00:05:35,180 --> 00:05:37,045
to style up our components.