I find it very amusing that this is going to be my first post of the year. But it has bothered me enough that I must speak about it.
No one can deny the godsend that tailwind has been. We are able to prototype faster and get things done quickly.
I have noticed in the upsurge of Tailwind, has come with a forgetting and overlooking of some properties inherent in CSS and HTML.
Block and Inline Elements
Yes, I am afraid we have to go there...
Block-Level Element
I actually fail to understand how people forgot about the block element aspect of HTML. I see someone doing this:
<div class="flex flex-col">
<p>One</p>
<p>Two</p>
<p>Three</p>
</div>
And all they wanted to do was have elements one after each other - stack them. They already do that! That is what HTML inherently does.
Block-level elements always start a new line.
Yes, of course I understand there are certain instances where you want your element to only take up as little space as possible - what flex does - but paying attention to what they have done, that is rarely the case.
Have a gander a some block elements
<div> <p> <main> <section> <header> <nav> <h1>-<h6>
To quote something Kevin Powell said (I am paraphrasing):
"Don't undo the styling and then end up redoing it again. Use the HTML to your advantage"
Inline-Level Element
For posterity, it is only right I talk about inline elements as well. In HTML, there are certain elements that are not block. These elements only take up as much width as necessary. As such you can place them side by side - they do not naturally stack.
Some inline elements you are familiar with:
<a> <img> <input> <span> <button>
Wrapping Up
So next time you are trying to stack elements, don't just rush to add flex. Put your elements on the page and see if they stack as you want. Unhand the flex and think about what you want your resulting outcome to be.
And if what I said, doesn't make sense, here is a link to w3schools with examples you can play around with.
Thank you for reading, let's connect!
Thank you for visiting this little corner of mine. Let's connect on Twitter, Discord and LinkedIn
Top comments (0)