Convince me to start using tailwind

[shawnlee-info]

I haven't used Tailwind yet, I heard both positive & negative comments.

Today I browsed the docs, I'm neutral about the utility style, but I have a key question if I imagine using Tailwind into my projects:

To make it consistent across the project, I always have some utility combinations, for example:
.box-base{ margin: 1rem; padding: 1rem; background-color: #fff; color: #000; }

It is unacceptable to me to always break them into 3 utility classes everywhere I use this, coz they're always combined for a design style in one project, so what's the best way to package this in Tailwind?

Just to be clear, I even agree with Tailwind's docs, no need to create too many semantic CSS classes, but what if the basic utility combination?

Anyone can convince me and I'll be a Tailwind advocate ❤, and vice versa💔

[alex-krasikau]

Hey @shawnlee-info!

Tailwind works well with components

Tailwind CSS doesn't work well with plain HTML for the exact reason you outlined: it produces too much noise with all the repeated single-purpose utility classes.

Tailwind truly shines in a component-based architecture, like React, Vue or Svelte, where you can abstract away both HTML structure and styling into separate components. For example:

<div class="flex gap-6">
  <div className="border border-neutral-100 rounded-xl shadow-xl">
    {/* User report */}
  </div>

  <div className="border border-neutral-100 rounded-xl shadow-xl">
    {/* MRR report */}
  </div>

  <div className="border border-neutral-100 rounded-xl shadow-xl">
    {/* Engagement report */}
  </div>
</div>

// becomes
<div class="flex gap-6">
  <Card>
    {/* User report */}
  </Card>

  <Card>
    {/* MRR report */}
  </Card>

  <Card>
    {/* Engagement report */}
  </Card>
</div>

Tailwind saves time in some instances but consumes it in others

If faster in writing:

• HTML and CSS in the same place.
• Some utilities translate to multiple lines of CSS
• Don't spend time on coming up with a name for classes

Reading speed can be debated:

• On one hand, simple constructions are easy to read since the HTML markup is in the same place and you don't need to switch to a CSS file and scroll to media queries.
• However, complex constructions might be challenging to follow.

For me the time consumed is not as much as the time saved. Thus, overall, it leads to a more productive experience.

You have to try it yourself.

Even though I believe that the two reasons outlined are sufficient to start using Tailwind, these exact reasons didn't convince me several years ago. I didn't believe that I could be more productive with the utility-first framework. And look at me now: an active Tailwind user answering questions in the Tailwind repository.

Give it a try; perhaps you will find your own reasons to stick with it.

[shawnlee-info]

Thanks so much for your reply, I think you made a very important point:

On style level, we're building "modules" from utilities anyway, it's just different places:

• If we build style modules in CSS, that's traditional CSS architecture, so it looks more "packaged" than tailwind,

• If we build style modules along with Components, that's tailwind advantage, coz you're packaging/naming the component anyway, no need to do it again in CSS.

I'll try more in practice, appreciate it!