
Ask HN: Is it worth purchasing TailwindUI? - harshamv22
At the pricy tag of 250$ is it worth buying TailwindUI? Anyone who has already bought it. Could they share some feedback?
======
zakerving
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.

------
SahAssar
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.

~~~
bdr
Why do you hate utility-css?

~~~
SahAssar
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](https://news.ycombinator.com/item?id=22422873)

~~~
gitgud
> _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...](https://tailwindcss.com/docs/extracting-
components/#extracting-css-components-with-apply)

~~~
SahAssar
> 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;
        }

~~~
gitgud
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](https://tailwindcss.com/docs/theme)

------
jerriep
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](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.

------
lnalx
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.

------
gitgud
An alternative is [https://tailwind.build/](https://tailwind.build/) which is
a similar concept and way cheaper

~~~
harshamv22
Thank you will check it out :)

------
navaja
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.

