Hacker News Reader

Comment by haswell | Hacker News Reader

A few issues here:

1. When you're working with this code, it's far easier to read with proper formatting and syntax highlighting. I know people take issue with the verbosity of tailwind, but anything will look awful if you remove formatting.

2. This is lacking an equivalent non-tailwind approach. If you can share the equivalent vanilla HTML/CSS (or pick your preferred framework), and then paste it here as an unformatted text blob, this might be a bit more fair.

3. I don't think it's fair to describe this as just a "box with rounded corners and a top and bottom section". That can be done with tailwind with less complexity/syntax, if that's truly all you want.

View on HN

Here is an example from their own website. It's for a very simple interface. Do you think this looks maintainable?

    <main class="py-6 px-4 sm:p-6 md:py-10 md:px-8">
      <div class="max-w-4xl mx-auto grid grid-cols-1 lg:max-w-5xl lg:gap-x-20 lg:grid-cols-2">
        <div class="relative p-3 col-start-1 row-start-1 flex flex-col-reverse rounded-lg bg-gradient-to-t from-black/75 via-black/0 sm:bg-none sm:row-start-2 sm:p-0 lg:row-start-1">
          <h1 class="mt-1 text-lg font-semibold text-white sm:text-slate-900 md:text-2xl dark:sm:text-white">Beach House in Collingwood</h1>
          <p class="text-sm leading-4 font-medium text-white sm:text-slate-500 dark:sm:text-slate-400">Entire house</p>
        </div>
        <div class="grid gap-4 col-start-1 col-end-3 row-start-1 sm:mb-6 sm:grid-cols-4 lg:gap-6 lg:col-start-2 lg:row-end-6 lg:row-span-6 lg:mb-0">
          <img src="/beach-house.jpg" alt="" class="w-full h-60 object-cover rounded-lg sm:h-52 sm:col-span-2 lg:col-span-full" loading="lazy">
          <img src="/beach-house-interior-1.jpg" alt="" class="hidden w-full h-52 object-cover rounded-lg sm:block sm:col-span-2 md:col-span-1 lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy">
          <img src="/beach-house-interior-2.jpg" alt="" class="hidden w-full h-52 object-cover rounded-lg md:block lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy">
        </div>
        <dl class="mt-4 text-xs font-medium flex items-center row-start-2 sm:mt-1 sm:row-start-3 md:mt-2.5 lg:row-start-2">
          <dt class="sr-only">Reviews</dt>
          <dd class="text-indigo-600 flex items-center dark:text-indigo-400">
            <svg width="24" height="24" fill="none" aria-hidden="true" class="mr-1 stroke-current dark:stroke-indigo-500">
              <path d="m12 5 2 5h5l-4 4 2.103 5L12 16l-5.103 3L9 14l-4-4h5l2-5Z"  stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            <span>4.89 <span class="text-slate-400 font-normal">(128)</span></span>
          </dd>
          <dt class="sr-only">Location</dt>
          <dd class="flex items-center">
            <svg width="2" height="2" aria-hidden="true" fill="currentColor" class="mx-3 text-slate-300">
              <circle cx="1" cy="1" r="1" />
            </svg>
            <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1 text-slate-400 dark:text-slate-500" aria-hidden="true">
              <path d="M18 11.034C18 14.897 12 19 12 19s-6-4.103-6-7.966C6 7.655 8.819 5 12 5s6 2.655 6 6.034Z" />
              <path d="M14 11a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" />
            </svg>
            Collingwood, Ontario
          </dd>
        </dl>
        <div class="mt-4 col-start-1 row-start-3 self-center sm:mt-0 sm:col-start-2 sm:row-start-2 sm:row-span-2 lg:mt-6 lg:col-start-1 lg:row-start-3 lg:row-end-4">
          <button type="button" class="bg-indigo-600 text-white text-sm leading-6 font-medium py-2 px-3 rounded-lg">Check availability</button>
        </div>
        <p class="mt-4 text-sm leading-6 col-start-1 sm:col-span-2 lg:mt-6 lg:row-start-4 lg:col-span-1 dark:text-slate-400">
          This sunny and spacious room is for those traveling light and looking for a comfy and cosy place to lay their head for a night or two. This beach house sits in a vibrant neighborhood littered with cafes, pubs, restaurants and supermarkets and is close to all the major attractions such as Edinburgh Castle and Arthur's Seat.
        </p>
      </div>
    </main>

