DEV Community

Discussion on: Tailwind isn't the answer

Collapse
 
regislutter profile image
Régis LUTTER • Edited

I don't really see how using CSS variables is better.
From your example :

button {
   all: unset;
   font-family: var(--font-sans);
   font-size: var(--scale-00);
   font-weight: var(--font-medium); 
   line-height: var(--line-none);
   padding: var(--size-3) var(--size-5);
   background: var(--color-blue);
   border-radius: var(--radius-xs);
   color: white;
}
Enter fullscreen mode Exit fullscreen mode

You can do that in Tailwind with @apply like :

button {
  @apply font-sans text-xs font-medium py-3 px-5 bg-blue-100 rounded rounded-xs text-white;
}
Enter fullscreen mode Exit fullscreen mode

There is clearly no advantage to the variables.

Also, Tailwind is really useful to work with designers (and with Figma for example). They use a Tailwind template and you can clearly see the padding they want, you have the color and hue gradient applied, the text size, etc. You just have to type the Tailwind class corresponding.

BEM + Tailwind is for me really versatile. And if I need an extra responsive margin on an element just one time, I can do it in no time (exemple class="button mt-2 md:ml-2 md:mt-0")

[Edit] :
And totally forgot about useful classes like divide-x divide-y space-x space-y dark: ring-