Original subtitles

In this lecture, we're going to get some practice with Tailwind.

Here's what our site looks like.

It's partially broken.

We're going to be fixing this soon.

We'll start by applying some classes to the body tag.

There are two things they want to change.

They're the font, family and background color of the document.

In another tab, I have the static version of the templates.

In the static version.

The font family is set to Roboto.

The background color is like gray.

We should apply these changes to our template.

Let's start with the color of the backgrounds.

We have two options at our disposal.

We could select the body tag, add the background color property and set the color.

Alternatively, we could choose a color from tailwind.

Head on over to the official Tailwind site.

At the top, we can search for the property we want to modify.

Since we're trying to change the background color, let's search for the background color property.

We'll be taken to a page with a list of classes for changing the background color of an element.

This table will tell us the name of the class, the property it affects and the value it uses.

There's even a preview of the color to the right.

As you can see, there are dozens of colors.

Personally, I like BG Gray 100.

Let's copy it.

In our editor.

Let's open the index HTML file.

The indexed HTML file is where the body tag is located on the body tag.

We're going to add the BG Gray 100 class.

It's perfectly acceptable to modify the indexed HTML file.

In fact, the tailwind configuration file will search through the contents of this file for Tailwind

classes.

We're allowed to use Tailwind classes outside of view components.

Let's refresh the page to see what we get.

The background color has changed.

Tailwind is pretty simple to use.

We search for the property you want to change, choose a class and apply it to our HTML.

No need to write CSS.

If you use tailwind long enough, you'll quickly become familiar with the classes.

Let's tackle the next issue.

I want to change the font family of the template.

Let's head on over to the Tailwind documentation.

This time we're going to search for the font family property.

Tailwind will provide us with three classes for changing the font family of the elements.

The name of the font family we want to apply is called Roboto.

If we look at the font sans property, we'll find the Roboto font family listed as a value.

It's possible the font family is not listed under tailwinds classes.

If that's the case, you can modify tailwind to include your font family.

On the sidebar, click on the Customizing Link.

Tailwind will provide instructions for how to include a value not listed in its default configuration

according to the documentation.

If we want to add a new font family, we need to modify the tailwind configuration file.

Luckily for us, we won't need to modify the configuration.

Let's go back to our editors.

On the body tag and the font sans class.

This class will apply the Roboto font family to our documents.

However, it will not load the font family itself.

We still need to handle that step ourselves.

We'll talk about loading assets in the next lecture.

For now, we'll leave it at this.

I have a challenge for you.

We're creating a music application.

At the bottom of every page, there is an audio player.

This audio player is going to need space at the end of the document so that it doesn't overlap with

other elements.

If the browser is scrolled to the bottom of the page, we should add padding.

Here's the challenge Search for a class to add padding to the bottom of the document.

After you find a class, apply it to the body tag.

The padding space should be six REM.

Good luck and pause the video.

Welcome back.

If you were able to solve this challenge, that's great.

If not, that's fine too.

We'll tackle it together.

At the moment, I'm on the documentation for adding padding to an element.

There are hundreds of padding classes.

We can add padding to all signs of an element, or we can add padding to an axis.

We can even add padding to one side.

The class we're looking to apply is called PB 24.

This class will add padding to the bottom of an element.

The value is six ram.

Let's copy it.

Next, we'll add it to the body tag in our editor.

Great.

We're finished.

We've only taken care of the CCIS.

Our template will need images and fonts.

In the next lecture we're going to start loading the other assets for our template.