DEV Community

Discussion on: Tailwind class madness. Never again?!

View post
Collapse
 
pcjmfranken profile image
Peter Franken • • Edited

It’s clean, readable, convenient, fast, and globally available

Is the world going mad or am I?

.button {
    font-weight: 700;
    border-radius: 0.25rem;
    border-width: 0px;
    background-color: #3b82f6;
}

.button:hover {
    opacity: 0.8;
}

.button--primary {
    padding: 1rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.button--secondary {
    padding: 0.5rem;
}
Enter fullscreen mode Exit fullscreen mode 
<button class="button button--primary">┳━┳ ヽ(ಠل͜ಠ)ﾉ</button>
Enter fullscreen mode Exit fullscreen mode

Not to discredit your work by the way. You ran into a problem and developed a solution. It's just that regular CSS is a far better match for every single one of your listed requirements!

Collapse
 
lukasborawski profile image
Lukas Borawski •

Wait. This is great, but you're writing here your own, regular classes (assume that on top of BEM) and CSS. This is something different. The tools was created to avoid mass with the Tailwind utility classes.

Collapse
 
pcjmfranken profile image
Peter Franken •

Time for some global, reusable components like buttons. And here we go... 🤕 Tailwind utility classes madness. To define a simple button I had to use like a' twenty-plus classes.

What I was trying to convey is that you haven't actually solved the underlying problem statement from your original post, only repackaged it. The long list of classes is still there, just moved elsewhere by this additional piece of code that you now also get to maintain.

That CSS snippet I posted is the output of your Tailwind button classes taken straight off the Tailwind docs. Same outcome for less effort and unbeatable performance, and most of Tailwind's utility classes map one-on-one with CSS properties anyway.

Thread Thread
 
lukasborawski profile image
Lukas Borawski • • Edited

Well. You can look at it that way. But as I'm using a set of utility classes anyway and I want to use them globally, create one source of truth of my UI and not struggle with the messy templates I can set one place where I'm defining my variants and use them across the app.

Collapse
 
esirei profile image
Esirei • • Edited

This works, but with tailwind, you use the @layer and @apply directives to create such components.
This ensures that the classes are above the utility classes in the compiled css file and as such properties can be overridden using tailwind utility classes.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer components {
  .button {
    @apply font-bold rounded border-0 bg-blue hover:opacity-80;
  }

  .buttonPrimary {
    @apply p-4 text-lg;
  }

  .buttonSecondary {
    @apply p-2 text-md;
  }
}
Enter fullscreen mode Exit fullscreen mode

Checkout this Tailwind Playground

This is also not so global, "reuse" friendly.

Also, I do not understand what you mean here @lukasborawski .

Collapse
 
lukasborawski profile image
Lukas Borawski • • Edited

Yes, I've mentioned that you can use it and define it like that, but still this is just CSS. I can't type it, can't easily extend it and mix with some additional logic, can't use it with props. Get your point but still, it's very useful and versatile for the Vue.js app.