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.

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post

Top comments (0)

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay