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.