It's not meant to be maintained. If you want to make changes, start over.

/s?

> Do you think this looks maintainable?

I guess that depends. Compared to what?

Again, show me the equivalent widget implemented some other way and we can have a useful discussion.

Having spent a little time experimenting with tailwind for prototypes in the past, I can understand what that snippet is doing pretty easily. Having spent a lot more time writing vanilla HTML/CSS, I can immediately imagine all of the ways the vanilla version would be a nightmare, or at least take far longer to build “properly”.

Tailwind is a fascinating project because it seems to either make sense to people or it seems to deeply offend them. For whatever reason, I’m able to build things with tailwind after just a few hours of use that I could never accomplish from scratch (or with some popular CSS frameworks for that matter) after years of hacking on HTML/CSS.

15 minutes getting familiar with the class naming conventions makes all of this seem far less scary.

And it’s worth considering the variety of use cases a framework like this is useful for. Maintainability means very different things depending on context, team, and what kind of thing you’re building.

Here's an excerpt from YouTubes Javascript. Do you think this looks maintainable?

    Z3 = function(a) { a = g.fb(a); delete X3[a]; g.md(X3) && Y3 && Y3.stop() },

...or maybe the build-output isn't a great indicator for maintainability. If you write your html directly like you posted above, it won't be maintainable regardless of how you structure your css.

What I posted isn’t build output, it’s the example they give on the homepage of their website.

That's super funny that even a defender of tailwind mistook source code for build output.

Okay, if that's how they're selling Tailwind, I can understand why some developers are confused.

I assume they do it because they don't want to promote a specific framework on their homepage.

Go to the section "Worried about duplication? Don’t be." Does the code there look more maintainable to you? Because that's how you should be writing any moderately complex html anyways.

Yes. Much more than doing this via a number of detached and separate CSS classes defined in different files, with colliding rules and all the fun that goes with this. Or better yet, inventing enough small composable utility functions to work around these issues until you might have well have used tailwind.

When you say “does this look maintainable”, what you should be saying is “does this look maintainable compared to this other thing”.

I’d love to make a simple html skeleton and basic css rules to show a comparison but I don’t have the time.

You’d need to build a site with multiple pages, with multiple developers and lots of concurrent changes.

Then you’d realise why people don’t use raw CSS

I use raw CSS. I just scope it to the component level and I've never had a problem on any of the projects I've worked on. I do tend to avoid absolutely massive projects but I've worked on plenty of fairly big codebases and there is no problem as long as the CSS is scoped well using CSS modules. Inline styles are awful for maintainability and readability of the html, which is an important semantic description of your content.

> but I don’t have the time

And this, to me, is why Tailwind is so popular and why I find it valuable. Despite looking a bit verbose at first, it’s pretty easy to pull together some pretty advanced pages without having to invest much time at all.

And the time saved only increases with more proficiency/familiarity with the available classes.

Things very quickly “just work”, and the conventions apply pretty uniformly.

It would probably take me 20 minutes or so, and would be very maintainable and not make anyone's eyes bleed. I'm not willing to put that 20 mins in to prove my point, but I am certain that the unmaintainable code vomit which they have as an example on their website took much longer than that.

I can't wait to see what happens in 5 years when all of this unmaintainable mess still needs maintaining. I suspect it'll be just as fun as maintaining old bootstrap or any other short-lived frameworks of yester years.

Inline styles and abusing divs. I suspect the next hotness will be nested tables again.

