Finding Freedom in Letting Go: The Tailwind Hater's Edition.

I'm Rian, and I have a problem.

So, I'd written about the troubles I was having with Remix, Vite, and Netlify. I won't go into it, but the CSS-in-JS model is a tough nut to crack for the modern server-side frameworks like Next.js and Remix.

I knew it. The community knew it. No one had a very good answer.

I had a problem, and I'd already done backflips with special caching weirdness stuffed into my entry files and dealing with the dreaded FlAshES of UnSTylEd ConTEnt and PageSpeed scores that were a little embarrassing.

Change Is Hard

For a tech guy, in some ways, I'm a real Luddite. I spent a lot of time learning how MUI worked. The convoluted and changing rules and incantations around theming. The whole v4 to v5 thing. Ugh.

But, dammit, I'd spent hours and hours learning that stuff, and I'd finally gotten to appreciate the consistency that it all provided. I had mostly memorized which UI element I'd use for what. It finally made sense.

Let's face it, Tailwind looks a lot like Bootstrap, which... is not a compliment. And it doesn't come with a UI toolkit. Frankly, it doesn't seem to be a WHOLE lot better than just writing old-school CSS. Those long lines of classNames all strung together do not inspire confidence.

Popularity in tech usually means something.

I've generally found that when something becomes immensely popular in the tech world, it's for a pretty decent reason. I might not understand the reason at first, and it's not always a good reason, but it's also usually not just a fad. (Maybe blockchain.)

I realized that I was doing the thing most people do: fighting change because not changing is easier in the short term.

So, I rewrote my whole site with Tailwind.

I bit the bullet. I branched my own site and started the process of replacing all of that CSS-in-JS with Tailwind utility classes.

Something like this:

const StyledBox = styled(Box)({
  backgroundColor: '#1976d2', // A nice shade of blue
  color: 'white', // Text color
  padding: '20px',
  fontSize: '16px', // Font size
  fontWeight: 'bold', // Font weight
  border: '2px solid #1565c0', // Border: 2px solid, slightly darker blue
  borderRadius: '4px', // Rounded corners
});
...
<StyledBox>
      This is a styled Box component.
</StyledBox>

Became this:

<div className="bg-blue-700 text-white p-5 text-lg font-bold border-2 border-blue-800 rounded-md">
  This is a div styled with TailwindCSS.
</div>

I asked ChatGPT and Co-pilot to do it for me, but they both made complete messes of things, so I had to do it by hand while I watched The Three Body Problem and drank wine.

It took more than a few hours. There were a lot of things to figure out, like how to use arbitrary values (which saved me), theming, and when to just edit my tailwind.css to make keyframes and such.

By the time I got done... I was pretty sold.

Ain't no free lunch.

Now, there's things I don't like about it. It still feels sort of messy and arbitrary to just apply styles willy-nilly on each element. I've yet to get the hang of theming to the point that I can just use, say, a form element, and have it turn out nice without a lot of stringing together utility classes.

But that's probably on me. I will probably look at some solutions that ride on Tailwind, like Shadcn and see if I can deal.

I also have some HUGE projects out there written in MUI, and I'll be damned if I'm about to spend the days and days scraping it out of them. Change is hard, but it's also expensive sometimes. You have to know it's worth it.

I'm hoping that MUI6 addresses some of the issues that v5 has so we can get some similar page-speed benefits. I also hope they don't make the migration quite as painful as last time, but I digress.

When corporate core values are real.

Zappos Core Value #2: Embrace and Drive Change

One of the only places I've seen corporate core values applied to real life was Zappos. When I was leading the Labs engineering team there, my boss, Will, and I would actually talk about them. "Does this embrace and drive change? Yes or no?" Seriously. We did that.

It stuck with me, as did my old karate school's principle: "Move to action with sureness and hope."

Both hit on this idea that action is better than inaction. Of course, you have to consider your options, but don't over-consider them. You can't know how things will turn out. Pick a thing and do it. Lean into it. Keep your eyes open, but don't let fear and laziness keep you stuck.

Back to computer stuff.

This little experiment taught me two things: one is that Tailwind is actually pretty cool. The other, though, was more of a reminder that whenever you get that feeling in your gut that you're coming up with reasons not to do something, listen to that. It's usually because you know, at some level, that you should look into it. Invest the time to understand why people like it so much.

Keep an open mind.

Knowing what I know now, I'd do at least smaller to mid-sized projects with Tailwind. It's fast. My PageSpeed scores went up about 20 points just by making this change. Using Tailwind is just a much more efficient way to go. It's much better at effectively tree-shaking out all the junk you're not really using.

Is it perfect? Nah. Nothing is. But is it like going back to jQuery from React? Nope. Not that either. It's just a different way of approaching the same stuff we've been doing for more than 20 years now, and I'm sure it won't be the last.

I'm also sure I'll write about the next thing, too. Or AI will. However things work at that point.