Hacker News Reader

Comment by ponyous | Hacker News Reader

This library highlights the biggest issue of tailwind for me.

> Clean HTML

The rest of your code will still use bunch of shitty tailwind shortcuts that are really chaotic the moment you build something more than a simplest component.

View on HN

I mentioned it in another comment, but I felt the same way until I figured out there is a solution. Here is an example of a simple CSS file with a reusable button class:

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

  @layer components {
   .button {
     @apply text-2xl p-2 bg-gray-100 text-gray-600 border border-gray-200 cursor-pointer hover:bg-gray-200 hover:border-gray-300;
   }
  }

I can now just give all of my reusable buttons the ".button" class instead of the giant string above. I can even add more styles or overwrite existing styles to give it a different look such as:

  <button class="button bg-red-100 text-red-600">Click Me</button>

Reply on news.ycombinator.com