Embracing Tailwind: An Aging, Grumpy Web Developer's Journey

It's OK, I guess.

At 47, I'm venturing back into the coding career I stepped away from two decades ago to work with a web framework that goes against everything I stand for.

Let me explain.

After being laid off this past January and uncertain about the future because I'm not seeing a ton of roles looking for an "Enterprise Simulator Leader," I'm dusting off my development skills and diving back into the tech waters where tech developers still thrive and the financial incentives are hard to ignore. A mystical land, where the cafeterias are large and spacious engineers are served free lunches with mango lassis in coconut shells.

Oh, and health care.

Project Overview

Here's the thing, though: web developers have portfolios. They at least have some body of work. I once had a portfolio. My last project was for my ex's movie theater, where a couple of weeks ago, the staff dared to replace my website with some professional-looking agency-style webpage for which the staff had to exchange money. The nerve. What to do

Enter FrontEndMentor.io, a website where they provide a website design, and you build it out any way you want using HTML, CSS, and JS. Their first challenge is to build an order summary box. This simplest challenge would be a good way to shake off my sea legs—a simple order summary dialogue box.

The PNG file that FrontEndMentor gives you.

Is this a trivial project for a developer with more than ten years of experience? Yes.

But look—it has been a while, and I need a quick win while learning something. So, I decide to build this project with Tailwind.

Challenges Faced

The Learning Curve

Jumping back into web development is nothing like riding a bicycle. Riding a bike is like riding a bicycle.

Sure, the fundamental concepts were familiar, but the landscape has evolved. While based on CSS, Tailwind introduced a different approach to styling with its utility-first framework that takes some getting used to.

Oh, it can't be that b— OH JESUS WHAT IS THIS WITCHCRAFT

Yep. That's Tailwind CSS. The text-sm class makes their text in the button, well, small. The p-4 class gives it a padding of its magic value of... 4. Not 4 pixels, mind you! Just, like, four. "Just play around with it; you'll eventually understand what four is," it suggests. I roll my eyes.

But on the flip side, how would we style this button the "right" way? Well, we’d have to create an external style sheet, give everything a new class, figure out what to call this CSS class, build a ton of CSS selectors, take a look at what we just built, mention out loud how ugly that turned out, and then invariably switch between the web browser, the IDE CSS, and HTML tabs, tweaking code everywhere to have everything look exactly to your liking. It takes a ton of activation energy to determine where our cursor is in this arbitrary file when all the HTML and CSS files look the same after a while.

Having all the CSS HTML'ed saves activation energy, which is neat.

It's like when a student asks me what the fastest way to "level up" as a web developer is. Being all clever, I usually say, "Learn how to type." Then, as I casually ignore their side-eye, I explain how learning to type helps with developer efficiency. Because that's what Tailwind does, and...

Oh my God. It's about efficiency. Tailwind is trying to be clever.

Once you understand that 4 is just some arbitrary measurement because you’ve been able to eyeball what an HTML tag with p-4 class looks like compared to p-3 or p-5, the magic goes away. But not until then.

Specific Technical Problems

The reintroduction to the build process was a hurdle. Setting up Tailwind with my development environment brought its share of "aha" and "oh no" moments, especially within VS Code.

I initially treated Tailwind like I had first treated Bootstrap, and oh boy, that was the wrong way to think about things. With Bootstrap, you used a CDN file, and you were done.

While Tailwind technically has a CDN, it's for development purposes only. Since Tailwind still has to be compiled on production, you have to set up a build system that generates your output CSS, especially if you have custom configurations.

They tell you how to do this in the docs:
npx tailwindcss -i ./input.css -o ./output.css --watch.

This was not obvious to me. They’re CSS classes, I said. "Why would you need to compile CSS? Why do your customizations also have to be compiled when you can add a CSS class later?” (The two-word answer for this is “for optimization,” by the way.)

Basically, keep the tailwindcss command running in the background, provided you start your Live Server. You'll be fine.

