In this lecture, we're going to get some practice with tailwind.
Our app is partially broken.
There are two problems we're going to tackle in this lecture.
The text, color and font family need to change.
The first problem can be fixed by applying classes to the body tag open the index, the HTML file in
these source directory.
The goal is to change the text color for the entire page, if we want to apply global changes to our
document, we should apply them to the body tag.
We have two options at our disposal.
We could select the body tag, add be color property and set the color.
Alternatively, we could choose a color from tailwind head on over to the official tailwind site.
Unlike other frameworks, we can search for classes by the properties they modify.
Since we're trying to change the text color, let's search for the text color property.
Will be taken to a page with a list of classes for changing the text color of an element.
This table will tell us the name of the class, the property it affects and the value it uses on the
right side.
We're given a preview of the color.
As you can see, there are dozens of colors.
Personally, I like the text gray to Hunter class.
Let's copy it.
Back in the ED on the body tag, we're going to add the text grade to high class.
It's perfectly acceptable to modify the index, a CMLL file.
In fact, the tail wind configuration file will search through the contents of this file for tailwind
classes, we're allowed to use tailwind classes outside of components.
Let's refresh the page in the browser.
The text color has changed.
Tailwind is pretty simple to use.
We search for the property we want to change.
Choose a class and apply it to our HTML.
No need to write thesis.
If you use tailwind long enough, you'll quickly become familiar with the classes.
Let's move on to modifying the font family.
I want to change the font family of the template.
Let's 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 element.
The name of the font family we are going to apply is called Roboto.
If we look at these font sans property, we'll find Roboto Font family listed as a value.
It's possible a font family is not listed under tailwinds classes.
If that's the case, you can modify tailwinds 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.
We need to modify the tail wind configuration file.
If we want to add a new font family.
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.
Back in the browser, the bottom of the page has no spacing.
The list of videos sits tightly on the edge of the page.
We should give them room to breathe by applying padding.
Here's the challenge.
Search for a class to add padding to the bottom of the document after you find the class.
Apply it to the body tag.
The padding space should be to RAM.
Good luck and pause the video.
Welcome back.
If you're 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 page for adding padding to an element.
There are hundreds of padding classes.
We can add padding to all sides of an element, or we can add padding to an axis.
Lastly, padding can be applied to one side.
The class we're looking to apply is called PB eight.
This class will add padding to the bottom of an element.
The value is two RAM.
Let's copy it.
Next, we'll add it to the body tag and our editor.
Great.
We're finished.
We've only taken care of the sea, assess our template, we'll need images and fonts.
In the next lecture, we're going to start loading the other assets for our templates.