How Tailwind helped me better understand CSS

This is my first post on Dev.to, and really anywhere, in an attempt to be more self-critical and share my experiences

I've been building websites for almost 8 years and CSS has always been my biggest weakness.

Like a lot of developers out there I have no eye for design, and for me this was always a big hindrance in really understanding CSS. I could never relate what I was writing in the style sheet with the big picture.

Bootstrap

In comes Bootstrap, what a god-send! I finally felt like I could create some decent looking pages without worrying too much about what's going on under the hood. And I really relied on these predefined components, a lot. After this, I kind of stopped trying to improve my CSS skills and of course ran into issues when I wanted to customize my components.

I stole a lot from https://bootsnipp.com/ and convinced myself that being able to read the CSS and understand it meant I could probably do it myself next time. 🙄

All my apps started to look pretty much alike, so it was time for a change. Bulma looks cool let's learn that. And the cycle continued... I wasn't trying to solve the root of the problem, I just wanted to find a great new CSS framework that would make my design life easier.

TailwindCSS is popping up everywhere. I thought it looked cool and could be my next time saver, so I decided I'd try it out for for my next side project and spun up a new NUXT app, installed Tailwind and started learning.

Tailwind

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Below is the example snippet from their homepage showing the markup with a simple card with an image:

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="Woman paying for a purchase">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
    <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
    <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
  </div>
</div>

So I know there's a lot of people that find all of this styling in the HTML a turn off and say you may as well be using inline style, but this has really helped me learn and understand.

But writing all of these classes I feel like I've finally grasped flex and how to use it as well as a lot of other properties. And the inline responsive helpers really helped me see exactly what is changing and why, like this:

class="w-full md:w-1/2" means full-width on mobile, and half size on any viewport greater than 'medium'. This isn't really revolutionary but for me having it right there like that made all the difference in getting that little switch to flip in my brain.

BTW, you can still create custom components like that lovely .btn from Bootstrap by creating a btn class and using @apply:

.btn {
  @apply font-bold py-2 px-4 rounded;
}

.btn-blue {
  @apply bg-blue-500 text-white;
}
.btn-blue:hover {
  @apply bg-blue-700;
}

Thank you

This has been my first post, I hope it won't be my last but like CSS I'm not much of a writer 🙂. I'd love any feedback, if you've had a similar experience let me know, if you think I'm wrong -- let me know.