Stop using tailwind in your Rails project!

I'm starting quite a bit of new Rails apps and I'm helping others to start their personal projects for years. A couple of years ago, another discussion started to be more and more prominent in my head and beyond:

How to deal with CSS?

One of the discussion igniters: Tailwind.

Tailwind added quite a bit of confusion to the discussion mix.

All the cool people started using Tailwind, it's the dejour framework for teams that choose a functional CSS approach, and it's made by the guys who wrote Refactoring UI, the developer reference for how to build well-designed UIs.

I was confused too. Here's a witness of my confusion. Me asking the community for advice in September 2020:

I promised to take action on it. So I tried to jump onto the Tailwind train and started using it for all my projects from then on.

Now, 2 years in, a lot of people still love Tailwind. I'm stuck with scaffolded interfaces like that:

Not even able to center the whole thing 😅

So, I killed tailwind.

After 15 minutes of the beloved Bootstrap, this looks more to my liking (screenshot will be further down).

So I personally rather feel like some opponent voices:

"Tailwind reminds me of someone who had a really hard time getting their framework to compile a minified stylesheet, or busting the cache for same, and so never wanted to edit their CSS again." - Walter Davis from the RailsLink Slack chat

"Tailwind reminds me of someone having taken a dump all over my HTML." - Dave Kamura at the Ruby on Rogues podcast (loosely quoted)

I have to admit, I haven't invested much of effort into learning Tailwind. And so I haven't with Bootstrap back in the days.

However, I can use and process Bootstrap code immediately. But looking at Tailwind every time I want to change or achieve something makes my brain spin.

Here's a "CSS Card" element example in Tailwind:

<div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
    <a href="#">
        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
    </a>
    <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
    <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
        Read more
        <svg aria-hidden="true" class="w-4 h-4 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </a>
</div>

No way I can keep my line-length limits, gonna need to bump it to 300 chars or so...

OK, that's a particularly ugly one, I admit. Here's a more sensible one from the "official" Tailwind version:

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="/img/card-top.jpg" alt="Sunset in the mountains">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
    <p class="text-gray-700 text-base">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#winter</span>
  </div>
</div>

And here's a Bootstrap card:

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

It's either a card or not. Not much to think about.

Do you see the problem with Tailwind? All those numbers that you can modify and customize? That's it, it's too much freedom, too much to think about.

As a CSS beginner you need frames and constraints that you can work within. That's true when you learn digital painting: You don't start with an infinite canvas and all the available brushes and colors.

Otherwise things go out of hand quickly and you will be more likely to give up.

As an individual developer trying out ideas, you need those easy-to-understand frames and constraints too.

Also, I'm kind of a centering feteshist. Most of my prototype apps are somehow centered. Here's the CSS that I used to center the content on my newest website:

<body>  
  <main class="container-fluid">  
    <div class="row justify-content-center">  
      <div class="col-8">  
        <%= yield %>  
      </div>  
    </div>  
  </main>  
</body>

That's it. Crystal-clear: 12 columns grid, 8 columns for content, 2 columns on each side. Done. 15 minutes time investment, everything's aligned and kinda looking OK.

Never got to that developer happiness level with Tailwind.

Please keep in mind, all of this concerns personal projects. I understand there is more flexibility with a library like Tailwind when you want to drive the app styles that were crafted by your design team. Or you want to learn creating your own design systems and drive them with functional CSS.

Please use Tailwind in this case!

For personal projects, I just don't see the case for myself yet. Tailwind for me is still the infinite canvas with 600 brushes and all the colors.

I might become hyper productive after investing 10-20 hours into learning it, but here I'm getting an hours_not_available exception.

A design system would set the right frames and constraints for using Tailwind. But I don't have one either and not planning to create one. Bootstrap does most of it for me.

If you are like me, consider removing Tailwind from your Rails project. Here's an example:

https://richstone.io/tailwind-off-rails

If you are still unsure, here's how I would go about choosing the right CSS approach for the right time and resources: