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: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.
7075
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.