

Tailwind UI has made over $500k in sales in its first three days - AlchemistCamp
https://twitter.com/adamwathan/status/1233517884619546631
Adam&#x27;s tweet -&gt; https:&#x2F;&#x2F;twitter.com&#x2F;adamwathan&#x2F;status&#x2F;1233517884619546631<p>Tailwind UI is a library of responsive HTML components, built using Adam&#x27;s framework Tailwind CSS. It&#x27;s only been selling in early access for three days!
======
AlchemistCamp
It's worth noting a bit about how he was so successful. I don't believe it was
the pricing. He's selling two modules at $149 each or a bundle with both for
$249, which is fairly typical.

I wouldn't be surprised if somebody with a user name ending in eleven showed
up saying "charge more", but I believe that rallying cry has already pretty
thoroughly saturated HN and the bootstrapper world in general.

So much so, that most of us are blind to what actually does differentiate Adam
and leads to his success.

A more under-valued takeaway than "charge more" would be "the power of free".
Adam built a _massive_ following by giving devs what they wanted for free
while contracting. This ranged from sharing countless useful tips on Twitter
to blogging and then later podcasting.

During his _excellent_ interview with csallen on IH[1], he described this
practice of helping people for free as a "spring" that he was pushing down on.
When he finally sold something, that stored commercial energy was released!

Each cycle he's pressed the spring down harder and longer.

His earlier courses came together relatively quickly. His design book was
started on the back of a longer free campaign of tidbits on his blog and
twitter. This time, he started by building Tailwind CSS into a top-notch open
source library with extraordinary growth for multiple years before he
monetized it with Tailwind UI.

1) It was csallen's helpful post on IH that sparked me into disagreement to
write this one! See: [https://www.indiehackers.com/post/adam-wathan-just-
made-500k...](https://www.indiehackers.com/post/adam-wathan-just-
made-500k-in-3-days-from-his-new-product-603feefe61)

~~~
blackandblue
> Adam built a massive following...

say no more. that was my first thought. online popularity is a real thing and
most people tend to ignore that.

i want to say it's less about what you are building but the number of people
you can convince. the result of years of online socializing...

in fact, i have been, sometimes, utterly impressed by people who build large
followings and supporters on patreon. having people believe in them while they
are still figuring out their journey.

and on the other hand, i have seen i have seen people i have admired for years
and considered role models try to build an online following and fail.

things have changed...

~~~
AlchemistCamp
Yes, and I'd say his following was earned and his methods can be copied...
they're just a lot of work and take time.

The quality of his work has definitely been a key factor, too.

~~~
nkrisc
The age-old magical formula of: high quality content + good marketing + loads
of effort = success.

Seems as though he's put it lots of effort over the years creating valuable
content (and giving much of it away for free) and marketing it widely and
effectively, and he's being rewarded for that.

