1
00:00:03,000 --> 00:00:06,059
I mentioned that we'll use Tailwind

2
00:00:06,059 --> 00:00:08,506
CSS for styling our website,

3
00:00:08,594 --> 00:00:10,951
so in this video we'll install

4
00:00:10,951 --> 00:00:12,523
it into our project.

5
00:00:12,601 --> 00:00:14,774
We'll need these three packages,

6
00:00:14,774 --> 00:00:16,471
that I'll copy from here.

7
00:00:16,539 --> 00:00:19,643
Then we can go back to Visual Studio Code,

8
00:00:19,643 --> 00:00:22,288
open the terminal, stop the server,

9
00:00:22,783 --> 00:00:26,083
and run "npm install --save-dev"

10
00:00:26,083 --> 00:00:28,288
pasting the required packages.

11
00:00:28,288 --> 00:00:32,404
"tailwindcss" is based on "postcss",

12
00:00:32,404 --> 00:00:35,706
that is a tool for transforming stylesheets,

13
00:00:35,706 --> 00:00:37,939
and also "autoprefixer",

14
00:00:37,939 --> 00:00:42,398
that adds browser-specific prefixes to CSS rules.

15
00:00:42,398 --> 00:00:44,994
The "--save-dev" option will add the

16
00:00:44,994 --> 00:00:47,446
packages to our "devDependencies",

17
00:00:47,518 --> 00:00:50,486
rather than our production "dependencies".

18
00:00:50,486 --> 00:00:52,322
Let's run this command now;

19
00:00:53,306 --> 00:00:55,108
it will take a few seconds.

20
00:00:55,366 --> 00:00:57,747
Ok, it installed everything.

21
00:00:57,747 --> 00:01:00,902
We'll now have a "tailwindcss" command,

22
00:01:00,902 --> 00:01:03,086
that we can run with "npx".

23
00:01:03,166 --> 00:01:06,266
and we can use it to initialize our project,

24
00:01:06,266 --> 00:01:07,112
with "init",

25
00:01:07,182 --> 00:01:09,863
passing the "postcss" option.

26
00:01:09,863 --> 00:01:12,681
This created two configuration files,

27
00:01:12,681 --> 00:01:15,484
that we can see in our project.

28
00:01:15,484 --> 00:01:18,016
There's "postcss.config.js",

29
00:01:18,106 --> 00:01:22,183
that simply tells it to use the "tailwindcss"

30
00:01:22,183 --> 00:01:24,629
and "autoprefixer" plugins.

31
00:01:24,720 --> 00:01:26,532
We can leave this as it is.

32
00:01:26,532 --> 00:01:30,356
Then there's a "tailwind.config.js".

33
00:01:30,356 --> 00:01:33,781
Here we need to edit the "content" property,

34
00:01:33,781 --> 00:01:36,322
to tell Tailwind which of our

35
00:01:36,322 --> 00:01:38,600
files contain CSS classes.

36
00:01:38,687 --> 00:01:41,775
This is documented in the installation page.

37
00:01:41,775 --> 00:01:44,497
Tailwind will scan our files to see

38
00:01:44,497 --> 00:01:46,830
which CSS classes we're using,

39
00:01:46,908 --> 00:01:49,598
so that it will only send to the browser

40
00:01:49,598 --> 00:01:51,481
the styles we actually need.

41
00:01:51,548 --> 00:01:54,018
But for this to work we need to tell

42
00:01:54,018 --> 00:01:55,870
it where to find the files,

43
00:01:55,938 --> 00:01:58,989
by specifying a pattern like this one.

44
00:01:58,989 --> 00:02:01,067
Let's copy it into our project.

45
00:02:01,067 --> 00:02:03,252
This will match all the files

46
00:02:03,252 --> 00:02:04,984
inside our "app" folder

47
00:02:05,059 --> 00:02:07,590
that have one of these extensions.

48
00:02:07,590 --> 00:02:10,160
In fact, we'll only use CSS classes

49
00:02:10,160 --> 00:02:11,922
in our React components,

