All language subtitles for 002 Installing Tailwind CSS_en

I mentioned that we'll use Tailwind

CSS for styling our website,

so in this video we'll install

it into our project.

We'll need these three packages,

that I'll copy from here.

Then we can go back to Visual Studio Code,

open the terminal, stop the server,

and run "npm install --save-dev"

pasting the required packages.

"tailwindcss" is based on "postcss",

that is a tool for transforming stylesheets,

and also "autoprefixer",

that adds browser-specific prefixes to CSS rules.

The "--save-dev" option will add the

packages to our "devDependencies",

rather than our production "dependencies".

Let's run this command now;

it will take a few seconds.

Ok, it installed everything.

We'll now have a "tailwindcss" command,

that we can run with "npx".

and we can use it to initialize our project,

with "init",

passing the "postcss" option.

This created two configuration files,

that we can see in our project.

There's "postcss.config.js",

that simply tells it to use the "tailwindcss"

and "autoprefixer" plugins.

We can leave this as it is.

Then there's a "tailwind.config.js".

Here we need to edit the "content" property,

to tell Tailwind which of our

files contain CSS classes.

This is documented in the installation page.

Tailwind will scan our files to see

which CSS classes we're using,

so that it will only send to the browser

the styles we actually need.

But for this to work we need to tell

it where to find the files,

by specifying a pattern like this one.

Let's copy it into our project.

This will match all the files

inside our "app" folder

that have one of these extensions.

In fact, we'll only use CSS classes

in our React components,

and we use the "jsx" extension for those files,

(or "tsx" if you use TypeScript,)

so we could remove the other extensions,

which should make it a little bit faster,

because it has less files to scan.

Let's also add another folder,

called "components".

Because later on we'll add some React

components in that folder,

just to keep them separate from

our page and layout components.

Ok, this is the Tailwind configuration file.

There is one final step we need to do,

that is importing the Tailwind styles

into our "globals.css" file.

We can do that by adding these three directives.

So let's go and edit our "globals.css".

We can replace the existing rule

with the Tailwind directives,

so we'll use the Tailwind styles by default.

Now, since we're installing things,

there's also a very useful Visual Studio

Code extension for Tailwind.

You can find it simply by

searching for "tailwind".

Just make sure it's the one from Tailwind Labs.

Let's install it!

This will provide code auto-completion

for CSS classes,

as we'll see in the next video,

when we'll start adding some Tailwind

utilities to our code.

Ok, the CSS framework is fully configured.

We can now go back to our application,

and see what it looks like with Tailwind.

We just need to restart our dev server,

it might take slightly longer

to start the first time,

because it needs to compile

all the new Tailwind code.

But you can see that our app

certainly looks different.

This may seem a bit strange at first,

but Tailwind resets all the browser styles,

so our elements have almost no styles by default.

It will be up to us to explicitly define

the style for each element,

by adding some Tailwind utility classes,

and we'll start doing that in the next video.