DEV Community

loading...

How Tailwind helped me better understand CSS

Michael Messerli
Full stack web developer who's first love is Laravel. Currently my focus is JobHuntBuddy.co which helps job seekers organize their search.
・3 min read

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. πŸ™„

shoulder pat

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:

Tailwind example component

<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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (4)

Collapse
moopet profile image
Ben Sinclair

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

πŸ‘‹ That's me in a nutshell. I think that things like Tailwind are actively harmful.

I'm pleased you managed to use it to learn something though.

Collapse
messerli90 profile image
Michael Messerli Author

I can totally understand this point of view. IMO, it's great and quick for bootstrapping, but I image in the long run you'd really want to create reusable components like I mentioned.

What exactly do you think it actively harmful?

Collapse
moopet profile image
Ben Sinclair

It's teaching people that the whole concept of "separation of style and content" is irrelevant.

Imagine if your site had a christmassy theme (a not-uncommon client request). How many places do you have to change templates? If you're using a CMS with something like Gutenberg (also something I have strong objections to) then you're stuck with the HTML in the database. You can't do a search and replace in your templates to fix it.

Speaking of searching and replacing - if you want to replace all instances of "blue" with "red" that are on a person's username, in semantic CSS you'd edit one file and change "blue" to "red". In Tailwind, you'd edit any number of files, that you can't easily search for because "blue" is a very common word, and so is "user".

Thread Thread
messerli90 profile image
Michael Messerli Author

Absolutely. I don't think it should be used like this either.