AI Powered

Thank you, tailwind!

How tailwind made me like CSS again

As I embarked on building websites, layouts were still being created with tables, and design possibilities were limited. Animated GIFs were the highlight of every website. If one wanted a button to change color when hovered over, two images would be created and swapped - that was then.

I worked as a traditional web freelancer for many years, creating countless websites for agencies and private clients. Don't worry; I no longer used tables back then, but instead opted for CSS.

CSS always seemed daunting to me. Much of what needed to be built looked like hacking together disparate parts. Things common on every website had to be clumsily cobbled together - everyone knew the .clearfix hack that eventually became a standard.

Over time, I lost my enthusiasm for CSS and traditional frontend work. My focus shifted towards other areas, and when working on large projects with others, someone else would typically handle frontend tasks.

As a full-stack developer, one cannot avoid CSS entirely; it was acceptable in moderation. When working on back-office solutions, a frontend framework was always used to simplify things.

Even on my own projects - this website being an example - I relied on small frameworks over the years. When Bootstrap first emerged, I also started using it; later came Foundation... But what irked me was the uniformity that came with these frameworks.

As time went by, I used smaller and more lightweight frameworks. At some point, I would write code from scratch only to revert back to a framework soon after - lastly, I employed UIKit until the issue arose where pages weren't rendering correctly without JavaScript support.

I decided it was time to learn something new: Tailwind CSS.

Tailwind is fantastic for people like me who aren't designers. With my existing knowledge of CSS, I can quickly craft visually appealing components using their classes. Since class names in Tailwind are familiar to me, I rarely need to consult the documentation.

So, I started building this website with Tailwind and was thrilled!

Until...

As a developer, it's always best to aim for minimal repetition - that doesn't always work out perfectly but trying helps reduce repetitions significantly.

Tailwind pushed me towards using components on my website. Although this reduced some of the repetition, not all were eliminated. I could have opted for creating smaller component atoms and then built larger ones from them - however...

I didn't want to start building atomic frontend frameworks anew just so that CSS classes don't need repeating on every new project.

Instead, I started defining my own classes using @apply with Tailwind within those custom classes. While this worked fine for a while, it eventually became slow and cumbersome.

It was when I stumbled upon those cool new CSS features - Container Queries for example. Or I wanted grid layouts which weren’t straight forward. Things got complicated with Tailwind.

Before I knew it, I started defining my own CSS classes again and essentially rewrote parts of the codebase. As this process progressed, I found myself getting more excited about exploring all these new possibilities in CSS...

What's now so effortlessly simple with just CSS! No headaches involved whatsoever!

Tailwind helped me rediscover my joy for working with CSS.

Upon reading up on Container Queries, I became enthusiastic to realize that not only can I write less and simpler CSS code but also significantly reduce PHP snippets used alongside the frontend pieces.

Now I am sitting here, in the middle of rebuilding my site with CSS. One by one, Tailwind is getting phased out in favor of custom-made solutions. And I am happy about that slim code base which is possible by using CSS variables, things I only used sporadically because of all the frameworks.

You'll notice my enthusiasm - I've found my way back to loving CSS once more, even though I doubt I’ll become a frontend dev in the near future. And the one causing this is Tailwind.

So, thanks... I guess?

I can envision myself using Tailwind for rapid prototyping purposes. My own projects will, however, rely on all the new CSS possibilities and innovations for now.