Right? I can't believe this is being so overwhelmingly used all of a sudden.

I host a secret dislike for it but was really turned off by you including in-lined SVG files, shifted me more towards "maybe it isn't bad relative to peers"

That's what they have on their homepage, should I have removed it? Does this look any more maintainable?

    <main class="py-6 px-4 sm:p-6 md:py-10 md:px-8">
      <div class="max-w-4xl mx-auto grid grid-cols-1 lg:max-w-5xl lg:gap-x-20 lg:grid-cols-2">
        <div class="relative p-3 col-start-1 row-start-1 flex flex-col-reverse rounded-lg bg-gradient-to-t from-black/75 via-black/0 sm:bg-none sm:row-start-2 sm:p-0 lg:row-start-1">
          <h1 class="mt-1 text-lg font-semibold text-white sm:text-slate-900 md:text-2xl dark:sm:text-white">Beach House in Collingwood</h1>
          <p class="text-sm leading-4 font-medium text-white sm:text-slate-500 dark:sm:text-slate-400">Entire house</p>
        </div>
        <div class="grid gap-4 col-start-1 col-end-3 row-start-1 sm:mb-6 sm:grid-cols-4 lg:gap-6 lg:col-start-2 lg:row-end-6 lg:row-span-6 lg:mb-0">
          <img src="/beach-house.jpg" alt="" class="w-full h-60 object-cover rounded-lg sm:h-52 sm:col-span-2 lg:col-span-full" loading="lazy">
          <img src="/beach-house-interior-1.jpg" alt="" class="hidden w-full h-52 object-cover rounded-lg sm:block sm:col-span-2 md:col-span-1 lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy">
          <img src="/beach-house-interior-2.jpg" alt="" class="hidden w-full h-52 object-cover rounded-lg md:block lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy">
        </div>
        <dl class="mt-4 text-xs font-medium flex items-center row-start-2 sm:mt-1 sm:row-start-3 md:mt-2.5 lg:row-start-2">
          <dt class="sr-only">Reviews</dt>
          <dd class="text-indigo-600 flex items-center dark:text-indigo-400">
            <SVG GOES HERE>
            <span>4.89 <span class="text-slate-400 font-normal">(128)</span></span>
          </dd>
          <dt class="sr-only">Location</dt>
          <dd class="flex items-center">
            <SVG GOES HERE>
            Collingwood, Ontario
          </dd>
        </dl>
        <div class="mt-4 col-start-1 row-start-3 self-center sm:mt-0 sm:col-start-2 sm:row-start-2 sm:row-span-2 lg:mt-6 lg:col-start-1 lg:row-start-3 lg:row-end-4">
          <button type="button" class="bg-indigo-600 text-white text-sm leading-6 font-medium py-2 px-3 rounded-lg">Check availability</button>
        </div>
        <p class="mt-4 text-sm leading-6 col-start-1 sm:col-span-2 lg:mt-6 lg:row-start-4 lg:col-span-1 dark:text-slate-400">
          This sunny and spacious room is for those traveling light and looking for a comfy and cosy place to lay their head for a night or two. This beach house sits in a vibrant neighborhood littered with cafes, pubs, restaurants and supermarkets and is close to all the major attractions such as Edinburgh Castle and Arthur's Seat.
        </p>
      </div>
    </main>

This is only 20 max CSS classes. Yah, you haven't been a REAL tailwind maintainer if you haven't worked on a website that uses 50+ CSS classes for elements - some with minor variants! I had to do so and deeply regret the experience.

It was like extreme eye exercise with eyeballs popping out at the end of the work day.

Tailwind CSS is a write-only CSS cult at the moment. Cults take some time to die. After a decade, one will have dozens of "Why I quit using Tailwind" posts on HN. Back to vanilla CSS!

Now, if one wants to use a sane implementation of Atomic CSS, look at: https://open-props.style/. Jeez that is so much more readable and maintainable.

Reply on news.ycombinator.com