DEV Community

Discussion on: Why Tailwind Isn't for Me

oncode profile image
Manuel Sommerhalder • Edited on

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 on

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.