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 Bulma.
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 bootstrap 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, but it's going to affect other card elements with titles.
One solution to get around this is by using a better specify, such as assigning an ID.
It works, but it doesn't scale very well.
This approach forces us to constantly switch between documents and style sheets.
You might also have to rewrite the same success.
The more UI elements we have, the more CIUSSS 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 elements tailwind.
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 M4.
The M4 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, CIUSSS 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 stylesheet to understand the class.
In the resource section of this lecture, I provide a link to the official tailwind sites 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 H.M. will look like with tailwinds.
Unlike bootstrap, multiple classes are being applied to the elements.
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?
Luckily, 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 M4 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 a compressed tailwind is over 300 kilobytes large.
Luckily, tailwind works hand in hand with a library called Purge Success.
In the resource section of this lecture, I provide a link to the Purge CIUSSS library.
Purge KSAZ will scan your HTML for classes that are being used.
It will then remove unused CIUSSS from your style sheets.
Purge KSAZ 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 tail wind 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 Gaming Highlights app.
In the next lecture, we're going to install tailwind.