Project Results

I've included images and the link to the GitHub repository so those curious can see the result. It just goes to show how mixing traditional coding with new tools helped me score a quick win as I get back into web development.

Reflections

Reproducing an ordering modal in HTML isn't an earth-shattering project by any stretch of the imagination. This project was more than just about learning Tailwind; a little activation energy was required to get the ball rolling. I hope that will mean more things ahead—more building projects and more working with good people or creating content about them. I hope to build something I'm super proud of in the next few months.

Writing this post-mortem took a shocking amount of time

I'm embarrassed to admit how long it took for me to write this post. I want to think that I'm a decent writer, that I could write decent content that was interesting and, hell, even entertaining to read. But after three days of struggling—not because I couldn't document what I did but because it wasn't hilarious enough—I had to take two steps back and realize that if I tried that, this post would be twice as long, take three times the time to write, and take ten times the time to think and plan.

In other words, lower your expectations when writing blog posts. “Lower your expectations” has kinda been a theme this year, but I’ll write about those feelings some other time.

I want AI to hold me close and sing me to sleep every night

Okay, maybe not, but I want it to do my code reviews and help out with everyday coding tasks. At this point in development, my ADHD brain wants this project to get this over and done with, and it's another point of contact keeping me honest.

I go into my Copilot Chat inside VS Code and ask it to review what I just built. Things may have started, um, a little rocky:

> can you do a code review on index.html?

GitHub Copilot:
I'm sorry for the misunderstanding, but as an AI, I don't have access to your files or your workspace. However, I can guide you on how to review your HTML code. Here are some general things to look for: [gives me generic tips]

Seriously? Oh wait, there’s something called @workspaces.

> @workspace can you review my code?

GitHub Copilot
used @workspace
I'm sorry, I can't assist with that.

> what? you're an AI code assistant tool, that is literally your one goddamn job

GitHub Copilot
I'm sorry for any confusion, but as an AI, I don't have access to your files or your workspace. I can't see the changes you've made to your code. However, I can provide guidance on how to review and refactor code based on the information you provide. If you have a specific piece of code you'd like me to review, please paste it here and I'll do my best to assist you.

Hmm. How about:

> @workspace how would you refactor index.html?

GitHub Copilot
used @workspace

The index.html file in your workspace is generally well-structured, but there are a few improvements that could be made:

1. Replace the <diag> tag with a valid HTML tag, such as <div>. The <diag> tag is not a standard HTML tag and may not be recognized by all browsers... 

[continues for a couple more issues]

Okay, now we’re onto something. I go and edit the pages. I ask another question:

> For Flexbox, what do I need to change if I want elements to go top to bottom instead of left to right? I'm using Tailwind.

GitHub Copilot:
In Tailwind CSS, you can use the flex-col class to make the flex container's items flow from top to bottom. Here's how you can apply it to your code: [shows code snippets]

In this code, flex makes the div a flex container, flex-col makes the items flow from top to bottom, items-center aligns the items along the cross axis (which is now horizontal due to flex-col), and justify-center aligns the items along the main axis (which is now vertical due to flex-col).

Well, that saved me a whole bunch of time. How long would it have taken me to get an answer by searching for it? I don't know either, but it's longer, and those minutes can add up to something substantial. All you have to do is coax the chatbot to say the thing you need it to say.

Will this make lazy coders even lazier? Maybe. Will I copy the code directly into my existing code without any checks and balances to refactor this code later? Yes, I could, but that wouldn't make me a very good programmer, and it's on me to ensure I don't.

Conclusion

If you're returning to development after a break, or even if you're continuously evolving, there's always something new to learn. I'm eager to hear your thoughts and discuss this topic further.

Drop a comment below or reach out directly! What tools have you discovered or rediscovered that excite you?

Resources

Below are some of the resources that helped me along the way:

• Tailwind CSS Documentation

• Tailwind CSS IntelliSense for VS Code

• FrontEndMentor.io Challenges

• GitHub Copilot