Ask HN: Is it worth purchasing TailwindUI? | Hacker News Reader

Ask HN: Is it worth purchasing TailwindUI?

21 pointsharshamv2213 comments

At the pricy tag of 250$ is it worth buying TailwindUI? Anyone who has already bought it. Could they share some feedback?

View on HN

Personally, I love Tailwind. If I were building more MVPs these days, I would absolutely buy it, because the up-front cost would pay for itself in billable labor by the end of the first day.

Back when I had a small design studio, I employed two contractors to help with book covers and typesetting. We were dispersed across the U.S., and would use the brand-new Wunderlist (remember that??) to coordinate who was working on what title. Wunderlist was free but limited in its features, but after a few months they unveiled a premium plan that was something like $5-10/month. Lots of people were upset, but I gladly forked over the money. Overnight, I cut my time spent on administrative tasks by ~90%, freeing me up to do whatever else that needed to be done. I believe I calculated out the "savings" the premium Wunderlist membership made me every month, and it was in the thousands of dollars. Ten bucks a month was a steal.

If you're relying on something as heavily as Wunderlist—or in your case, Tailwind—buy it and don't look back.

My totally unsubstantiated view as someone who hates "utility-css":

If you already use tailwind, like it and don't want to heavily customize your UI components: Yes. The cost is definitely lower than getting a dev/designer to make equivalent stuff if you want to arrive at the same end result.

Otherwise: No.

Why do you hate utility-css?

It goes against what css and html is supposed to be, it works against the cascade built into the language and it's clearly just a inline css replacement with a new coat of paint (and I don't even like the paint).

I could probably go on, but I think that is enough. There were a lot of discussions about this in the thread about tailwindUI here: https://news.ycombinator.com/item?id=22422873

> works against the cascade built into the language and it's clearly just a inline css replacement with a new coat of paint (and I don't even like the paint).

If that's the only reason, then you should seriously re-evaluate it. [1] You can combine the utilty classes into your own component classes anyway e.g: '.my-button'.

The main thing that "utility css" offers is composition over inheritance. You're basically composing small styles to create component styles. You're not overriding the css framework, you're composing your own framework.

But it's not for everyone and that's cool too

[1] https://tailwindcss.com/docs/extracting-components/#extracti...

> You can combine the utilty classes into your own component classes anyway e.g: '.my-button'.

Yeah, I heard that argument but in that case I really don't see why I would use it over some well-defined css variables in normal css like this:

    .btn-blue {
        background: var(--color-blue);
        color: var(--color-white);
        font-weight: bold;
        padding: 0.5rem 1rem;
        border-radius: .25rem;
    }

instead of:

    .btn-blue {
        @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
    }

Well, it's probably faster to write (depending on how good your code completion is).

Another benefit is that "bg-blue-500" is globally configurable with [1] themes or configuration files. This means you're not hard-coding colors or sizes (although, yes that's possible with plain old CSS too)

But what's even faster is simply using the utility classes in your components (it looks messy at first) but its extremely fast to write once you know the syntax of the classes e.g. ".p-xx = padding: xxem". Then all your components encapsulate that messiness and it's easy to change.

For example in vuejs, I might make a "btn" component file and style it using Tailwind classes, then the component encapsulates all it's styles but can still be globally configured using tailwind themes.

[1] https://tailwindcss.com/docs/theme

> It goes against what css and html is supposed to be

Outside of CSS Zen Garden and tiny hobby project, I feel like CSS and HTML _never_ were used as intended. I think the author of TailwindCSS said as much, but I can't find the quote now.

I bought it and I am happy with my decision. You need to understand, however, that there is still a bit of labour involved in extracting reusable components.

For example, you will want to make things like the buttons easily reusable instead of repeating the same CSS utility classes everywhere, so you may want to spend time creating reusable components for the common UI elements in your front-end framework.

Another frustrating thing is figuring out which are the "active" and "inactive" classes on some components, as described in this tweet: https://twitter.com/cgenco/status/1256948882065494017

Overall, I'd say if speed of development is a priority, then it may be easier going for a ready-made bootstrap template or UI component library. If flexibility and customization is a priority, then go for TailwindUI.

I bought TailwindUI, at first it was just crazy to spend 250$ for a CSS utility.

I regularly build MVPs or administration dashboards and TailwindUI saved me several hours of work.

With perspective, it's one of the best investments I've made. Moreover the Tailwind team regularly adds new templates.

An alternative is https://tailwind.build/ which is a similar concept and way cheaper

Thank you will check it out :)

Personally I didn't buy it but it's a great investment if you work on a lot of projects without a strict design constraint. Many UI features you may end up creating manually are already there, and it looks refreshing when you compare it to the more traditional or older frameworks like Bootstrap.

I'd recommend to first try using Tailwind without buying the UI option, it's free and open source.

Reply on news.ycombinator.com