Utility-First CSS with Tailwind

Description

Modernize your styles with Tailwind, the popular utility-first CSS framework.

In the past few years, utility-first CSS has been a popular trend within the front-end landscape. You might have seen it mentioned alongside a tool called Tailwind CSS.

So what is “utility”?

What problem does this utility-first approach solve?

How does Tailwind fit into this?

And most importantly: how do you apply Tailwind in a Vue.js application?

We’re going to answer all of that in this course.

Okay, but why do we need Tailwind?
Notice that in the example above, we didn’t even have to use any framework. So why do we need Tailwind, or any similar framework for that matter?

First, someone has to create all of these CSS Utility classes (hundreds of them), so either you create them yourself, or you can use an existing solution with widely-adopted naming conventions.

Get Instant Notification of New Jobs on our Telegram channel.

Second, a framework provides more useful features, such as Just-In-Time compilation to create dynamic classes, and responsive design features.

We’ll talk more about these later in the course.

Lastly, a framework can be customized with your own configuration settings.

What is this course about?
This course is structured around refactoring an existing Vue.js application. Along the way, you’ll learn the basics of using Tailwind. And we’ll also get into advanced topics such as Responsive Design, Conditional Style, and Configurations. We’ll wrap up the course with the final lessons of Custom Class and Code-Reuse Patterns.

At the end, you’ll be able to apply Tailwind in a Vue.js project.

If that sounds good to you, let’s move to the next lesson where we’ll be setting up Tailwind for a Vue.js application.