There are also live demos of the app and marketing pages:

1. https://tailwindui.com/page-examples/landing-page-01

2. https://tailwindui.com/page-examples/detail-view-01#

Plus a screencast on how to use it to build these pages: https://vimeo.com/393580241/82c6d7c5f6

plus javascripts

See how dumb that sounds?

Caveat: not a UI developer, I’ve mostly done backend work And DevOps for quite some time.

It's an interesting concept.

It’s way too much effort for me to want to mess with, and then you have to repeat the same things for every site you make.

Yes, you can check off on your list that you no longer have any .S files. But did you actually gain anything?

> Most C libraries do too much.

> They come with all sorts of predesigned components like functions and structs that might help you move quickly at first, but cause more pain than they cure when it comes time to make your program stand out with custom behavior.

> Tailwind C is different.

> Instead of opinionated predesigned components, Tailwind provides low-level utility macros that let you build completely custom functionality:

    void main() {
        BEGIN_TAILWINDC
        MOV(RAX, 4);
        MOV(RDI, 1);
        MOV(RSI, "Hello world!\n");
        MOV(RDX, 13);
        INTERRUPT(128);
        END_TAILWINDC
    }

Ooh, and then the creator of Tailwind C would start selling the Tailwind C Library, with like an implementation of memcpy that you just cut-and-paste into your program every time you need to copy memory.

The leap between vanilla css and tailwind is not large at all.

Assembly: raw html and css C: A framework like Tailwind Python: Components, like TaildwindUI or any of the React components I’ve seen

I think that’s not a bad analogy.

CSS frameworks are great because there is a flavor that should fit just about anyone.

The use case is for creating Template Components with something like React, Vue, Hugo, Razor or another component template framework. Tailwind offers a large list of customizable variables to use to help keep your CSS consistent. You're still pretty much writing CSS though, just with shortcuts. I consider it Emmet CSS + Variables. I also highly suggest using a plugin for your editor that offers hinting on all the crazy names no matter what CSS framework you use.

If you want a higher abstraction, Bootstrap or Foundation provide that. There is now also this Tailwind UI that you can purchase that would also provide that to some degree.

Whether building a regular website or a web-app I generally just use component names (like .card) the same way. I'm more of a fan of defined components with limited variations though than people being able to change anything with a lot of utility classes. Sort of like having a succinct API with a constrained depth. I see css as an api to the original designs and Tailwind introduces too much freedom for my comfort! I will endeavour to give it an honest trial though and maybe I will meet you somewhere in the middle.

"PHP is an awful language, superior developers write in Perl."

"Rails is bloated and slow, making it unfit for any real work."

"True developers don't rely on frameworks, writing all your own code is the only way to be performant."

If you wanna handicap yourself, be my guest.

I've written three or so projects in TailwindCSS, and it lets me create responsive designs quickly. It gives me a very sane set of defaults to build off of. And most importantly, it helps me get a product to production faster than writing raw CSS.

personally having written css since I was a teenager, my gut reaction is "eww", but if the team or stakeholders deem it to add value to a project and not affect productivity, sure why not?

I can not force myself to use something like this but I’ve been writing CSS for a long time.

I use BEM and predefined sets of colors and space values to ensure consistency and that’s efficient enough for me.

Why would you have shared in-house css and components? Just write vanilla css right?

Tailwind is that shared in-house css and components for people/team that don't have shared in-house css and components. If you can afford to build one, sure use that!

This is made for prototyping too, this is to get to the MVP quicker. Again, if you have a shared in-house css and components library that does the same, sure use that instead, it makes much more sense!

> Those were fine when I was a jr developer - not anymore

That's a scary sentence. Why do you believe it matter whether you are junior or not to use that library? A library is made to avoid doing twice the works. If you already did that work, you don't need that library, that's for sure, but it's totally unrelated to your level as a developer.

1. https://angry-hypatia-f1529a.netlify.com/

2. https://github.com/philippbosch/tailwind-ui-purge-css-exampl...

If even the creator of Tailwind doesn't use Tailwind properly, does anyone?

I'm not particularly against JavaScript, but I'm not willing to install and use npm and several hundred dependencies.

All documentation for purgecss always includes postcss and a gazillion other packages I have never heard of.

Maybe something in Go, as a single executable?

https://purgecss.com/CLI.html

Good luck being a employable lol

still in js, but very fast, ~10KB (min), 0 dependencies, and does not require npm [1]:

however, it expects properly formed html and css; the parsers are quite unforgiving.

