How do you feel about CSS?

It has always been a love-hate relationship for me.

I mean, I like to experiment with it. However, my teammates at Snipcart have laughed at my demos’ design more than once (not that I agree with them.)

That’s why I’m so glad that we now have tools like Tailwind CSS to smooth devs’ relations with CSS.

On the other hand, I can confidently say that Vue.js is more part of my expertise. Today, let’s bundle these two tools while learning how to set up Tailwind CSS with Vue.

Here’s what this tutorial includes:

• Generating a Vue 3 app
• Setting up Tailwind CSS
• Defining data to play with Tailwind
• Pushing the configuration further

I’ll also cover the naming convention in Tailwind at the end of the tutorial. It should be fun. Let’s go!

What is Tailwind CSS?

In a nutshell, Tailwind CSS is a utility-first CSS framework for rapidly building custom designs.

Don’t worry if you’re not familiar with it. I’ll debunk that definition in a moment.

But let’s start at the beginning.

Tailwind came on the scene as an answer to CSS frameworks that “were doing too much”. The most popular of these frameworks that came before it being Bootstrap, I’ll use it as a point of comparison here.

Bootstrap came with a bunch of predefined styles for components such as buttons, icons, or cards. While it enabled fast shipping times, it didn’t do much in terms of offering custom designs. With time, the problem is that you can start to easily identify Bootstrap projects because they have similar looks.

That’s not how Tailwind CSS works. Instead of giving you pre-styled components, it “provides low-level utility classes that let you build completely custom designs without ever leaving your HTML.”

That’s what utility-first means in that first definition. If it still sounds nebulous to you, the tutorial below will make it more concrete.

→ Read the full tutorial here