Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 25, 2020 04:08 pm GMT

Tailwind is just a mess

Let's look at Tailwind examples and discuss why would anyone can choose it over traditional css modules or css-in-js solution.

Example from the documentation with regular css:

<div class="chat-notification">  <div class="chat-notification-logo-wrapper">    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">  </div>  <div class="chat-notification-content">    <h4 class="chat-notification-title">ChitChat</h4>    <p class="chat-notification-message">You have a new message!</p>  </div></div><style>  .chat-notification {    display: flex;    max-width: 24rem;    margin: 0 auto;    padding: 1.5rem;    border-radius: 0.5rem;    background-color: #fff;    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);  }  .chat-notification-logo-wrapper {    flex-shrink: 0;  }  .chat-notification-logo {    height: 3rem;    width: 3rem;  }  .chat-notification-content {    margin-left: 1.5rem;    padding-top: 0.25rem;  }  .chat-notification-title {    color: #1a202c;    font-size: 1.25rem;    line-height: 1.25;  }  .chat-notification-message {    color: #718096;    font-size: 1rem;    line-height: 1.5;  }</style>

If you were asked to edit this code, it would be clear to you that:

  • you work with chat notification
  • it includes title, content, image and message

You will have this information event with only one css file.

With css modules we can achieve better structure and maintain elements meaning:

<div class="chat-notification">  <div class="logo-wrapper">    <img class="logo" src="/img/logo.svg" alt="ChitChat Logo">  </div>  <div class="content">    <h4 class="title">ChitChat</h4>    <p class="message">You have a new message!</p>  </div></div><style>  .chat-notification {    display: flex;    max-width: 24rem;    margin: 0 auto;    padding: 1.5rem;    border-radius: 0.5rem;    background-color: #fff;    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);  }  .logo-wrapper {    flex-shrink: 0;  }  .logo {    height: 3rem;    width: 3rem;  }  .content {    margin-left: 1.5rem;    padding-top: 0.25rem;  }  .title {    color: #1a202c;    font-size: 1.25rem;    line-height: 1.25;  }  .message {    color: #718096;    font-size: 1rem;    line-height: 1.5;  }</style>

Now let's look at tailwind:

<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">  <div class="flex-shrink-0">    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">  </div>  <div class="ml-6 pt-1">    <h4 class="text-xl text-gray-900 leading-tight">ChitChat</h4>    <p class="text-base text-gray-600 leading-normal">You have a new message!</p>  </div></div>

What are we working on? Well it is something largely rounded with box-shadow, maybe some card?

With all this utility classes elements lost all meaning and are now just a markup. It is impossible to tell what purpose this code serves.

So if you use tailwind, please share why you choose it over css modules or css-in-js and how you are able to maintain the mess that gets produced with all this utility classes.


Original Link: https://dev.to/rtivital/tailwind-is-just-a-mess-2c97

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To