(i'm the author)

[1] https://github.com/leeoniya/dropcss/tree/master/dist

You're going to rediscover all kinds of other cool cool stuff you forgot you could do whle wasting resources in the last decades. With everyone going with bloated mess and electron apps, it is a really amazing time to be building snappy softwares now. So, again, welcome.

(the arrogant tone of your message was really misplaced)

Please don't do that. You are using sarcasm to ridicule the guy you are responding to, and that's an unproductive way to argue.

It is also against HN comment guidelines (https://news.ycombinator.com/newsguidelines.html):

"Be kind. Don't be snarky. Comments should get more thoughtful and substantive, not less, as a topic gets more divisive. Have curious conversation; don't cross-examine.

...

Please respond to the strongest plausible interpretation of what someone says, not a weaker one that's easier to criticize. Assume good faith."

165KB is still a lot of pretty-making text. Attitudes like that are why "webapps" eat hundreds of megabytes of memory for tasks where low-tens would be more than enough, even allowing for some slopping programming and lots of abstractions. That 165KB hangs around in memory in probably more than one form, and becomes part of future layout decisions on the page, if they come up.

How do I interact with REPLs in real time without touching a physical machine?

But I think a lot of people wouldn't just replace the CSS framework, they'll rethink the whole UI and everything that goes with it with a big operation like that.

</sarcasm>

I literally manage something like 10 different products/websites. And the only way to stay sane and have some pace with features is to use bootstrap for all of them (we currently use bootstrap for maybe 5 of them, and the rest were inherited sites that we're migrating).

I love the look of this but don't have the time or the will to migrate all our sites to learn yet another CSS meta-language with its own sets of concepts and classes.

I've always liked the Bootstrap 4 CodeBase theme ($28): https://demo.pixelcave.com/codebase/be_pages_dashboard.php

It's not the same exact look of course, but it has dozens of pages, widgets and components that look clean. It's all well formed code too with ES6 JS, Webpack, etc..

I don't think the license is worded very well. If you read it as "end user" being a visitor of your site then pretty much every theme on themeforest would cost $999 but that's not the case.

I think what the license means is if you're bundling the theme in with a product you plan to sell and distribute then you need an extended license, unless it happens to be for freelance work in which case a regular ($28) license is fine (the "note to freelancers" clause handles that). If you have a free or paid SAAS app or something like then you can use a regular license too because you're not distributing the theme as a paid product.

I've talked to the author of the theme directly and mentioned using it for a course platform I'm building (end users of the site would be paying for individual courses). He didn't mention needing an extended license for that. He even went as far as giving me permission to release the course platform as open source with his theme included[0].

[0]: What I wrote isn't official for saying you can do the same. I recommend contacting the author directly if you have intent to do that.

https://github.com/tabler/tabler

abler is free and open-source HTML Dashboard UI Kit built on Bootstrap

[0] https://github.com/tabler/tabler

http://www.urbanui.com/majestic/template/index.html

http://www.templatewatch.com/kapella-free/template/pages/for...

I might reconsider it again once I am more comfortable with what frontend has become, but that is still quite a bit away.

A big part of Tailwind's value is that it provides a curated, well-documented subset of the most important CSS attributes. The utility classes are consistently and concisely named (unlike many native CSS properties, which grew organically).

You're totally right that it is yet another abstraction, and that can be tiring. Personally I found it to be well-designed and transparent enough to make it worthwhile.

I'm guessing most of the naysayers here work in the web applications world with component-based architectures, where the HTML/CSS is a small portion of the total time they spend coding, so they can't understand why someone would sacrifice readability, maintainability, and organization for speed on something that isn't a bottleneck for them. The thing is, it absolutely might be a bottleneck for agencies and other companies that need to build lots of custom sites.

And the argument is that this comes at the expense of maintainability.

It seems like if your project is not suited to a "website bashing" or prototyping approach long term, and you need semantic classes to allow for easy theming type use cases, it could be more trouble than it's worth?

Right now it's not possible to tell what would happen when any of these components were resized since it's just a static image as a preview but responsiveness is one of the most important things to see.

It seems they've only done it for the ones they are ok with making freely available.

But that still leaves a vast majority of the components (almost all of them) as static images at 1 specific screen size.

They should consider adding screenshots of each size, or a few second gif / video showing how it looks at various breakpoints. Otherwise potential buyers (like myself) have no idea what things look like at each size. I don't mind a premium price but I'm not going to blindly buy it without knowing what the components look like beforehand. What it looks like is the most important thing for a CSS theme.

I do think they have a fourteen day free trial, though.

Your question is intriguing to me because I come from web development long before the Bootstrap was available. Teams I worked on would frequently take custom designs and turn them into clickable HTML templates with all UI components before spending a lot of time with the site itself. Bootstrap took this a lot further, but also enables the early parts of design to be skipped. You then have your issue with the site looking like a Bootstrap site.

My personal opinion is that Tailwind along with this new offering enables a better way out of that situation. Bootstrap is still known to more people and has less of a learning curve which are important points for some.

So for a button, you might have a class='rounded shadow p-4', which becomes rounded corners, drop shadow and a padding of 1rem.

On the one hand, you have to do a lot more to code. Instead of just adding class .btn in Bootstrap you would need to add all those classes.

On the other hand, the styles are not all the same as everyone eles's, and you can have different styles for one element if needed. You can have a button that only shares some styles, or a theme that has a lot of complimentary styles.

A downside of utility classes, is that you don't have a base to work off, you have to know what classes would go on a button in order to quickly get something nice.

The solution to that is a numerous collection of Tailwind Components. Copy the styles as ou need, and modify as you need.

Until now, there was no official collection. Some of my favorite collections are at https://tailwindcss.com/components https://www.tailwindtoolbox.com https://tailwindcomponents.com https://www.creative-tim.com/learning-lab/tailwind-starter-k... Forms: https://tailwindcss-custom-forms.netlify.com

But now we have an official collection from the framework creators themselves. Use them as a base, but - by changing a class or two, easily modify them for your project.

Of course, in Bootstrap, you could always have written your own classes to overwrite Bootstraps. That can be much more complex, and usually you wind with side effects. In my experience, the more you deviate from the prebuilt styles in semantic libs such as BS, the more hair you lose.

Utility CSS allows you to change or customize far more flexible in a fast pace environment than Bootstrap.

If you prefer lighter CSS, Tachyons is another option which I found more easier to read even if I have a long classes.

By adding a simple utility, your css gets very short very quickly.

https://tailwindcss.com/course/optimizing-for-production/

The HTML-CSS "separation" question will never have a "right" answer...

(Again, I realise the failure is probably on me. But I don't get it.)

- The classes cover many common use-cases and, in some cases, present a simpler "API" than hand-rolled CSS would

- You can eyeball a HTML fragment and get a good idea of how the pieces fit together, compared to the normal approach of needing to work out what each individual class does, and then how they fit together. It's easy to remember what the Tailwind classes are doing.

- It's dumb, but the ability copy-and-paste entire HTML fragments from one place to another and have the styling "just work" is slightly mind-blowing

- Some CSS attributes work oddly depending on the order in which they are applied, or the order of the composition of classes that both attempt to apply the same attribute, and that problem goes away with Tailwind

There are other advantages, but these were all quite surprising to me, because my expectations of CSS have always been quite low.

Not really. styled-components makes this simple if you're using react.

Tailwind is essentially unusable without a build step. You can configure it to make composite classes for common styles (button, card, etc.), but if you buy into their philosophy you'll probably want a component-based design (web components, React, Vue, etc).

It's better than working with CSS manually because you work at a slightly higher level. If it was transformed into a css-like language I would prefer that. As a non-UI expert, I also enjoy having an enumerable limited set of sane choices for most properties.

With tailwindcss or tachyons you get some of the benefits of component frameworks without having to use component frameworks, because you can colocate html & "styles" in regular template based systems and scope sections on a page this way. Great DX if you need to render sections conditionally, e.g. for ab testing.

If you think in sections rather than individual components anyway, which tailwind kind of promotes by design, you don't gain that much with a component framework.

The actual CSS functions like an inverted triangle (see ITCSS) the utility classes access from the html, so you won't have any specificity issues because it's already sorted out by having the CSS in a fixed order.

Another advantage is portability of sections between modern frontend JS frameworks and template based systems, you can just copy and paste things around, which is harder if the information about the styles is separated from the html, and without a fixed inverted triangle like CSS structure.

Isn't a section just a case of a component?

Yeah, a section is a component, but in my book it also involves the visible page background where the element is located (you could override the page background with a section color), like a slice of the page.

https://tailwindcss.com/docs/utility-first

The core principle is that you wrap up all UI elements into components. Most frontend and backend/template frameworks allow you to do this. You then verbosely apply the Tailwind classnames to perform styling, staying out of custom .css files all together.

I was skeptical of Tailwind too until I actually tried it. It’s one of those things like JSX that defies received wisdom but in real use is very nice.

Do people really struggle with this?

    <div class="hero">
        <h1 class="hero-title">Heading</h1>
        <p class="hero-tagline">Tagline</p>
    </div>

> You need to go digging around in all your stylesheets to figure it out and in most cases actually load up the page and inspect it.

When are you changing CSS and not inspecting the page at the same time? You are going to have to check your work. This doesn't happen if you keep things tidy as you go along. Working in a large team and/or scrum is no excuse for checking-in poor code.

Generally what the code is doing should be fairly obvious and should not need comments. Comments should be reserved where things aren't obvious.

I don't think it is a good idea to create code where it isnt obvious what it does. CSS is relatively simple tbh things really shouldn't be complicated.

I've been building sites the way you suggest for 20 years. I also had a negative knee jerk reaction to tailwind. But I had enough of an open mind to try it and now I have no interesting in going back.

People say that. If you build stuff in components like you are supposed to you almost always have a server side component or component logic that you will have to name. So you are going to have to start naming things properly somewhere.

You are simply kicking the can down the road.

> I've been building sites the way you suggest for 20 years. I also had a negative knee jerk reaction to tailwind.

It isn't a negative kneejerk reaction. I've worked with sites where they have done similar things to tailwind and it is a nightmare to understand what is going on with the page.

> But I had enough of an open mind to try it and now I have no interesting in going back.

The markup is almost unreadable, it completely defeats the point of what CSS is supposed to do and it creates considerable mental overhead for someone who isn't familiar with it.

But I suppose I shouldn't really expect anything else from other web developers that over the last 20 odd years somehow manage to not understand the tech they are given.

And despite your crude last jibe at web developers attracted to Tailwind's model, most competent web developers will be able to quite easily pickup this very sane CSS utility framework :)

No my jibe was at web developers in general. CSS and HTML are quite simple really. If you actually keep things semantic and build your document properly with appropriate markup ... lo and behold things just work properly.

I can understand the divistush of the past when CSS 1 and 2 were quite limited. However today there is simply no excuse.

> most competent web developers will be able to quite easily pickup this very sane CSS utility framework :)

Sure I can read it. The problem is with things like this is that you are learning how to work with their model that basically doesn't work like CSS is supposed to work.

So you it essentially nullifies your existing skillset and forces you into using their framework. I bothered to actually learn CSS properly and understand the technology and then I have to work with something which basically throws that all out the window and forces me to work how they want me to build stuff. No thanks.

If you think that is a "sane" way of working, I really don't know what to say.

Sure, so you can do it once and use functional css to define the styles that go with that component right alongside the markup instead of having to maintain another css class name for that component in a separate file, mostly likely with arbitrary and inconsistent padding and margin and font-size values.

I am now a convert and although it's hard for me to articulate exactly where the magic lies, these are contributing factors:

- You can do the entire thing in HTML quickly, including media queries and pseudo-classes.

- The predefined sizes and other values are granular enough that you can do just about everything with them, but coarse enough that you often get it right in the first shot. In a sense, it's a little like going from drawing a chart on blank paper to grid paper.

- Tailwind intellisense in VSCode shows you the colors you likely need.

Each of these points are tiny and could easily be achieved in another way, but combined they have increased my personal joy in frontend development quite significantly.

Tachyons has truly taken a lot of the pain of writing web applications away for me. It looks kind of ugly in the beginning, but I can't imagine going back to writing oodles of CSS again. Haven't used Tailwind though.

I don't necessarily want to remember 30 different context-specific class names when adding a new link or button on a simple page if I know a bit of syntax I can get exactly what I want, when I want it.

Again, it's very much a project specific choice, but when you're playing and tweaking and having fun with a design (or simply, iterating on one element multiple times), it's a nice library.

That being said, I can imagine a point where once you're happy with a design, there'd be a push to refactor.

After watching a few of those I started thinking about how much faster it could be to use these utility classes instead of writing it by hand. Everywhere he adds a few quick classes I was thinking "here I'd be going back to the CSS, hunting for that class name, maybe duplicating it to create a unique variation... and it took him 7 seconds with a utility class. Hm."

Haven't gotten to try it on a project yet but it's on my list.

[0] https://tailwindcss.com/screencasts/

My take is that it's not. It's just a convenient shortcut for those who aren't well versed in CSS.

I see what kind of problem they're trying to solve, but I think it collapses under its own weight the same as complete, closed components do - just later into the project.

<div class="lg:flex lg:items-center lg:justify-between"> <div class="flex-1 min-w-0"> <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:leading-9 sm:truncate"> Back End Developer </h2> <div class="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap"> <div class="mt-2 flex items-center text-sm leading-5 text-gray-500 sm:mr-6">

Personally I would prefer Bootstrap over this approach.

It also makes responsive styling a lot easier in my experience.

I think this masks a lot of complexity that you have to manage when taking on this approach. And it's not because the approach is good or bad, more what it is or isn't suited for.

The example on the homepage is very slickly presented, but the end result markup is extremely verbose. If I have a Card component, I would like to update them all at once when needed which is what css classes are generally good for. I find BEM naming conventions much more friendly to come back to than markup full of miniature class names.

I will stick to BEM + colors and sizes maps because this feels almost like using the style tag on each element.

For non-css expert engineers writing spa components, tailwind can be useful.

I can also see that it’s not trivial to mix tailwindcss and scss processors so it’s a no for me.

It has the benefit to limit spacing and color sets to presets but I already do this in my BEM codebase.

Though, you can still use BEM with TailwindCSS through the @apply directive. Adam calls the directive a kind of "trick" to get more devs on board with utility-first but it does help a lot of you're used to reasoning about CSS with BEM.

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

Then you update the styles of the card again but the new styles clash with the ones in those tailwind classes and you end with broken styles in some elements.

Mixing components and utility classes is a recipe for future chaos.

edit: thinking more, you can override classes. So yeah, maybe utility/atomic classes are not as effective here.

Or, if it is a minor change, then conditionally include / exclude a small subset of tailwind classes.

The point is to not write your own CSS, you only use tailwind classes. In this way you can look at the template for each of your components and reason about / edit their style and layout easily.

Yes, you may have more than one card in your system, but in all likelihood you aren't repeating the HTML for that card more than once, rather you have it in a template of some kind which is called. So while you may have more than one card on your site, you probably don't have the template for it defined more than once. (at least ideally you don't)

For those cases where you do want to extract that code, Tailwind makes that easy to do.

Tailwind is a weird thing and like I said I really thought it was insane at first. But after rewriting a site in it in a few days I have to say it is better than the standard semantic CSS by a mile.

So you can move really fast and experiment when you need to, and then extract to something shared when you're ready to DRY it up.

button { @apply border bg-white; // ... }

So now it's the worst of both worlds: an abstraction layer and dirty code.

When you use inline styles for everything, you're making the initial development a little faster by making future maintenance and changes a lot harder. (Like, if you decide headings should be italic instead of bold, that's a one-liner fix if you're using CSS properly, but if you're using inline styles you have to individually fix every heading on every page.) So most people have internalized "don't use inline styles for everything" as a general rule.

But if you don't actually care about that sort of future maintenance (or you're charging hourly for it), then using inline styles for everything looks really attractive to you! But you can't literally use inline styles for everything because even non-experts know that using inline styles for everything is bad for future maintenance. So instead you pull in Tailwind so you can say you're using a CSS framework.

Once the components get too bloated, you start forking them, and you are back to each page looking subtly different.

You should have utilized a template engine in the first place. So you'd only have to change the layout/partial/component that is responsible for rendering the heading. Moreover, you could also have extracted the component with css by creating a .title class and using @apply.

Tailwind recommends PurgeCSS, but i'll plug my own lib here:

https://github.com/leeoniya/dropcss

i have a specific section on how to handle tailwind's unorthodox classnames:

https://github.com/leeoniya/dropcss#special--escaped-sequenc...

<div class="lg:flex lg:items-center lg:justify-between">`

Isn't this why we have CSS preprocessors? So we can do:

<div class="description-of-what-this-is">

.description-of-what-this-is { .lg_flex() .lg_items-center() .lg_justify_between(); }

Assuming there's enough complexity beneath the mixins to justify their use -- some of these might just be CSS properties.

What you find to be clean code might go the opposite way for someone (i.e. why would I use scss if utils are all I need?).

You might work with large scale apps where BEM may make more sense. You might work on a site builder where utils might be better. You might be creating splash pages for marketing purposes where going for element selectors may be enough.

// in JS, then build .btn-blue { @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; }

With Tailwind you'd have `bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative`. Then I'd have to change my HTML everywhere to update the appearance of alerts & its not always obvious that I'm looking at an alert in code.

Nope. Once you see same (sub)set of classes repeated, you would instead define .alert and .alert-danger using Tailwind's @apply directive, and you now have a single place to change how your `alert alert-danger` looks :)

<Alert type="danger"> Are you sure? </Alert>

Of course this solution would work in other templating engines as well.

The alternative would be extracting css components:

.alert { @apply px-4 py-3 ... }

.alert-danger { @apply bg-red-100 .. }

(Disclaimer: I'm a backend dev and I don't know CSS well)

[1] https://tailwindui.com/components/application-ui/tables/wide

https://tailwindui.com/components/application-ui/forms/input...

the currency sign not matching the selected symbol is confusing

For example - http://landrick.react.themesbrand.com/ is 17$.

https://g-axon.com/wieldy-ant-design-react-redux-admin-templ... is 24$ (which uses ant design)

I bought this the moment I got the email about it this morning because this is going to help my productivity in building web applications. When you use Tailwind, you aren't using a pre-made theme as you would with a bootstrap theme you buy, you are designing it from scratch.

With this UI kit you'll get some nice building blocks to become even more productive, but you'll still end up modifying stuff to make it yours.

I honestly think this is priced too high.

Not only that, but I think the pricing model is wrong; lifetime access for a one-time fee is a big mistake (and one I previously made with a startup).

As a developer, I understand that you need a predictable, repeatable income stream to keep going - and if I'm going to invest in something like this, I want it to keep going. I'd far prefer to pay something like $49/y instead of a one-time $249 fee.

Does this mean, Tailwind UI is Tailwinds "answer" to that problem? Like, it's are direct Bootstrap competitor?

I'm a frontend guy (among other things) and for past 2 years I've been using Nuxt (app server, node.js) and Vuetify (material UI framework for Vue.js). Given what kind of results that stack can (and does) achieve, I wonder if people in the same boat as me (using the same stack) would even attempt to use Tailwind CSS/UI.

Whatever the case is, I'm glad there's a project that's useful and that helps authors finance their effort. Thumbs up!

I rather use a free option like https://semantic-ui.com/ than pay that much. Maybe if you are company but it doesn't really work if you are a solo dev or using it for a side project.

Normally with themes it would be time prohibitive to do so, but the nature of utility-css is that it's relatively straightforward to implement each component, even without looking at the CSS that's obviously easy to inspect.

I think what they should do is build a tool that let's you build your entire site using these components and charge for that. Otherwise, I guarantee within a year of today, 2/26/20 there will be a free version of this on GitHub created by the community.

---

On a side note, if some bored person out there wants to make a huge splash in the CSS community, figuring out a way to target a specific DOM element, create the equivalent of an AST and specify a "dictionary", which would be a utility-css framework (tailwind, tachyons, basecss, etc) and finally reimplement the targeted DOM element in the chosen framework would be amazing.

Assuming you buy into utility-css, that would remove all existing friction in adopting it. Then that would mean you could grab an existing theme [1] and convert it to tailwind components as desired.

1 - https://themes.getbootstrap.com/preview/?theme_id=4231

Tachyons is licenced under MIT too.

There are tons that look visually appealing, but very few I've found that take a component-based approach (where they document each component individually - or think about how they interplay with each other). I've found the CSS is usually muddled, they often have legacy build pipelines that has to be rewritten to fit with Webpack, and a distinct lack of flexibility.

If Adam solves that side, Tailwind UI will be worth the money.

If it causes other theme providers to up their game, even better.

No because I believe that for every enterprising person wanting to circumvent paying for software, there are that many people who want to support the entrepreneurial spirit Adam and company show, and pay for good work. That's what capitalism is suppose to be about at least, anyways.

This is quite doable for us at Protoship (we've built both a design-to-Tailwind CSS+HTML converter as well as a webpage-to-Sketch Chrome extension). It is a very appealing idea - to be able to recast any webpage into a Utility CSS framework, but I'm curious to hear about situations where it would've been useful in commercial work.

Tailwind-UI looks very interesting and I would have no problem paying for it, rather than getting a "free" version, if only for the long-term sustainability. Community projects often go through endless rewrites, and suffer from feature creep and lack of direction.

In a business setting (I run a self-funded SaaS business) I am much more interested in a framework that fixes bugs and is stable.

The only thing that worries me is that the pricing is one-time rather than subscription. How can the authors expect long-term sustainability with a one-time payment? Maintaining a CSS library is a continuous effort, not a one-time thing.