DEV Community 👩‍💻👨‍💻

Michael Z
Michael Z

Posted on • Originally published at

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="">
    <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"></div>
      <div class="text-gray-600">(555) 765-4321</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 ;)

Top comments (3)

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.

michi profile image
Michael Z

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...

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.

Let's hear from your organization

Create an Organization and start sharing content with the community on DEV.