Now that we have created a new Next.js project,
let's think about what we're going to use
to style our website.
In our Blog app we used "styled-jsx",
but I also mentioned that
there are many other possible options.
In this example we're going to use Tailwind CSS.
Tailwind is a CSS framework that's
very popular these days.
It's not specific to React,
in fact you can use it with any website,
but I find that it works very well
together with React components.
We'll see what makes Tailwind special in a minute,
but first we need to install it into our project.
If we search the docs for "next"
we'll find a page on
installing Tailwind CSS with Next.js.
There are actually two ways to do that.
The first is to use "create-next-app"
to generate a project that already includes Tailwind.
This can be done by passing the
"-e with-tailwindcss" option to "create-next-app",
where "-e" lets you specify an example project
to use as a starting point.
This is convenient, but I found that
this way what you get is not always up to date
with the latest versions of Next.js
and other packages.
So I prefer to use the other approach,
that is to add Tailwind CSS to an existing project,
that is, a default project
generated by create-next-app.
The first thing we'll need to do
is install some npm packages.
Let me put this page on one side,
so we can go back to our editor.
In a terminal, we need to
stop the dev server first,
then we can run "npm install",
and we want to save these packages
as "dev" dependencies.
The instructions use the "-D" option,
which is the short form for "--save-dev".
We want the "tailwindcss" package,
along with "postcss" and "autoprefixer",
that are two tools used to transform CSS code.
Ok. So this should have installed
those "devDependencies".
And we can move to the next step in the instructions.
We now need to create some configuration files
by running this command, that we can simply copy
and paste into our terminal.
This runs the "tailwindcss" command line tool,
and "init" will initialise the configuration files,
including one for PostCSS,
because we passed the "-p" option.
Ok. This should have created
two files in our project.
We have a "postcss.config.js",
where it configures PostCSS to use
the "tailwindcss" and "autoprefixer" plugins.
And then there a "tailwind.config.js",
with some configuration used by Tailwind.
In fact we'll need to modify this configuration file
as the next step, if we scroll down.
Here it says to configure Tailwind
to remove unused styles in production.
We can do that by copying this "purge" option
and overwrite the existing value
in the configuration file.
I'll split this array into multiple lines,
otherwise you cannot see everything.
So what this "purge" options does is:
it will look at all the JavaScript files
inside our "components" and "pages" folder,
which effectively means all our React components.
So it will see which styles we use in our components
and only keep those styles,
removing all the other rules
that come with Tailwind CSS
but we don't actually use in our code.
This will make our production bundle a lot smaller.
Ok. The final step in the set up
is to include Tailwind in our CSS.
And again there are two ways to do this:
one is to import the Tailwind CSS file
directly in the custom App component.
But we're going to follow the second approach,
that is to include Tailwind in a CSS file.
This way we have more flexibility
if we want to add our own CSS rules.
In practice, we just need to copy these three lines
and go and paste them into our "globals.css" file.
We want to replace the entire content of this file
with these lines.
Now, these are Tailwind "directives",
they're not standard CSS syntax.
This code will be processed by PostCSS
and replaced with standard CSS rules
defined in the Tailwind library.
And because it's not standard CSS,
if you want Visual Studio Code
to recognise that syntax
you need to install an extension,
such as this one called "Tailwind CSS IntelliSense".
It will also give you Tailwind-specific suggestions
and stuff like that.
Anyway, with this we're done
setting up Tailwind CSS in our project,
so we can go back to our terminal
and restart the dev server.
Let's go back to our website in the browser,
and reload it.
We can tell that the heading style
is different now.
In the next video we'll see how to
actually use the Tailwind utility classes
to style up our components.