DEV Community

Christopher Arnold
Christopher Arnold

Posted on

Early CSS tailwind snags

Just a quick recap on my experience with tailwind so far

Before starting tailwind I spent quite a bit of time with trying to understand basic css/scss. I was able to do animations, transitions, make a basic responsive landing page, and style elements efficiently.

When I began using tailwind I was smitten right away, by the ability to prototype designs so quickly. I still love the power of tailwind which i have yet to fully tap into. I did however, naively underestimate the bar to entry.

I'm currently building a landing page with Tailwind, and here are some pros and cons I've come across so far. I'll just stick to the ones I don't see mentioned frequently in threads:

  • I love how easy it is to set breakpoints at different screen sizes.

  • It is fascinating how some things like element styling, positioning, transitions, are able to be done so much more efficiently especially in smaller chunks. Yet i spend much longer being hung up on the effects of sm,md sized classes and the like. Maybe i should try a mobile first route initially...

  • With pure CSS I grew accustomed to plugging in a custom .btn class for a button and being done with it. the tradeoff being obviously it was a pain starting out building, and organizing the classes.

  • It has been easier to efficiently position items where I want them to be for either mobile, or full screen sizes However, I get hung up on the nuances of making either of them responsive. Sticking with it seems to be the better option long-term because it's not like media queries were the most expedient. I know I'll probably get more fluid soon, and be grateful for the persistence.

It's a beautiful lesson to learn, not getting to comfortable in my ways especially in a trade that's perpetually evolving in some ways.

Learning the hard way to understand how the fundamentals work, but not allowing myself to get too comfortable doing things one given way seems to be a prudential route.

Top comments (0)