DEV Community

Discussion on: TailwindCSS: Adds complexity, does nothing.

Collapse
 
neophen profile image
Mykolas Mankevicius

Imagine, just for a second that you put that code in to, wait a minute.... a component named ChatNotification? Wow all of the strawman arguments burn away!

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">{{ title }}</div>
    <p class="text-gray-500">{{ message }}</p>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Suddenly you don't need to parse all that CSS it's right there visible in the template. Sudenly you have context of what is what.