Tailwind UI has made over $500k in sales in its first three days (twitter.com)
Adam's tweet -> https://twitter.com/adamwathan/status/1233517884619546631
Tailwind UI is a library of responsive HTML components, built using Adam's framework Tailwind CSS. It's only been selling in early access for three days!
81 comments
[ 4.7 ms ] story [ 145 ms ] threadI 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...
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...
The quality of his work has definitely been a key factor, too.
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.
If you are noboby, nobody will buy your stuff.
Just a counterpoint. I had never heard of tailwind before it front page of HN couple of weeks ago. I bought it because it looked pretty and I need to revamp one of my sites. And yea price point was super attractive to me.
it's quite cheap for this large amount of polish. $300 bucks is less than a day's wage for a good engineer, but a good engineer would need to spend at least a week to polish bespoke stuff to this level. So therefore, it's worth the price tag.
Agreed. $500K in 3 days sounds like a sudden windfall, but Adam has spent a long time and a lot of effort building a quality product and a quality following.
> 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.
These "charge more" success stories are a prime example of survivorship bias. We never hear about the bootstrappers or freelancers who charged too much for too little and lost their clients. Furthermore, it undermines from the amount of effort that successful bootstrappers invested before they reach success. Frankly, it feels like the "charge more" crowd is trying to downplay the effort of founders and replace it with their own "one cool trick" bit of guru wisdom.
Locally, I've seen a lot of beginner freelancers and bootstrappers put the cart before the horse with "charge more" before they have a quality product/service.
Charging premium prices for premium products makes sense. Charging premium prices for mediocre work will build the wrong type of reputation very quickly.
If you think that, then you don't understand why we use and choose Tailwind over the other "quality" OSS UI components.
If you name three, I can tell you exactly why Tailwind UI is superior to them.
Tailwind CSS/UI components? Just edit your config, or you're in complete control, so uhhh... just remove `bg-blue-700` and replace it with `bg-green-500` if you want it to be green instead of blue.
You can have a theme file with lot of options passed to your provider and then in your jsx, simply use variant.
<Button variant="green" text="there?"/>
or for css properties, you can do <Button sx={{ background: `primary` }} text="hey?" />
Plus this looks to be exclusive to React. Tailwind makes no decisions about what you use your styles with, just generates the classes for you. You can use it with vanilla html, react, angular, vue, svelte, etc.
The things you're talking about sound like personal preferences, not killer features that remain out of reach for regular component libraries.
Maybe it's not for you, and that's totally ok, nobody is forcing you to switch to Tailwind. It's just another tool to put into peoples toolbags. Use what works for you.
Frankly, I don't see the point in saving a few characters and react/css-in-js solutions make it easy to write reusable components so I don't need a css framework.
Theme UI comes with basic components too.
Using SASS, postcss, LESS, stylus or any popular framework gives you variables/easy setup to make/use themes.
if there is something else unique about tailwind that I missed, let me know. I haven't seen tailwind out of HN circle.
> if there is something else unique about tailwind that I missed, let me know. I haven't seen tailwind out of HN circle.
Tailwind is geared towards people who have the ability to design but aren't really that great with CSS.
Take me for example, I have an eye for design, and can put together great UI's and can do everything needed to build my apps... But on a scale of 1-10, my CSS skills are about a 4-6. I could spend lot of time leveling up my CSS skills so I can hand write all my own CSS, or I can use something like Tailwind that is intuitive and easier to learn and lets me focus on what matters the most... Shipping my product.
I genuinely didnt see the big appeal, especially at the 149$ price range etc. Just didn't scream to me.
What did I miss ??
You have to count the overhead of the system that gets the work to the devs, and 30% on top of salaries for benefits and such.
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.
Managers often assume that commercial components will have better first-party documentation and support to the extent that it overcomes community of no-cost components and makes this aspect weigh in favor of paid components.
I don't think it's generally true, but I'm just the one who has to work with them, not the guy with the metaphorical clean hands and literal corner office who makes the decisions.
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.
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.
With that said, probably still going to buy it.
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.
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.
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.
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.
No it wasn't.
Maybe worth noting, I did not buy it however. Namely because of how I'm writing my UIs atm. I can't use this product to quickly prototype - I'd instead have to hand copy layers of DOM elements and classes. At that point the buy-in of quick prototypes seems less valuable to me.
Still though, I'm definitely a target audience for this type of thing. Design, fiddling with the fine UI details, choosing colors, etc - all of that is not my area, nor do I desire it to be. I see the value in it.
They are making money, so no, it's not dumb
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.
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).
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.
They do, it's called HTML :)
Jokes aside, native HTML obviously isn't enough by itself anymore. But I think that's because it's been neglected, not because things have to be that way.
IMO there are two ways it would need to change to compete with these libraries:
- A makeover. By 2020 standards, your website is ugly if you don't start from the get-go with a heap of CSS. But it probably doesn't need to be.
- Native reactivity. This is something that would benefit everybody. Why in the world do we still need third-party Virtual DOMs implemented in JavaScript when reactivity has so clearly been established as a paradigm? Why don't we have a browser API implemented in C++ for reactive rendering of HTML templates?
Yeah I've been saying this for years. We need native reactivity and data binding. We'd save so many CPU cycles and bandwidth.
Why? I'd argue most UI/UX missteps stem from the ego (designer, engineer, executive) to want something unique. If anything, there should be more of a convergence on best practices.
Users won't have to relearn "the basics" in every app and everyone can focus on real problems.
A website IMO is more than just UI elements placed in a particular place. It's you or your company's identity. In a way, maybe it's related to clothing. Your site portrays your personality, or at least what you want others to think about you or your company.
Following the clothes analogy, there is room for best practices and standard things to take place while having many different unique styles. For example, you're probably not going to walk around wearing a desk that has cut outs for your limbs and is suspended by ropes. No, we have best practices like shirts, pants, shoes and other things. But when you combine those things with varying materials and colors you end up with a completely different look while adhering to standards.
Maybe you could say a unique identity is a byproduct of ego and maybe it is but that's how people are. Otherwise we would all be wearing the same global uniform and eating the same food every day.
Long story short, there's plenty of room to stick with UI best practices while having a unique look, but you need to find tools that support customizing that look or find a designer who knows how to do it.
I'm not advocating a sterile one size fits all grey dystopian outfit equivalent for everyone. But when you look at the landscape of software, I'd argue that teams forget what the equivalent concepts of what pockets or zippers are.
Similar to how many orgs will spend $100k's to have a half baked mobile app when a web app or off the shelf CMS would not only suffice but be a better solution for the end users's needs.
Point being - get the basics right, leverage the immense value that's been provided by the open source community and then & only then do you start redecorating.
1. Tailwind UI is built on top of Tailwind CSS, Tailwind CSS is not closed source. Tailwind UI does ship with a plugin to Tailwind CSS that adds a bit of extra customizations on top, but not much, and even still that is open source.
B. Tailwind UI is a collection of components built on top of Tailwind CSS, the beauty of Tailwind CSS is that it's easily customizable, sure you can copy and paste these components into your app, but they are sooo easily customized that you just change `bg-blue-700` with whatever color you want your app to be and boom, it's different. Without the headaches of most other UI frameworks like Bootstrap.
III: I maintain Awesome Tailwind CSS project (https://git.io/awesome-tailwindcss) and we have a section for sites & apps built in Tailwind. I review all sites to make sure they are indeed built in Tailwind, and honestly, I have to view source and read CSS class names to make sure they are Tailwind because it's not easy to tell from the look of the site.
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
Mostly, I bought those because of liking Tailwind and liking the podcast, Fullstack Radio.
in the same way, tailwind UI has been really useful over the last week since i bought it. some of the integration stuff isn’t ideal - you have to copy-paste huge snippets of code w/ alpine.js code you need to manually remove - but overall i’ve already found it to be useful to help me get unstuck on designing my apps.
i made a little vid on my channel about getting started with tailwind ui if anyone wants to see what it looks like in practice: https://youtu.be/quhvuOTlrwA
(note that since then i’ve added a lot more of the components in this project: my feedback has stayed pretty consistent, and i think some of the copy-paste problems are easily solvable)
Let's take their most recent post for example (Remove Borders): 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/
[1] https://designsystem.digital.gov/
Merely claiming something is true doesn’t really mean much.
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.
https://tailwindcss.com/docs/extracting-components/#extracti...
I'd never heard of @apply before. It sounds like a great approach.
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.
Once that's done, the utility classes can be extracted to reusable CSS via the `@apply` directive.
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?
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.