DEV Community: Garrett Hawkins

The Tailwind Tax Nobody Talks About

Garrett Hawkins — Wed, 14 Jan 2026 22:03:00 +0000

Look, I know what you're thinking. It's 2026, everyone's using Tailwind, and here I am with my external .css files like some kind of developer fossil. But hear me out.

I've been working on Next.js projects for a while now, and every few months someone tells me I should really migrate to Tailwind... advice in which I've taken heed and begrudgingly applied to a few projects. The thing is, I keep asking myself: why? What problem am I actually solving?

(Before you write me off as inflexible: I'm a pragmatist. If I join a team that lives and breathes Tailwind, I'll write Tailwind. I've worked with plenty of tools I didn't initially love. But when I'm choosing for my own projects, I want that choice to be deliberate, not just habitual.)

We Already Learned This Stuff

Remember when we all sat down and learned CSS? Flexbox, grid, media queries, the cascade, specificity—all of it. It took time, sure, but we figured it out. Now Tailwind comes along and says "forget all that, learn our utility classes instead."

Except... it's the same concepts. flex items-center is just display: flex; align-items: center; with extra steps. I'm not learning something new, I'm learning a different syntax for something I already know. That feels backwards to me.

The Migration Tax

Here's where it gets real for me. I've got existing projects. They work. They're styled. Users are happy.

If I want to jump on the Tailwind train, I'm looking at weeks of work. Going through every component, ripping out class names, replacing them with utility strings, making sure nothing breaks. And for what? So my HTML looks like this?

<button className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
  Click me
</button>

Instead of this?

<button className="btn-primary">
  Click me
</button>

I don't know. That first one makes me tired just looking at it.

It's Harder to Change My Mind

Say I decide our primary color needs to change. With my old-school approach, I pop into my CSS file, update one variable or a few declarations, done. With Tailwind, I'm searching through components trying to find every instance of bg-indigo-600 and hoping I don't miss any.

Yeah, yeah, I know—you can configure the colors in the config file. But then you're mapping semantic names to Tailwind's naming system, and honestly, at that point, didn't we just reinvent CSS custom properties with extra complexity?

The Readability Thing

Maybe I'm weird, but when I come back to code six months later, <article className="blog-post"> tells me something. <article className="max-w-2xl mx-auto px-4 py-8 prose prose-lg"> just tells me... measurements?

I want my HTML to describe what things are, not what they look like. Isn't that what we've been saying for years?

Are We Just Chasing Trends?

I wonder sometimes if we've confused "best practices" with "what's popular right now." CSS isn't broken. It's been working for websites since before most of us were developers.

Tailwind didn't unlock some new capability—it just changed the workflow. And that's fine! If it works for you, great. But I'm starting to think the emperor's new clothes might just be... regular clothes with a hipper marketing team.

What Actually Matters

At the end of the day, I ship features. My sites load fast. My styles are maintainable (at least to me). My users don't care whether I used Tailwind or hand-rolled CSS—they care if the button works and the site doesn't look broken on mobile.

I'm not against new tools. I've adopted plenty over the years. But I am against refactoring for the sake of keeping up with the Joneses. My time is finite. I'd rather spend it building things than rewriting things that already work.

Maybe There's Room for Both

I'm not trying to convince anyone to ditch Tailwind if you love it. If utility classes make you more productive, then you should absolutely use them. This isn't a holy war.

I just think we should be honest about the tradeoffs. Tailwind has costs—learning curves, migration overhead, verbosity, coupling between markup and styles. Classic CSS has costs too—naming things is hard, bad stylesheets can become spaghetti, specificity battles are real.

Pick your poison based on your project, not based on what's trending.

So Yeah, I'm Sticking with CSS

Call me old-fashioned if you want. I've made peace with it. While the cool kids are debating whether to use @apply or pure utilities, I'm over here writing .card { padding: 1rem; background: white; } and moving on with my life.

Maybe someday I'll convert. Or maybe in five years we'll all be using something else entirely and this whole debate will seem quaint.

Until then, my external stylesheet is doing just fine.

What about you? Are you team Tailwind or team classic CSS? Or have you found some other approach entirely? I'm genuinely curious what's working for other people.

'A Santa at Nasa?!!!!'

Garrett Hawkins — Fri, 06 Dec 2024 06:05:00 +0000

Complex problems have always intrigued me. Anything that can take my overactive mind and allow it to… more so, FORCE IT to, temporarily transition to another dimension.
… a world where i can step away from life’s complexities. I.e. pondering the past, working to keep up with the present AND trippin’ on the future!
That being said, I’m not sure solving this algorithm was the brain vacation I was looking for haha.

While reading up on arithmetic and its place in JavaScript, i came across what’s known as a
‘Palindrome’. Palindromes are a string that when read in reverse, reads the same as it does reading left-to-right.
Initially I thought, how hard can it be?!
My ultimate experience as a ‘Budding Dev Student’ proved the process a bit more involved than original expected but where’s the fun in easy?

ANYWAYS… Less talking, more doing.
Let’s get on with it!

As always, I started with a plan. Nothing crazy, just a few words or partial sentences placed in specific order (probably only understood by me). As a relatively new practice I’ve found with larger/more complicated Deliverables, breaking them down to simpler, easier to attain, mini goals take away some of the anxieties of a problem. I put a checkmark next to each goal as it’s been addressed which helps reinforce (really.. ‘trick’) my mind will each small victory!

OK, for real now…
First, i knew i wanted a descriptive name for my variable, in this attempt, I went with a function. I called it ‘isPalindrome’ in reference to my goal.

Second, I assigned the function a ‘placeholder’ variable. In this case, ’str’ seemed sufficient.

With the easy part out the way, I ran in to my first real challenge. I found that I needed to breakdown the problem even further if I was going to make this work.
Back to the drawing board, so to speak. I referred back to my plan and added a couple sub-steps:

Task number one, convert all characters within the provided string to match ‘case-wise’… I guess I really could have gone either way but I chose the ‘.toLowerCase()’ method.
Sweet! One of two, out the way…. next, one of my challenges was to have the ability to compare strings of any length, to include spaces, sentences, as well as symbols and other non-alphanumeric qualities.

function ‘isPalindrome’ is created
function takes placeholder, ‘str’, as input
‘alphanumericDelete’ variable is created: This variable will be asked to some things:
- # destruct the original string.
- # iterate over each element
- # convert the input string ‘.toLowerCase’ using the built-in method.
- # remove anything that is not a number or letter. — this process was the most taxing, it required a bit of googling but I was able to find another built-in regular expression that did exactly what I needed! — this particular ‘Regex’ uses this syntax, in addition to previous methods to basically completely destruct each string, convert to an Array, do the work provided in parameters, ‘join’ all the characters back together and rebuild/output our ‘baby’! Finally, one last step… after completing our complex requests, it takes the values on each side of the === qualifier and check to see whether or not they match. And by ‘match’ i mean the string on the left (provided string) matches the declared value on the opposite side of === which applies reverse() to compare the string in… reverse! Haha, what a concept!
Here’s what I came up with:
```
function isPalindrome(str) { 
const alphanumericDelete = str.toLowerCase().match(/[a-z0-9]/g);
return alphanumericDelete.join(“”) === alphanumbericDelete.reverse().join(“”);
};  
```
Some test cases:
console.log(isPalindrome('A man, a plan, a canal: Panama')); // true
console.log(isPalindrome('race car'));
console.log(isPalindrome('Was it a car or a cat i saw?'))
console.log(isPalindrome('A Santa at Nasa?!!!!')

Now it’s your turn!
Copy the included code into your console and try out a word or phrase of your own!
In fact, I challenge you to think one up for yourself… if you’re going to cheat, at least make it something that doesn’t show up in the first few google results :P