------
danmostudco
For what it's worth - I saw the value of Tailwind UI as its connection to the
Refactoring UI product from Adam Wathan (tailwind) + Steve Schoger -
[https://refactoringui.com/](https://refactoringui.com/) The tips,
screencasts, and eventual book they offered gives a superb, distilled, crash
course on making stuff "look good" when to the untrained eye it can all seem
arbitrary. They take a lot of guess work out of adding polish to your product.

Taking a look at Tailwind UI, it's clear they have baked in all of the tips
and tricks into the components offered, adhering to preached principles like
good visual hierarchy, layout and spacing, color theory, and typography.
Therefore, while TailwindUI may seem like just a bunch of utility classes, the
components they have constructed tap into a lot of solid design principles
that a large community has bought into and studied. I'll for sure be buying
and trying it out in future projects of mine.

Previous discussion on Adam and Steve's book here:
[https://news.ycombinator.com/item?id=18655224](https://news.ycombinator.com/item?id=18655224)

~~~
Someone1234
Refactoring UI fails to explain WHY or provide evidence (e.g. A/B tests) that
show their new designs even work.

Let's take their most recent post for example (Remove Borders):
[https://twitter.com/steveschoger/status/897849211110273024](https://twitter.com/steveschoger/status/897849211110273024)

The only explanation as to WHY is the before "look[s] really busy." That's
quite subjective and unhelpful. There's no testing here, there's no remark on
usability/accessibility, no discussion of color-blindness vis-a-vis background
color tones, nor real justification for the change anyway.

If you want to create pretty things without worrying about the consequences,
they seem like a great resource. But hard to see it as more than a toy
resource; professional UI resources do a much better job because they're made
for real end users, rather than other developers e.g. UK Digital Project[0],
US Digital Project[1].

PS - I'm not saying their designs don't look nice. I'm saying a nice looking
UI design isn't a good yardstick for UI. I've created plenty of nice looking
UI that users performed worse using.

[0] [https://design-system.service.gov.uk/](https://design-
system.service.gov.uk/)

[1] [https://designsystem.digital.gov/](https://designsystem.digital.gov/)

~~~
user_50123890
Ugly UI will absolutely reduce the amount of users and even more so potential
sales.

~~~
chrstphrknwtn
Amazon is “ugly” in a lot of ways... but is wildly successful.

Merely claiming something is true doesn’t really mean much.

------
nickjj
I just wonder if this means every single site will look the same.

The UI is already very heavily inspired by Stripe's UI, which is ok because it
looks awesome.

But if this product is targeted towards non-designer developers who want to
make nice UIs quickly, that means using the components as is with little
modification. In order to really customize things to the point where it looks
unique would require being a designer in which case, you probably have your
own components already.

And since it's closed source, we likely won't see a huge influx of custom
looks to these components like we do with Bootstrap. I hope Adam addresses
that by eventually making multiple variants of each component in each kit so
we have some variation. Even just a few well tested color palettes would help
initially.

~~~
pier25
> _I just wonder if this means every single site will look the same._

It's weird because in the web world we expect sites to look different and have
a unique look and feel.

But in the native world (mobile and desktop) devs are lauded when using native
OS GUIs.

I've often wondered if browsers should ship a standard UI kit with everything
taken into consideration (performance, accessibility, etc).

~~~
karatestomp
> I've often wondered if browsers should ship a standard UI kit with
> everything taken into consideration (performance, accessibility, etc).

Since it's 2020 and we're now, what, 15 years into the whole "webapp" thing,
yes, we're at least five years overdue to have an actual decent-looking well-
functioning application UI library shipped with browsers so we can stop
burning so much damn money re-inventing yet another shitty non-a11y-friendly
broken-on-some-browsers fundamental UI widget all the time.

~~~
charliepark
I’m not sure what the status / velocity is like on this, but Google and
Microsoft are both working on improving Chromium’s default elements, both on
aesthetic and usability grounds. Here’s a video from November ’19 about it:
[https://youtu.be/ZFvPLrKZywA](https://youtu.be/ZFvPLrKZywA)

------
wolco
Probably the most famous laravel dev outside of Taylor with Jeffrey kinda
slowing things down.

Really good laravel online talks.

Refactoring to collections book sold well. Kinda sparked this movement against
for loops (which ended up being too cargo cultish). But he changed the php
world with that book.

Test driven development was pretty popular.

Tailwind is now following this path.

Good for him. Many have tried to copy his style but it is hard to teach his
natural presentation style. All success that follows that is only the piece
that shows on the surface there is a lot of hard work and timely execution.

And I personally don't even like Tailwinds but I look forward to the nexy
arena he will conquer. Postgres? AI?

------
bilekas
I remember reading about this here, and I did take alook at the project, but
maybe I missed something major.

I genuinely didnt see the big appeal, especially at the 149$ price range etc.
Just didn't scream to me.

What did I miss ??

~~~
netsharc
The 500K sum surprised me too, but what I think I missed is the fact that if
you're a hobby developer, reinventing the wheel (of UI design) is fun and just
costs your time; but if you're a business, reinventing the wheel costs the
many many hours your dev will spend on that task, multiplied by their hourly
rate...

~~~
gambler
_> if you're a hobby developer, reinventing the wheel (of UI design) is fun
and just costs your time;_

If you're an inexperienced manager, buying off-the-shelf products for
everything outside of your core business might sound appealing.

However, buying a product like this will not make all your design problems
magically go away. You have to evaluate the costs of using it over time vs the
cost of maintaining your own styles over time.

Using UI libraries is not free. You have to learn how to use them _properly_.
That's an additional cost you pay every time you onboard someone who will deal
with your frontend. You have to deal with library updates. You have to solve
edge cases they don't cover in a way that doesn't devalue the library.

Some of the worst UI issues I ever faced in legacy software came from
commercial 3d party components.

~~~
netsharc
> That's an additional cost you pay every time you onboard someone who will
> deal with your frontend.

Huh, but if you have an "we made it ourselves" framework, won't that cost
still be there too?

Whereas nowadays employers can just demand experience with jQuery or Angular,
because they became standards. Maybe if Tailwind got popular enough, employers
can save costs by just looking for devs with experience in them.

~~~
gambler
_> Huh, but if you have an "we made it ourselves" framework, won't that cost
still be there too?_

In many real-life scenarios it's not a matter of learning a 3d party library
_or_ an in-house product. You often have to learn some in-house product
regardless and every 3d party library is an extra. It's not nearly as cut-and-
dry as many people make it out to be. There are many, many specific questions
that have to be asked when choosing whether to write or buy.

------
mrfusion
Can someone explain what tailwind is assuming I’m a bootstrap and jquery guy
from 2014?

~~~
snorremd
Tailwind CSS is a JavaScript library that produces css with utility classes
that allows you to build a consistent look and feel in your web page. Unlike
Bootstrap which exposes components like buttons, cards, input elements, and
other components, Tailwind CSS gives you utility classes that handle padding,
margins, colours, shadow, etc. Typing in Tailwind CSS utility classes feels
very much like writing CSS. Each utility, e.g. mr (margin right), comes in
various forms including sizing and with media queries. So mr-4, sm:mr-2, etc.

The value of the Tailwind CSS library lies in its templating and plugin
system. You can very easily change what mr-2 means. You define it once in your
template and it affects your entire app.

If you see repeated components in your app you can opt to create css
components using Tailwind's JavaScript based configuration, though you can
just as easily create the component as a React, Vue, or Angular component.

I used Tailwind CSS in a project and my favourite thing about it was how
little I had to fight with Tailwind to get things to look the way I wanted.
Tailwind does not dictate what kind of components you can build, it simply
gives you good base utilities. With bootstrap you will need to build
components from scratch as soon as you need something different from the ones
that bootstrap has provided. And if you want a navigation bar, but want it to
look slightly different you will have to try to override Bootstrap's css
somehow.

Tailwind UI is simply a collection of finished Tailwind CSS components that
demonstrate useful compositions of html and various tailwind utility classes
to build common components. Instead of figuring out how to build a navigation
menu yourself using Tailwind utility classes you can simply copy the example
in Tailwind UI and customise it if you want.

Edit: Tailwind CSS only produces CSS. It does not provide any JavaScript for
you components. That you will need to build yourself. There is no Tailwind.js
to run in your browser to handle multi-select dropdown inputs, etc.

~~~
wdb
Personally, I don’t like the utility classes aspect of Tailwind. I can’t
explain why but it feels wrong. I know it’s silly but it’s a feeling

~~~
adyus
You might be thinking of utility classes as the finished product. They're
incredibly useful for quickly prototyping and "jiggling" things until they
look good.

Once that's done, the utility classes can be extracted to reusable CSS via the
`@apply` directive.

------
madamelic
Can't wait until every site ever looks exactly the same, just like the
Bootstrap 3 era.

With that said, probably still going to buy it.

~~~
blunte
Maybe if they all looked the same, there would be a net improvement in
internet website utility.

------
pier25
I'm glad for his (their?) success but in my personal subjective opinion I find
that flooding the markup with CSS utility classes is an absolute aberration.

I totally see the convenience of having everything in the same place but:

1) It's much harder to read than regular CSS files.

2) It adds so much noise to the markup

3) By trying to solve everything via utility classes some situations need
convoluted markup that wouldn't be needed otherwise.

~~~
ianwalter
Extracting/composing utility classes into component classes using @apply has
worked well for me. I was surprised that the Tailwind UI code examples don't
include examples of how you would do that especially for things like buttons.
Maybe they will add that at some point.

~~~
pier25
They actually have it in the Tailwind CSS docs:

[https://tailwindcss.com/docs/extracting-
components/#extracti...](https://tailwindcss.com/docs/extracting-
components/#extracting-css-components-with-apply)

I'd never heard of @apply before. It sounds like a great approach.

------
dfee
Having built UI frameworks myself, this looks so well put together.

Is there anything like this for iOS / SwiftUI? Having begun playing cross
platform, I feel like I’m needing to reinvent every non-trivial element.

------
skiabox
Is it easy to use it in a react js app?

------
dangerface
My first thought is why? It's a dumb business idea simply because it has
already been done better by others for free.

The whole utility css style is bad design but new and trendy so I guess its
got good adoption from that.

edit: $150 is a perfectly reasonable price for a template, people saying they
should charge more are wrong you cant charge more than $200 for a template.

~~~
mrkurt
Boring cynicism is boring.

Tailwind has been great for me as a non designer. If the components are as
helpful as just the css has been, $150 will seem like a steal.

And “design of css classes” isn’t something that seems very important.

~~~
dangerface
> And “design of css classes” isn’t something that seems very important.

The lack of name spacing in css is a big issue on any non trivial project.
Tailwind was made specifically in an attempt to address this, but I guess that
isn't very important?

$150 for a template is pretty average, checkout themeforest.net its got loads
of components and templates many of them free. As a non designer I use
designers resources all the time and modify them to fit the purpose great
value to me and my customer.

Thats kind of my point, at first you think "How can you make half a million
with such a dumb cookie cutter business model?"

Then after thinking about it for five seconds the answer is obvious. Just the
same way as everyone else on theme forest make a theme and sell it to 3000
people job done.

~~~
gambler
_> The lack of name spacing in css is a big issue on any non trivial project._

FFS, just use custom attributes. Your attribute becomes the namespace. Its
content determines styles. I figured this out 4-5 years ago and never looked
back. It's amazing that we have thousands of designers making their libraries
and writing their blog posts, yet this obvious solution to a universally
occurring problem isn't something even _considered_ by the general web design
community.

~~~
dangerface
Custom attributes? Are you on crack? Check out the class attribute.

