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>
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)
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.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...
I actually prefer this. You probably never need a stylesheet using this approach. Thanks for this. You're doing great work.