We set up Tailwind CSS in our project.
Now let's see how to use it,
to add some styles to our layout.
Let's say we want some padding inside the body.
With React, we need to set the "className" prop,
and here we'll add some utility classes.
Tailwind has some excellent documentation,
so if we search for "padding"
we'll find the relevant instructions.
We can add "horizontal padding"
by writing "px-" and then a number, like 8.
This will seem cryptic at first,
but the "p" stands for "padding",
"x" means along the X axis, that is horizontally,
and 8 is the amount of padding.
If we want some "vertical padding" instead,
we'll write "py-" followed by the number.
"p" always means padding,
and "y" means on the Y axis, that is vertically.
As you get used to these naming conventions,
you'll be able to quickly figure
out the right class names
even without looking at the documentation.
So, let's add some horizontal padding,
by writing "px-"
and the editor will suggest
all the available options.
This is thanks to the Tailwind extension
we installed in the previous video.
The popup shows exactly which rules
will be applied by each CSS class.
So "px-0" will set both "padding-left"
and "padding-right" to zero.
While "px-1" will set them both to "0.25 rem",
where "rem" is a CSS unit that is relative
to the font size of the "root element".
As the comment shows, by default
"0.25 rem" will be 4 pixels.
"px-2" will use "0.5 rem", or 8px.
"px-3" is "0.75 rem", or "12px", and so on.
So, you can see that Tailwind gives us
a number of options to choose from,
but within some constraints.
There's no class to apply 10 pixels for example.
We can either choose "px-2",
that's effectively "8px",
or "px-3", that's "12px".
Limiting the available choices will
make our design more consistent.
Anyway, let's select "px-4",
that is "1rem".
And if we save,
you can see that there's now some horizontal
padding around the body.
Let's add some vertical padding as well,
with "py",
maybe "py-2".
And you can see the result in the page.
When it comes to choosing a number,
you can basically just try something
and see what it looks like,
and then pick a bigger number if you want more padding,
or vice versa.
By the way, there's always this annoying
warning in the browser console.
What I'll do is simply filter it out,
by writing "-preload" here,
which means it will exclude any messages
that contain "preload".
Otherwise it just fills the logs with noise.
Now, we may want to add some space
around the "main" element as well.
We just need some vertical padding here,
let's try "py-3".
That looks better.
Next, we could sort out the links
in the navigation bar.
We'll want to display them all in the same row,
and one way to do that is using "flex".
You can also hover over a CSS class
to see exactly which rules it applies.
"flex" simply sets the "display"
property accordingly.
We'll also want some space between each item,
with "gap-2".
"gap" is a property you can use with flexbox.
You can see that all the links
are now on the same line,
with some space between them.
I'll just use the various Tailwind
utility classes from now on,
without explaining each one in great detail.
So you can get a feel for how Tailwind works,
but we won't spend too much time on styling.
Remember that you can always
look at the documentation
if you want to see more detailed instructions.
Now, since we're positioning
the elements on the page,
let's take care of the "footer" as well.
For a start, we can center the text.
We could also make it smaller with "xs",
that means "extra-small".
This will decrease the font size.
The footer always contains the fine print.
Maybe we could also separate it
from the rest of the page,
by adding some border at the top.
The "t" stands for "top".
The line is too close to the text though;
let's add some vertical padding as well.
Ok, that's better.
Now, ideally the footer should
be at the bottom of the page.
Even if the rest of the content doesn't fill the full screen,
like in this case.
We can push the footer to the bottom
by setting the "body" to use flexbox
but in the column direction, with "flex-col".
Then set a minimum height for the body,
using "min-h-screen", which sets it to "100vh",
that means 100% of the visible height.
In other words, the body should
fill the full page.
And then we can set the "main" element to expand,
by using the "grow" class,
that sets "flex-grow" to 1.
This way the main content will expand
to take all the available space,
pushing the footer to the bottom.
You can always use the Chrome Developer Tools
to inspect any element on the page,
and see what styles it's using.
For example, if we select the "main" element
we can see that it has the "py-3" class,
that sets "padding-top" and "padding-bottom"
to "0.75rem".
And the "grow" class, that
sets "flex-grow" to "1".
We can also see the the "body" is using "flex".
The DevTools have special support for flexbox,
showing a dotted line around each item.
If you're not familiar with
the Flexbox layout in CSS,
you can find a link in the Resources
for this lecture,
where you can learn more about it.
But we can see that the "main" element
takes up most of the space,
because we set it to "grow".
And that's how we can make sure that the footer
is always at the very bottom of the page.
So, we used Tailwind to position all
the main elements of our page.
In the next video we'll see
how to add some colors.