Original subtitles

In this lecture, we're going to talk about Tailwind.

It's the new kid on the block.

In the past year, tailwinds user base has grown exponentially.

There's a good reason for it.

Tailwind makes developing sites so much easier and faster.

So what is Tailwind?

Tailwind is a success framework.

It's similar to other frameworks like Bootstrap and Boerma.

It stands out from the crowd because of the approach it takes with success.

Let's talk about how bootstrap approaches success.

Bootstrap comes with classes for building UI elements.

For example, let's say we wanted to use the card components.

This code snippet shows how a card component can be created with bootstrap.

We need to create some div tags and slap some classes on them.

Pretty simple, right?

The biggest criticism of bootstrap is how similar a lot of sites look.

It's because bootstrap takes care of defining a predefined set of components.

These components are ready to go out of the box.

Customizing them is completely optional.

In some cases, you may want to change the appearance of some bootstraps element.

For example, let's say we want the color of the title to be red.

We can select the card title element to apply the changes.

This works what it's going to affect other card elements with titles.

One solution to get around this is by using a better specifiers, such as assigning an ID.

It works, but it doesn't scale very well.

This approach forces us to constantly switch between documents and stylesheets.

We might also have to rewrite the same success.

The more UI elements we have, the more success will have to write.

Another challenge is having to memorize what every class does.

The classes and bootstrap describe the UI element.

They don't describe what properties are applied to the element till resolve this issue by focusing on

a different way to write templates.

Tailwind does not focus on UI elements.

If you were to browse the documentation, you won't encounter many UI elements.

Instead, Tailwind focuses on utility classes.

What does that exactly mean?

Tailwind will define hundreds of classes.

Each class will modify one property.

For example, there's a class called M for the M for class will set the margins of an element to one

ram.

There aren't any other properties under this class.

On the other hand, a bootstrap class can modify multiple properties of an element.

For this reason, Tailwind has a larger learning curve.

It's a framework that demands solid knowledge of success.

You won't get far if you don't know much about success.

Luckily, success is a simple language.

Tailwind looks difficult to read, but it's not.

Once you understand what each class does by looking at the classes, you will immediately know what

properties are being applied to the elements.

This saves you time from having to switch over to the style sheet to understand the class.

In the resource section of this lecture, I provide a link to the official Tailwind site on the home

page will be shown an example of the type UI elements we can create with this framework on the right

will find what our HTML will look like with tailwind.

Unlike Bootstrap, multiple classes are being applied to the element.

Each class will change one property.

From this live example, we can see how each class affects the element as they're added in.

This leads us to the question how do we know which class to use locally?

Tailwind has some of the best documentation around.

Each class is well documented at the top.

We can search for any class.

Let's search for the M for class we looked at earlier.

According to the documentation, this class will change the margins of an element.

It'll even tell us by how much.

We never have to look at the success.

The documentation will always tell us what property and value a class will have.

We're not limited to a single class either.

There are multiple classes for changing the margins of an element.

We can add margins to one side or access tailwind.

Seems great so far.

So what's the catch?

Tailwind is much larger than most libraries on compressed calendars over three hundred kilobytes large.

Luckily, Tailwind works hand in hand with a library called Perves Success.

In the resource section of this lecture, I provide a link to the Purge Success Library Purge Success

will scan your GML for classes that are being used.

It will then remove unused VSS from your stylesheets per SS is commonly used with tailwind.

On average, most Tailwind sites use less than 10 kilobytes.

This process is automatically done for us by installing the Tailwind module.

As you can see, Tailwind is rising in popularity for a reason.

If you're confused by any class we use, you can always consult the documentation.

It'll tell you right away what property gets applied to an element.

For this course, we're going to be using tailwind for our music app.

In the next lecture, we're going to install Tailwind.