DEV Community

Discussion on: Why Tailwind Isn't for Me

Collapse
layzee profile image
Lars Gyrup Brink Nielsen • Edited

You had me at

<button class="hover:bg-light-blue-200 hover:text-light-blue-800 group flex items-center rounded-md bg-light-blue-100 text-light-blue-600 text-sm font-medium px-4 py-2">
  New
</button>
Enter fullscreen mode Exit fullscreen mode

Good luck redesigning that button across a site or application.

Collapse
wakematta profile image
Mohamed Ziata

It seems that nobody knows that in tailwind you can make css classes that share same style.
Read: tailwindcss.com/docs/extracting-co...

Collapse
markpieszak profile image
Mark Pieszak

My thoughts exactly 💯

Collapse
oncode profile image
Manuel Sommerhalder

the idea is that you put it into a vue component or css class with @apply for reusability

Collapse
layzee profile image
Lars Gyrup Brink Nielsen

Thanks for your reply. What would that look like?

Thread Thread
oncode profile image
Manuel Sommerhalder • Edited

your component:

<template>
  <button
     class="button"
     :class="{
      'rounded-md': rounded,
      'bg-light-blue-100 text-light-blue-600 hover:bg-light-blue-200 hover:text-light-blue-800': blue
    }"
  >
    <slot />
  </button>
</template>

<style type="scss">
// use apply seperately or all in one line
.button {
  @apply flex items-center text-sm font-medium;
  @apply px-4 py-2;
}
</style>

<script>
export default {
  props: ['rounded', 'blue']
}
</script>
Enter fullscreen mode Exit fullscreen mode

in your app:

<BaseButton rounded blue>Button</BaseButton>
Enter fullscreen mode Exit fullscreen mode
Thread Thread
layzee profile image
Lars Gyrup Brink Nielsen

Thanks for sharing. This looks cleaner, but I'm still wondering why this would be considered more beneficial than CSS Custom Properties except maybe for Internet Explorer support.

Thread Thread
oncode profile image
Manuel Sommerhalder • Edited

You can also use custom properties with Tailwind. Imagine you get a design (system) and have to implement it. You get some colors, margins, paddings, font definitions along with the design. You edit the tailwind configuration file:

module.exports = {
  theme: {
    colors: {
      primary: 'var(--color-primary, #000000)',
      seconday: 'var(--color-secondary, #333333)',
    },
    text: {
      hecto: 'var(--text-hecto, 14px)',
      octa: 'var(--text-octa, 16px)'
    }
    // margins, paddings
  },
}
Enter fullscreen mode Exit fullscreen mode

Now you will a get all (soon to be) needed (responsive) utility classes to build your components with, which are also themeable with css custom properties: text-primary bg-primary sm:bg-secondary border-primary hover:bg-primary....

It gives us a unified language where frontenders don't have to think about naming classes anymore and use a consistent language across different projects. You and others working on that project can easier implement the design, because ideally you now the class names by just looking at the design/figma. With vscode autocompletion and tailwind config viewer, it makes developing a joy. :)

With just custom properties, the class names are not set, different names across projects. It's not ensured, that the custom props are used by every developer when adapting new features, no responsive prototyping, and and and.

Collapse
toffee_coin profile image
Elijah Lucian

if you're going to go out of your way to make a component and a custom css class name, just write css!

Collapse
ritikpatni profile image
Ritik Patni

I already experienced the pain, and it's not worth it

Collapse
karimmaassen profile image
Karim Maassen

And that's why Bootstrap killed the industry. This convoluted way of putting styling in HTML where it has absolutely no business is driving me insane.

Collapse
pavelloz profile image
Paweł Kowalski

I have one word describing revolutionary approach in software development that might help: extraction.