All language subtitles for 003 Layout Styling_en

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.