50
00:02:11,996 --> 00:02:15,795
and we use the "jsx" extension for those files,

51
00:02:15,795 --> 00:02:18,523
(or "tsx" if you use TypeScript,)

52
00:02:18,523 --> 00:02:21,248
so we could remove the other extensions,

53
00:02:21,248 --> 00:02:24,279
which should make it a little bit faster,

54
00:02:24,279 --> 00:02:26,792
because it has less files to scan.

55
00:02:26,866 --> 00:02:28,835
Let's also add another folder,

56
00:02:28,835 --> 00:02:30,147
called "components".

57
00:02:30,212 --> 00:02:32,883
Because later on we'll add some React

58
00:02:32,883 --> 00:02:34,760
components in that folder,

59
00:02:34,832 --> 00:02:37,126
just to keep them separate from

60
00:02:37,126 --> 00:02:39,421
our page and layout components.

61
00:02:39,495 --> 00:02:43,093
Ok, this is the Tailwind configuration file.

62
00:02:43,093 --> 00:02:46,058
There is one final step we need to do,

63
00:02:46,058 --> 00:02:49,333
that is importing the Tailwind styles

64
00:02:49,333 --> 00:02:51,811
into our "globals.css" file.

65
00:02:51,899 --> 00:02:55,412
We can do that by adding these three directives.

66
00:02:55,412 --> 00:02:59,290
So let's go and edit our "globals.css".

67
00:02:59,290 --> 00:03:01,594
We can replace the existing rule

68
00:03:01,594 --> 00:03:03,682
with the Tailwind directives,

69
00:03:03,754 --> 00:03:07,416
so we'll use the Tailwind styles by default.

70
00:03:07,416 --> 00:03:09,872
Now, since we're installing things,

71
00:03:10,016 --> 00:03:12,870
there's also a very useful Visual Studio

72
00:03:12,870 --> 00:03:14,867
Code extension for Tailwind.

73
00:03:14,938 --> 00:03:16,626
You can find it simply by

74
00:03:16,626 --> 00:03:18,313
searching for "tailwind".

75
00:03:18,381 --> 00:03:22,326
Just make sure it's the one from Tailwind Labs.

76
00:03:22,326 --> 00:03:23,538
Let's install it!

77
00:03:23,766 --> 00:03:26,974
This will provide code auto-completion

78
00:03:26,974 --> 00:03:28,325
for CSS classes,

79
00:03:28,409 --> 00:03:30,326
as we'll see in the next video,

80
00:03:30,326 --> 00:03:33,026
when we'll start adding some Tailwind

81
00:03:33,026 --> 00:03:34,631
utilities to our code.

82
00:03:34,704 --> 00:03:38,503
Ok, the CSS framework is fully configured.

83
00:03:38,503 --> 00:03:41,018
We can now go back to our application,

84
00:03:41,303 --> 00:03:44,307
and see what it looks like with Tailwind.

85
00:03:44,307 --> 00:03:47,283
We just need to restart our dev server,

86
00:03:47,387 --> 00:03:49,208
it might take slightly longer

87
00:03:49,208 --> 00:03:50,716
to start the first time,

88
00:03:50,778 --> 00:03:52,827
because it needs to compile

89
00:03:52,827 --> 00:03:54,800
all the new Tailwind code.

90
00:03:54,875 --> 00:03:56,782
But you can see that our app

91
00:03:56,782 --> 00:03:58,553
certainly looks different.

92
00:03:58,621 --> 00:04:01,387
This may seem a bit strange at first,

93
00:04:01,387 --> 00:04:04,993
but Tailwind resets all the browser styles,

94
00:04:04,993 --> 00:04:09,498
so our elements have almost no styles by default.

95
00:04:09,498 --> 00:04:12,542
It will be up to us to explicitly define

96
00:04:12,542 --> 00:04:14,596
the style for each element,

97
00:04:14,672 --> 00:04:17,861
by adding some Tailwind utility classes,

98
00:04:17,861 --> 00:04:20,636
and we'll start doing that in the next video.