DEV Community

Vincent Romanus
Vincent Romanus

Posted on • Originally published at vincesanity.io on

Tailwind: Why I love it but disagree with its creator

#tailwindcss #css

Tailwind CSS has gained immense popularity in the web development community for its customizable CSS framework and extensive utility classes. These utility classes provide developers with the flexibility to create consistent and customized designs for modern and responsive web interfaces. One of the most significant benefits of Tailwind CSS is that it offers cross-browser support, and most IDEs support Tailwind CSS plugins for autocompletion.

One of the most notable features of Tailwind CSS is @apply, which merges utility classes and applies them into one CSS class. Combining BEM and Tailwind CSS through @apply is awesome, allowing for separation of concerns and ensuring readability, especially with long lists of utility classes:

.btn-primary {
  @apply py-2 px-4 rounded-lg;
  @apply text-white bg-blue-500 hover:bg-blue-700;
  @apply focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}
Enter fullscreen mode Exit fullscreen mode

However, the creator of Tailwind CSS, Adam Wathan, would disagree with this approach. He suggests that you should reuse your utility-littered HTML instead of using BEM.

While reusing utility classes can work in some cases, it can make debugging a nightmare in large projects, and it can lead junior dev developer to use !important when frustrated by implementing nested mutation while not wanting to refactor the huge chunks of utility classes. I have seen that in some projects.

Even when creating components instead of BEM, Tailwind's Utility-First approach can be challenging to use when there are variations involved:

{type === “primary” ? 
  <button className=“py-2 px-4 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-opacity-75 bg-blue-500 text-white hover:bg-blue-700 focus:ring-blue-400”>
    Do it
  </button> : 
  null
}
{type === “secondary” ? 
  <button className=“py-2 px-4 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-opacity-75 bg-purple-500 text-white hover:bg-purple-700 focus:ring-purple-400”>
    Do it
  </button> : 
  null
}
Enter fullscreen mode Exit fullscreen mode

Using @apply with BEM makes things much simpler:

.btn {
  @apply py-2 px-4 text-white rounded-lg outline-none ring-2 ring-opacity-75;
  &.btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 focus:ring-blue-400;
  }
  &.btn-secondary {
    @apply bg-purple-500 hover:bg-purple-700 focus:ring-purple-400;
  }
}
Enter fullscreen mode Exit fullscreen mode

In summary, just using Tailwind CSS utility classes can significantly speed up projects, but for big projects with heavy nesting, components with variations, or white labeling, combining BEM and @apply is a better approach.

Top comments (0)