Building Tailwind Components with Vue

In this lesson, we’ll learn how to make complex components to design our web pages using a flexible and more effective approach.

Why do we need a front-end framework?

Extracting component classes, as demonstrated before, works well for fairly small, simple components. If we want to create a complex component with multiple elements, we’ll need to use a more flexible approach. By “flexible,” we mean more reusable and easier to manage. As we’ve seen already, even for our simple alert component, we needed to create many component classes for the different states or parts of the component. Imagine if we want to create a fairly complex component, such as a card. Doing this by using the @apply directive would be quite impractical. After all, we want to simplify our code, not make it a mess, right?

Another way we can utilize the full potential of Tailwind is by using it in front-end frameworks (like Vue, React, and Svelte) that allow us to create reusable components. This will give us much more flexibility when we want to build complex components. We’ll demonstrate this by creating a general recipe card component with Vue.