As an infrastructure engineer who spends all day in Go and Bash and AWS I gotta say I’m a huge fan of Tailwind. This looks worth buying too. People are blown away by my front end skills, baby I’m just letting Copilot and Tailwind whisper sweet anodyne nothings into my ear. Keep me as far away from design as you can; this helps!
Not parent, but I do. Go, SSR, vanilla JS, TailwindUI, SQLite, Litestream got us to $20k MRR for a niche CRM product.
TailwindUI provides HTML-only code and includes useful comments about class transitions, so I was able to handle the mobile hamburger menu and some form submission stuff in a tiny JS file, rather than React or Vue (which they also provide code for).
Hah same here. Learned enough tailwind to be effective for my personal website. I’m writing a blog article about it. Gpt4 didn’t produce satisfactory layouts so I learned grid-cols and flex, which is useful for groking existing tailwind layouts.
I bought tailwind UI more than a year ago. The lifetime/unlimited product or whatever it was.
It’s generally fine but feels incomplete. Many of the components don’t have any alpine or JS code documented even though the team has clearly built those aspects when building the previews and demos.
I’m not sure what the rationale was there but I hope they’ve fixed it here.
I’ve gotten into the habit of using “Inspect Source” in my browser when copying and pasting, because it tends to have almost fully-built Alpine transitions embedded.
I paid for DivMagic extension which lets me select elements on a page and it generates tailwind styled html code. It was quite useful for the first month but will probably cancel soon.
I bought Tailwind UI when it first came out, and have been thrilled. I view it as essentially I paid for a high quality template to build off of. You are still expected to know tailwind, or at least that's how I took it, I am not sure how its advertised now, but I am pretty sure its not advertised as a batteries included OOTB solution, but more as a starting point. From that perspective, I have been pleased.
Even though the discord said they refund with no issues I haven't asked for a refund but tailwind ui was not worth the money unless react is being used.
Such a massive disappointment there isn't any JS with the "vanilla" components.
I’ve been really happy with my tailwind ui purchase. I’m weaker on the design side so having a consistent and decent look and feel is great. Writing up a little bit of js to make them dance is no big deal, and I like that I don’t have to buy into another build process or toolchain for it.
Yes, agreed. I used them earlier and the examples on the page use alpine, but the "copy code" doesn't have it. It's actually easier to just inspect/view source and take what they did from the examples than try to write your own.
Cause that's not what it's for? It's like the opposite of headless components. It's all head and no component. That's what you're buying. I think that's pretty clear cause that is what Tailwind is. It's CSS, not a component library. That's what this thing is.
> If you'd rather write any necessary JS yourself or want to integrate with a framework other than React or Vue, we also provide every Tailwind UI component example as vanilla HTML that you can adapt yourself.
The js they use is mainly just showing how to hook headlessui up. Tailwind ui was never about buying fully fleshed ready to go react/etc components. They were building blocks you adapt. Guess a lot of people missed that and assume it’s copy paste. Catalyst will become that hopefully.
Flowbite looks like what tailwind ui should have been.
Designers I have worked with want to use flowbite so their figma comps are accurate and i think tailwind ui not having figma assets is a huge drawback.
Yeah 100%. I've been looking for a UI library with figma templates and the choices are:
1. Flowbite
2. ...er Flowbite
I'm not a designer, I just want to be able to mock up a UI before I implement it. I guess it's not a priority for other companies so I'll buy Flowbite (in spite of the annoying YouTube thumbnails on their site).
We're using it with React and occasionally find the docs lacking (and go looking in the component source for the answers), but otherwise have been happy with it, fwiw :-)
You aren't missing anything except that Catalyst is included in the Tailwind UI lifetime license that many HN readers bought years ago so this is likely from an "insider" email campaign, rather than a marketing landing page for a standalone product. It's not meant for general consumption yet.
how does that work if you wont be hired without prior experience in a particular stack to begin with
for current employment I’ve only ever seen teams push for using the next shiny thing solely to get that experience and professional validation in the current role, to be competitive for consideration in the next roles
It's unfortunately accurate that a lot of roles and people in those roles are indeed purely bullet-point driven for their resumes. If you're entering a role at a mid-level or junior, you're likely stuck with their tech stack choices. At senior or higher, it's usually about delivering results and the tech stack is up to you.
I've never paid much attention to specific job requirements, just whether or not I could solve the problems they were looking to solve.
> If you're entering a role at a mid-level or junior, you're likely stuck with their tech stack choices. At senior or higher, it's usually about delivering results and the tech stack is up to you.
> I've never paid much attention to specific job requirements, just whether or not I could solve the problems they were looking to solve.
So then I assume you’ve always been a senior developer?
Also I think this probably depends on domains/culture/multitude of factors. There are a lot of places where senior is just “cog with a lot of experience” or “cog with a lot of tenure”.
I can also build anybody’s application in any stack, but that doesnt get me in the door, doesnt get the recruiter to say anything, doesnt get any hiring manager intro call
What kind of clientele are you going to where you’re just like “I am computer man, from internet, I can build that for you” and they’re like “woooooowwwww you’re hired!”
The business risks surrounding unpopular choices are generally strong enough to overwhelm the technical arguments. So why should a lead choose htmx? IMO only if the project was trivial enough to bring on such whimsical risk.
The fact that a library which does nothing more than swap a DOM element after an XHR request has the entire React community forming a collective shield wall should illuminate why it’s a dead-end technology.
It says "admin panel tool", which given the examples seems to me that the prohibition is not on creating a single purpose admin panel for a specific app.
I think you can make an admin panel for your own application backend or whatever. You just can’t sell a general purpose admin panel product. At least, that’s my reading of it.
Yeah, creating a postgres admin panel would probably fine.
Creating an admin panel for a blogging platform that gives the admin a WYSIWYG-like experience that leverages tailwind ui is probably too close to competition
> The reason Mantine is free is because the maintainer is not doing it for quick bucks.
Over time I've found that lack of monetization eventually leads to maintainers leaving the project. Paying money feels like a way to guarantee (to a degree) that the maintainer won't drop the project when their attention turns elsewhere.
We have both kinds of projects, the ones that are free so maintainers leave, and the ones that make money and the money warps incentives over time. Rather than free vs paid, I try these days to get a sense for the motivations of the creator, and whether those motivations feel sustainable for something durable. Sometimes they involve money, sometimes not.
Oh man, if this is more or less tailwind ui but already turned into thoughtful react components, I’m all in. Tailwind ui has been useful as a reference of a non-trivial implementation of tailwind css that you buy, which is great. Try to drop the examples into a real application and you’ll have a bad time, it just feels like something should exist already… and here it is! Hopefully, anyway, will definitely try it out!
Yea, before this, I had been creating my own components based on the examples provided. It will be nice to just have premade components, now I won't have to implement all the components myself.
Many other UI frameworks such as kendo have tried this and failed, and gone back to variants for each UI framework.
Really, if you want meaningful integration with a ui library it has to natively support that library.
I mean certainly I would be delighted if they’d figured out a way to do this, but it’s unsurprising they didn’t: it’s just a very very difficult problem to solve, and the only really decent effort at it (web components) has had extremely limited support and enthusiasm from the community, and has some reasonably unsolvable technical limitations.
Someone needs to invent a way of doing that that works before you could reasonably expect people to start building frameworks with it.
Do the other offerings you're refering to use tailwind css?
In that case I'm also paying for continued development by the tailwind team, unlike the free offerings. I don't mind that free toolkits use tailwind, that's the beauty of the MIT license, but I do value paying something to the creators to ensure continued development. Especially if my business makes enough money from it.
I use PrimeVue, which offers it's components in Tailwind, Bootstrap, and their own CSS framework. They also offer all the components as figma files and provide actual documentation of each component unlike tailwinds 3 lines of comments for each component.
NB. I've paid for both tailwind UI and PrimeBlocks.
> Why does Tailwind not build framework agnostic UI components?
They do. As part of the original TailwindUI product you get UI component templates where you can choose between React, Vue or plain HTML (= framework agnostic!) versions of the source.
However the React version is essentially a big monolithic template, which is what they are trying to address with Catalyst, where those templates are being split up into components (+ other improvements).
This is an unbelievably unfinished UI library. Especially with a price tag. A limited set of components with very little attention to detail. For example, the buttons lack the active state completely. Why would I pay €250 for something I can find easily for free?
This is unfortunately the whole space around Tailwind and UI kits. Incomplete kits which look the same and are all priced highly. Just look at Catalyst, Shadcn and Radix UI. I don't know what's new in all of this.
I’m using parts of Shadcn on a real product making real money. It’s really just a combination of cva, radix, and tailwind that you can copy into your app and customize/extend.
Shadcn, radix, and tailwind are all FOSS so they are not “high-priced”.
Shadcn seems more polished and complete than Catalyst, and it's free. Absolutely no reason to pay for Catalyst. btw: is the active state missing from Tailwind since Shadcd buttons are also missing them?
> btw: is the active state missing from Tailwind since Shadcd buttons are also missing them?
Nope. Tailwind has good support for styling the active state, in the way that you'd expect if you've used Tailwind: e.g., `bg-red-500 hover:bg-red-600 active:bg-red-700`.
I don't think they were implying something is inherently wrong with agencies. My interpretation of their comment is that 'agencies' who sell assembling plug-and-play UI kits are not the same as 'agencies' who design and build bespoke products from scratch.
It's so easy to use! Plug-n-play, CSS technical debt, "production-ready", easy to customise, a single button is ONLY 1932 bytes of information, lean! /s
I was _about_ to praise it for at least being tabbable, but the example of "Team members" does not work with keyboard-only navigation... great stuff.
To be honest, his comment is more productive than yours. The point is, they expect you to pay for it, no matter how you label it, and the price is hefty for what you get.
The price includes the rest of TailwindUI, not just the Catalyst Preview. Whether or not it's the correct value for money is of course up to you, but I've used it extensively.
You are welcome to do it for free. The entire point of an UI library is to save time.. you can technically build anything you want for free if you don't value your time.
This UI library sped up my dev time at least two-fold. The components and sample landing pages provided are really great IMO (and judging by their sales, it's not just me who agrees).
>You are welcome to do it for free. The entire point of an UI library is to save time.. you can technically build anything you want for free if you don't value your time.
the comment seems more about how lousy the product it is, and sure I wouldn't want to spend my time making a lousy product, but if in my technical evaluation something sucks then there is generally a good chance that I can build something better.
So the comparison is between using money to buy something bad or using time to build something good and the phrasing would be something like:
You are welcome to use your time to build something that doesn't have all these problems.
It’s not incomplete though. It has all the components you need to fully build a full-featured functioning web application fast.
I’ve shipped products with this kit without having to change much code because it’s very well-made.
Don’t take it from me - take it from the tens of thousands of devs who also use it.
The commenter above didn’t even look deeply into the actual offering. Catalyst is just one tiny (new) subset of the large number of things offered by the entire package.
Complaints about TailwindCSS always remind me of this quote:
“It is difficult to get a man to understand something, when his salary depends on his not understanding it.”
― Upton Sinclair, I, Candidate for Governor
> Built by experts — you can trust that all of the code is written following Tailwind CSS best practices, because it’s written by the same team who created and maintain the framework.
Tailwind (and similar, I tend to use https://unocss.dev/) is not good for your frontend architecture BUT they allow you to be so fast, that it negates the benefits.
For a job well done, I'd follow the principles of https://maintainablecss.com/
For throwaway code I need to cram out as fast as I can, Tailwind it is.
I understand agencies using Tailwind, or Bootstrap, their revenue depends on it.
What's the definition of a job well done? In my eyes it's completing the project and getting it out the door to customers to use. If Tailwind makes that happen, then isn't it a job well done?
Exactly. It’s very inexpensive considering what a lot of us make and how much time it can save when prototyping. It’s paid for itself multiple times over for me.
The key differentiator as I understand it, is that they provide simple code for kick-starting your own React component library. You receive a Figma design, and you tweak the components.
But yeah, it is clearly not yet finished, the dark mode has a too low color ratio. Good thing is that this UI library comes bundled with the previously existing Tailwind UI.
Haven't checked out Catalyst but I have used TailwindUI. The components are really good but if you are not using a JS framework, it's a lot of work to integrate. The regular JS version of TailwindUI uses Alpine which doesn't have a CSP compatible version so you will have to write the Javascript from scratch.
Partially due to these and frustrated by lack of component libraries in Rails, I built and recently released a UI kit for Rails - https://zestui.com
Built with Phlex, styled with Tailwind with custom built Stimulus controllers.
It's got
- 25 themes
- Dark Mode
- Form Builder
- Icons
- Built in Flash Toast
- The components are responsive or have specific mobile views
- All the JS needed (Stimulus controllers) is wired up automatically
Phlex is a game changer. It is simple, powerful, intuitive and performant. I will never ever write a component as a partial/ViewComponent again.
That is planned as an option.i.e the developer decides whether to offer that. Some don't like it because accidental clicks close the sheet/modal which can confuse non tech savvy users.
I think we are well past the curve on the diffusion of innovation chart on this feature. It’s expected behavior that if a modal is focused and the background is blurred that clicking on the background will close the modal (or initiate close).
You can see this for yourself by using a heat-map of your users mouse movement and positioning. Note how many try to close with clicking the background.
Maybe and it will be the default. But since this is a UI kit, I will expose an option to turn it off if the developer prefers that in general or in a specific context.
Stimulus is used to sprinkle JS functionality, but why use it when Vue JS and Svelte are available? Those two are very powerful and also lightweight/minimal.
Precisely because it can be used to sprinkle JS functionality :)
Vue and Svelte are great but adopting them means that you are using Rails as just a backend. For the vast majority of apps, the Rails default stack works really well.
For most apps/sites something like Stimulus, htmlx, etc are good enough, also all JS frameworks comes with complexity, now you need a bundler, eslint, prettier, postcss, etc. I can appreciate the simplicity of relying purely on Rails ecosystem or at least very minimum JS that does not require a bundler.
214 comments
[ 3.2 ms ] story [ 243 ms ] threadTailwindUI provides HTML-only code and includes useful comments about class transitions, so I was able to handle the mobile hamburger menu and some form submission stuff in a tiny JS file, rather than React or Vue (which they also provide code for).
It’s generally fine but feels incomplete. Many of the components don’t have any alpine or JS code documented even though the team has clearly built those aspects when building the previews and demos.
I’m not sure what the rationale was there but I hope they’ve fixed it here.
Kind of inconvenient and strange.
It’s weird that they don’t just provide the alpine code that they’ve already built.
You’ve done the work guys.
That’s my only complaint. It’s been good otherwise.
Such a massive disappointment there isn't any JS with the "vanilla" components.
> If you'd rather write any necessary JS yourself or want to integrate with a framework other than React or Vue, we also provide every Tailwind UI component example as vanilla HTML that you can adapt yourself.
Designers I have worked with want to use flowbite so their figma comps are accurate and i think tailwind ui not having figma assets is a huge drawback.
1. Flowbite
2. ...er Flowbite
I'm not a designer, I just want to be able to mock up a UI before I implement it. I guess it's not a priority for other companies so I'll buy Flowbite (in spite of the annoying YouTube thumbnails on their site).
Actually preline looks good...
We're using it with React and occasionally find the docs lacking (and go looking in the component source for the answers), but otherwise have been happy with it, fwiw :-)
https://preline.co/
Which is basically what Tailwind UI should be.
Works with anything.
> Catalyst v0.1.0 is a development preview with unstable dependencies.
So, yeah, it's still a work in progress.
People that aim to be employed do not spend time on things employers are not asking for
for current employment I’ve only ever seen teams push for using the next shiny thing solely to get that experience and professional validation in the current role, to be competitive for consideration in the next roles
I've never paid much attention to specific job requirements, just whether or not I could solve the problems they were looking to solve.
> I've never paid much attention to specific job requirements, just whether or not I could solve the problems they were looking to solve.
So then I assume you’ve always been a senior developer?
Also I think this probably depends on domains/culture/multitude of factors. There are a lot of places where senior is just “cog with a lot of experience” or “cog with a lot of tenure”.
I can also build anybody’s application in any stack, but that doesnt get me in the door, doesnt get the recruiter to say anything, doesnt get any hiring manager intro call
What kind of clientele are you going to where you’re just like “I am computer man, from internet, I can build that for you” and they’re like “woooooowwwww you’re hired!”
This point feels really odd to me:
> Creating an admin panel tool (like Laravel Nova or ActiveAdmin) that is made available either for sale or for free.
I mostly get the other restrictions. You can't buy the kit then repackage it and sell it. But why can't you make an admin panel?
[0] https://tailwindui.com/license
That part I guess explains that. Tailwind UI makes admin panel themes and components so that’s a direct competition.
Creating an admin panel for a blogging platform that gives the admin a WYSIWYG-like experience that leverages tailwind ui is probably too close to competition
All better. All free. All with figma designs.
If you are new to the space, you may check Mantine components.
They are arguably better and more mature.
The reason Mantine is free is because the maintainer is not doing it for quick bucks.
Over time I've found that lack of monetization eventually leads to maintainers leaving the project. Paying money feels like a way to guarantee (to a degree) that the maintainer won't drop the project when their attention turns elsewhere.
The best thing about Tailwind is everyone can use it.
Wish we could go back to the days of building for the web and not building for React.
Many other UI frameworks such as kendo have tried this and failed, and gone back to variants for each UI framework.
Really, if you want meaningful integration with a ui library it has to natively support that library.
I mean certainly I would be delighted if they’d figured out a way to do this, but it’s unsurprising they didn’t: it’s just a very very difficult problem to solve, and the only really decent effort at it (web components) has had extremely limited support and enthusiasm from the community, and has some reasonably unsolvable technical limitations.
Someone needs to invent a way of doing that that works before you could reasonably expect people to start building frameworks with it.
For the same reasons that PrimeFaces has PrimeNg (Angular), PrimeReact, and PrimeVue.
Given the way all the different stuff works together, that's the way it has to be done.
I'm still amazed they're asking for $299 for this!
Prime is MIT licensed. "Here, clone our repo on GitHub and do whatever you want!". Professional support is paid.
It looks good, it works, and no, I don't work for them. But $299 for this Tailwind thing seems rather crazy in comparison.
There is also PrimeFlex, which lets you do stuff like:
<div class="shadow-3 m-3 surface-card text-center p-3 border-round-sm h-6rem w-9rem flex align-items-center justify-content-center font-semibold">shadow-3</div>
Which of course looks a lot like working with Tailwind.
Because building things costs money
I already addressed this in my post.
PrimeTek's web component libraries are MIT licensed. They seem to still be going strong after 15 years.
This, apparently, is quite doable.
Others don't want to do that.
That’s like the cost of 1 front end developer day, and you get so many useful components + future updates.
If you see it as a business expense it’s great value.
Also tailwind UI doesn't come with figma designs, whereas all the other free ones do.
You're just paying a brand tax here.
In that case I'm also paying for continued development by the tailwind team, unlike the free offerings. I don't mind that free toolkits use tailwind, that's the beauty of the MIT license, but I do value paying something to the creators to ensure continued development. Especially if my business makes enough money from it.
NB. I've paid for both tailwind UI and PrimeBlocks.
They do. As part of the original TailwindUI product you get UI component templates where you can choose between React, Vue or plain HTML (= framework agnostic!) versions of the source.
However the React version is essentially a big monolithic template, which is what they are trying to address with Catalyst, where those templates are being split up into components (+ other improvements).
https://daisyui.com/
A FOSS Tailwind component library
https://www.skeleton.dev
> instead of writing 100 class names, use semantic class names
?!?
That defeats the whole purpose of Tailwind, which is not writing any semantic class name. I don't get it.
These are used by "agencies".
Shadcn, radix, and tailwind are all FOSS so they are not “high-priced”.
Your analysis is shallow and unfounded.
Nope. Tailwind has good support for styling the active state, in the way that you'd expect if you've used Tailwind: e.g., `bg-red-500 hover:bg-red-600 active:bg-red-700`.
https://tailwindcss.com/docs/hover-focus-and-other-states
Is this recent?
Oh my word, the horror! What's wrong with agencies?
I was _about_ to praise it for at least being tabbable, but the example of "Team members" does not work with keyboard-only navigation... great stuff.
Now something you can definitely complain about is the dialog not submitting with Enter.
Weird unproductive comment tbh.
This UI library sped up my dev time at least two-fold. The components and sample landing pages provided are really great IMO (and judging by their sales, it's not just me who agrees).
the comment seems more about how lousy the product it is, and sure I wouldn't want to spend my time making a lousy product, but if in my technical evaluation something sucks then there is generally a good chance that I can build something better.
So the comparison is between using money to buy something bad or using time to build something good and the phrasing would be something like:
You are welcome to use your time to build something that doesn't have all these problems.
I’ve shipped products with this kit without having to change much code because it’s very well-made.
Don’t take it from me - take it from the tens of thousands of devs who also use it.
The commenter above didn’t even look deeply into the actual offering. Catalyst is just one tiny (new) subset of the large number of things offered by the entire package.
“It is difficult to get a man to understand something, when his salary depends on his not understanding it.” ― Upton Sinclair, I, Candidate for Governor
https://www.goodreads.com/quotes/21810-it-is-difficult-to-ge...
> Built by experts — you can trust that all of the code is written following Tailwind CSS best practices, because it’s written by the same team who created and maintain the framework.
It's one of many templates that they sell: https://tailwindui.com/templates
Tailwind (and similar, I tend to use https://unocss.dev/) is not good for your frontend architecture BUT they allow you to be so fast, that it negates the benefits.
For a job well done, I'd follow the principles of https://maintainablecss.com/ For throwaway code I need to cram out as fast as I can, Tailwind it is.
I understand agencies using Tailwind, or Bootstrap, their revenue depends on it.
What's the definition of a job well done? In my eyes it's completing the project and getting it out the door to customers to use. If Tailwind makes that happen, then isn't it a job well done?
In 10 years time I've used a decent share of templates, but these I've enjoyed most by far and gotten the best user reactions from.
But yeah, it is clearly not yet finished, the dark mode has a too low color ratio. Good thing is that this UI library comes bundled with the previously existing Tailwind UI.
It's definitely worth the one-off price tag, and the fact they include future updates (like Catalyst) is incredible.
Perl in all its glory and horror.
Partially due to these and frustrated by lack of component libraries in Rails, I built and recently released a UI kit for Rails - https://zestui.com
Built with Phlex, styled with Tailwind with custom built Stimulus controllers.
It's got
- 25 themes
- Dark Mode
- Form Builder
- Icons
- Built in Flash Toast
- The components are responsive or have specific mobile views
- All the JS needed (Stimulus controllers) is wired up automatically
Phlex is a game changer. It is simple, powerful, intuitive and performant. I will never ever write a component as a partial/ViewComponent again.
A short video (50 seconds) showing it off: https://youtu.be/OQmDZddLtR8
It'd be nice if clicking the blurred background area on a Sheet closed the sheet like the x button does.
You can see this for yourself by using a heat-map of your users mouse movement and positioning. Note how many try to close with clicking the background.
Vue and Svelte are great but adopting them means that you are using Rails as just a backend. For the vast majority of apps, the Rails default stack works really well.
What do you mean?
https://news.ycombinator.com/item?id=34366454