DEV Community

Michael Z
Michael Z

Posted on • Originally published at michaelzanggl.com

Tailwind CSS for skeptics - Interactive Tailwind CSS tutorial

Tailwind CSS is an amazing framework, but when people first see this:

<div class="md:flex bg-white bg-gray-200 rounded-lg p-6">
    <img class="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6" src="https://via.placeholder.com/150">
    <div class="text-center md:text-left">
      <h2 class="text-lg">Erin Lindford</h2>
      <div class="text-purple-500">Customer Support</div>
      <div class="text-gray-600">erinlindford@example.com</div>
      <div class="text-gray-600">(555) 765-4321</div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Well, ... It looks horrendous, doesn't it?

Turns out it comes with a ton of great benefits and once you try it, it's hard to go back.

But you don't have to do it alone, I've created an interactive tutorial to walk you through the benefits, let you play with it and feel the productivity.

You can check it out here. Tailwind isn't hard, in fact, the tutorial is less than 20 slides!

So if you are skeptical about Tailwind, or want to find out why it has gotten this popular, please take a look ;)

Discussion (3)

Collapse
leob profile image
leob • Edited on

Nice tutorial.

I think the point is that you can wrap all of this stuff inside a component, right? You don't want to have it like that all the time, all over the place.

BTW when using Bootstap I already tend to use a utility style approach like class="btn p-2 mb-3 d-flex" and so on, whenever possible. But of course Tailwind takes it up a notch.

Collapse
michi profile image
Michael Z Author

Yup, you probably already use some form of separation of concerns, be it through a component library like React or template partials in backend frameworks like Laravel.

I have the same experience with Bootstrap and Vuetify. They adopt more and more low-level utilities. Interesting to see where this goes...

Collapse
vicradon profile image
Osinachi Chukwujama • Edited on

I actually prefer this. You probably never need a stylesheet using this approach. Thanks for this. You're doing great work.