Tailwind is fantastic. Everyone goes through the initial shock of complaining about the "ugly markup", the violation of separation of concerns, etc. But I've worked in enough large codebases to tell you that the ones that use Tailwind have a more consistent UI, with much less handwritten CSS. Bootstrap sites inevitably devolve into a soup of custom CSS and Bootstrap framework. You end up with lots of verbose class declarations like "btn btn-link btn-primary btn-xs danger", but you still need lots of little `margin-left: 3px` rules to push and pull things into place. Most other CSS libraries suffer the same fate.<p>On the other side of things, sites without a framework generally opt for a convention like "BEM" (block-element-modifier). BEM seems to be the worst of both worlds, both abandoning the "cascading" part of "Cascading Style Sheets" and still requiring verbose class names!<p>I've been working on a Tailwind project for the last six months with a team of around 8 people. We did a bunch of initial work getting the Tailwind config just right and some base styling in place, but since then we've barely written a line of CSS. Yes, the templates are verbose, but they are also incredibly readable and easy to reason about what classes are doing what. On-ramping new people has been easy as well, since they don't have to learn some custom system, instead they can just read the docs on the Tailwind site.
Tailwind has been great and I've been looking forward to this for months. I fought Tailwind as a concept pretty hard at first, but after hearing Adam and a few others raving about it I gave it a shot. It takes some getting used to at first but I can't imagine developing without it anymore.<p>To me, the biggest benefit of Tailwind and utility classes in general is that it removes the cognitive overheard of having to think of class names while designing a new page.<p>For example, if I'm working on a card and I want some text below the main text to have a smaller, gray font size. What do I name that class? "card-sub-text", "card-sub-title"? No - don't even worry about it - "text-sm text-gray-700" and move on.<p>Later on, if I end up repeating that combination in a number of places, I have more context of what that class name really should be, and I can extract the utility classes to a specific class name.<p>Really powerful stuff that has helped to increase my velocity quite a bit.
I've been following this closely. Given the preview with some components listed it seems exceptionally well made: <a href="https://tailwindui.com/components" rel="nofollow">https://tailwindui.com/components</a><p>There are also live demos of the app and marketing pages:<p>1. <a href="https://tailwindui.com/page-examples/landing-page-01" rel="nofollow">https://tailwindui.com/page-examples/landing-page-01</a><p>2. <a href="https://tailwindui.com/page-examples/detail-view-01#" rel="nofollow">https://tailwindui.com/page-examples/detail-view-01#</a><p>Plus a screencast on how to use it to build these pages:
<a href="https://vimeo.com/393580241/82c6d7c5f6" rel="nofollow">https://vimeo.com/393580241/82c6d7c5f6</a>
When I first learned about Tailwind I though "wow this is amazing!", but it quickly became obvious I was more or less learning another "language", which I really didn't need when re-entering the crazy world of frontend.<p>I might reconsider it again once I am more comfortable with what frontend has become, but that is still quite a bit away.
It's really nice, but is there something this pretty for bootstrap?<p>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).<p>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.
The problem with this IMO is that some enterprising person will just use regular tailwind (or another utility-css framework like tachyons) and re-implement all of these components and give it out for free, circumventing the license and killing the value of this.<p>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.<p>I think what they should do is build a tool that let's you build your entire site using these components and charge for <i>that</i>. 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.<p>---<p>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.<p>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.<p>1 - <a href="https://themes.getbootstrap.com/preview/?theme_id=4231" rel="nofollow">https://themes.getbootstrap.com/preview/?theme_id=4231</a>
On the surface, the markup is pretty damn awful. But if you reach certain level of proficiency, this will definitely speed up development.<p><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"><p>Personally I would prefer Bootstrap over this approach.
I'm really surprised at the negativity in these comments. I'm drooling over how good this looks and can't wait to use it in my projects. $249 is nothing for the craftsmanship you're getting (and future components!). I've been following this project for a while and have seen some of the live-coding sessions--a ton of work went into picking the correct styles and fine-tuning each component.
Looks sexy. But can someone ELI5 why I'd use Tailwind over e.g. a Bootstrap theme? Not trying to be snarky - genuinely trying to understand the advantages.
For anyone who hasn't tried tailwind I really suggest that you give it a shot. It's made me 2-5x more productive when styling something from scratch.
It's great there's yet another UI framework on its way. Choice is awesome.<p>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.<p>Whatever the case is, I'm glad there's a project that's useful and that helps authors finance their effort. Thumbs up!
Judging from all the positive comments in this thread, clearly I must be missing something. This looks horrible to me. Instead of meaningful CSS classes you just get a bunch of small classes that do very small things, which you're supposed to combine until it looks like what you want. How is that better than writing your CSS manually?<p>(Again, I realise the failure is probably on me. But I don't get it.)
Stealing these components would be a very shitty thing to do, but I'm wondering as to how the authors can protect their CSS library from piracy? (esp. considering the 249$ asking price). Legal action?<p>I'm considering open sourcing a software product I'm working on, but it could mean that I'll be bending over backwards to monetize it, as people can just run straight from source.
I don't see the point of Tailwind. Why not just write inline styles and get straight to making an manageable mess right from the start? No need for a framework to help you with that. Most developers will abuse Tailwind and created nonsensical class names like `font-size-20px` or `margin-left-15px` instead of kicking the naming can down the road (as others have pointed out).
Looks sexy but damn that's expensive. $250 for some pre-built styles I probably need to edit a lot anyway.<p>I rather use a free option like <a href="https://semantic-ui.com/" rel="nofollow">https://semantic-ui.com/</a> 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.
in my opinion tailwind really only works when used with a component based framework like Vue, React or ActionView::Component. the issue to me is that you have to add sooooooooo many classes to make a button look good that you get fatigued very quickly. when using a component based, you can build a button component and just reuse that.<p>this isn't an issue with something like bootstrap where a single class makes a button look pretty.
I read that Tailwind CSS is awesome, but not to be confused with how Bootstrap works, because Tailwind CSS is more low-level.<p>Does this mean, Tailwind UI is Tailwinds "answer" to that problem? Like, it's are direct Bootstrap competitor?
Its like George Costanza says about sex & parking.<p>Why should I pay for a Tailwind hero when, if I apply myself, I can get a Bootstrap hero for free?<p><a href="https://tailwindui.com/components/marketing/sections/heroes" rel="nofollow">https://tailwindui.com/components/marketing/sections/heroes</a>
<a href="https://getbootstrap.com/docs/4.4/components/jumbotron/" rel="nofollow">https://getbootstrap.com/docs/4.4/components/jumbotron/</a>
For everyone is who skeptical about utility-first "atomic" or "functional" CSS, and don't want to go through the hassle of getting Tailwind with necessary build steps set up, I'd recommend giving a smaller-scoped library such as Basscss a try. It's >3kb, you can include it using a CDN link, and it covers most of what you need to be productive.<p><a href="https://basscss.com/" rel="nofollow">https://basscss.com/</a>
to the team:<p><a href="https://tailwindui.com/components/application-ui/forms/input-groups" rel="nofollow">https://tailwindui.com/components/application-ui/forms/input...</a><p>the currency sign not matching the selected symbol is confusing
Recently used Tailwind for a quick and dirty MVP. It came out looking very polished (way more so than the cookie-cutter bootstrap look) and cut down the development time quite a bit allowing more time to focus on the important stuff on the backend. Worth giving it a try on a side project if you haven't.<p>Like you, I was put off by how crowded the HTML looked but got used to it and found it way quicker to update and kept the css file clean.
I really like Tailwind's approach in some cases, it does make prototyping extremely fast.<p>What I'm really missing (and I don't understand it doesn't exist) is a way to compose classes into a single class, to refactor collections of small utility classes into a meaningful class with semantic sense. Why can't I do something like:<p><pre><code> .my-class {
use .text-sm
use .text-gray
use .bold
}
</code></pre>
Kind of like calling several functions from a single function to compose their effects.<p>The only things that come to mind are SCSS mixins (but would have to declare the `text-gray` mixin AND the `text-gray` class, plus it doesn't with a lib like tailwind that provides classes), or CSS-in-JS trickery. Styled-component allows this sort of things, but it still doesn't feel very nice to use.<p>If I've missed something and this is actually possible, please somebody tell me!
I'm very excited by this!<p>I currently use <a href="https://materializecss.com/" rel="nofollow">https://materializecss.com/</a> over several products. It's been great, but I'm stuck on the 0.100.x line because the upgrade path was too difficult. It's also hasn't been updated since the first 1.0 release some time ago. Not complaining since I got what I paid for (it was free) but it's left me pretty anxious to find a replacement.<p>Salesforce's Lightning components are good but challenging to understand how to work with outside the walled garden. Zurb's Foundation UI is interesting but seems to want me to use whole page templates rather than components.<p>This looks like exactly what I've been dreaming of. I've put my money where my mouth is as I can't wait to have more components built out to a stage where I can start using it for real.
This is not a good idea.<p>1. Components are sort of antithetical to the Tailwind CSS ethos of atomic styling. Of course, examples of markup and class arrangements are certainly helpful, but at the end of the day you are still always going to have a unique markup in the end. And according to their license, those customized components are now under their Tailwind UI license.<p>2. What counts as a component? What if Tailwind UI produces a licensed component that is a single div with a single border class? Could it be that someone with no prior knowledge or access to this component have accidentally already created the same markup elsewhere? Would that be an infringement?<p>Frankly, I really enjoy using Tailwind CSS, but I'm a little nervous now to even use the original project in my work.
Sometimes I wonder why Open UI5 [1] is so little known within the front-end community. I mean, in a world where long term support for frameworks is rare, having a component library backed by a large company like SAP should be quite valuable.<p>[1] <a href="https://openui5.org/" rel="nofollow">https://openui5.org/</a><p>[2] Sample App: <a href="https://github.com/SAP-samples/openui5-sample-app" rel="nofollow">https://github.com/SAP-samples/openui5-sample-app</a><p>[3] Slider in the component library: <a href="https://openui5.hana.ondemand.com/entity/sap.m.Slider/sample/sap.m.sample.Slider" rel="nofollow">https://openui5.hana.ondemand.com/entity/sap.m.Slider/sample...</a>
To me this is solving Tailwind's biggest issue: consistency & context.<p>Comparing it to Bootstrap or Foundation adding the class `alert alert-danger` to a div tells my coworkers that it's an "alert" & it will look like an alert everywhere. If I want to change how alerts look, I change the CSS<p>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. I'd end up with different looking alerts, cards, buttons, etc all over my app
So Tailwind is basically a Bootstrap without the hard-coded default styles, and then you add the UI theme like this. Do you then just end up with a different looking Bootstrap, or it still has some other benefits?
UX designer here! Tailwind is great piece of work and I'd recommend it for validating MVPs and building new projects in general.<p>Reasons:<p>- Its constrains and whitespaces are well made, if kept untouched, the result may be good, even if build by dev with no design skills.<p>- Elements are containing what's necessary, but no more. No unnecessary tooltips etc.<p>- All elements have clear basic states (see <a href="https://tailwindui.com/components/application-ui/forms/input-groups" rel="nofollow">https://tailwindui.com/components/application-ui/forms/input...</a>)
I like the clean look but still all the web homology unite!
<a href="https://vimeo.com/393580241/82c6d7c5f6" rel="nofollow">https://vimeo.com/393580241/82c6d7c5f6</a>
I've been using Tailwind for a year, I love it. I do think the example markup is often way more verbose then it needs to be.<p>My biggest request would be, making the naming conventions match more closely to CSS property names and Bootstrap 4 names. Once a developer learned the system, if they knew CSS property names they could automatically guess the Tailwind class without looking at the docs. Matching Boostrap 4 whenever its convention, would make it that much easier to convert BS4 sites to Tailwind (and easier to adopt for BS devs). My 2 cents.<p>Excited for UI. Keep it comin!
First, I want this. TailwindCSS has great developer experience for me. I would pay for this even if I wouldn't use it, but I definitely will.<p>I like how they didn't limit too much what can you do with components in license, which is really good.<p>I generally am OK with this and want to see if I want to get just appUI or both sets. I think Adam should've joined them together and maybe given us some deal on pricing as early adopters. But, he is great guy, and this is excellent way to support him and project.
so the problem is that this is priced too high. Its not about free, but the real pricing market now is themeforest.<p>For example - <a href="http://landrick.react.themesbrand.com/" rel="nofollow">http://landrick.react.themesbrand.com/</a> is 17$.<p><a href="https://g-axon.com/wieldy-ant-design-react-redux-admin-template/" rel="nofollow">https://g-axon.com/wieldy-ant-design-react-redux-admin-templ...</a> is 24$ (which uses ant design)
I like the design, hate the implementation.<p>Really doesn't work with react.<p>react + styled components is god mode. This is a step down (aside from the design).<p>At the end of the day, CSS isn't that hard anymore.<p>Design it in figma. Put it into zeplin. Copy paste the styles into a styled-component. You're done.<p>tailwind is only a step up if you're a russian php developer who has been using bootstrap for the last 10 years.
I know this would be hard to pull off but I kind of wish we could see the small / medium / large views of each component as a preview.<p>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.
These UIs look great! Does anyone have any great resources, examples, where one could learn CSS/SCSS to create stuff like this. I know CSS/SCSS enough to edit existing codebases and tweek, but I would not be able to create these from scratch. I would love to improve my design skills.
Without commenting on Tailwind CSS itself, I think the value add here is with the very nice looking UI components designed by Steve Schoger.<p>I would like to see a React component version of this, ready to use with a CMS like <a href="https://webiny.com" rel="nofollow">https://webiny.com</a>
Great job, this looks awesome! I wish something polished like this was around when I started my stuff. I'm not sure how I feel about Tailwind being almost 1mb of CSS :D, but it's probably worth all the time you save, especially for apps the size isn't such a big deal.
Shouldn't there be a possibility for one class to extend other or to somehow include or merge classes, such that btn = rounded + shadow + p-4? This would allow you to use utility classes as building blocks for semantic ones.<p>(Disclaimer: I'm a backend dev and I don't know CSS well)
I am still not convinced to make the switch to Tailwind from MaterialUI. Looking at the source code of the examples, it looks like a huge block of code with a lot of duplicate text/class names.<p>The HTML-CSS "separation" question will never have a "right" answer...
I love Tailwind but hate having to deal with build tools and purgecss and package management and [insert modern workflow hassle] just for a little side project.<p>Is there anything similar to Tailwind that doesn't require any build process?
This does look very pretty. I want to use it. But is this just another template? What's to stop any site built on this from looking identical to other sites bootstrap style? What are the customization options on here?
I can totally see the value of Tailwind UI, and as an experienced user of UIKIT (<a href="https://www.getuikit.com" rel="nofollow">https://www.getuikit.com</a>), I don't see much difference, to be honest. Can someone please help me understand what is so good about Tailwind UI that UIKIT doesn't already?<p>UIKIT is super light weight and modular. I've developed extremely high converting landing pages with almost no JS at all using only components I needed. Can the same be done with Tailwind? And if yes, then what exactly is the appeal? Simply the difference in number of components?<p>I love the look and feel of Tailwind, but it just looks like another UI framework to me and I don't understand all the raving reviews here. If it's something obvious I'm missing, very happy to learn it and pick it up.<p>Thank you.
Please excuse the newbie questions but would I be able to use this in a WYSIWYG framework like Webflow or Weebly or Wordpress?<p>How about compatibility with React?<p>Or is this the land of "bare metal" HTML+JS+CSS?
Why is the license on another website... and a website built for collaboratively editing a document no less?<p>Best to set it in stone (by bringing it onto your own website) before you start selling.
Just give me an image or sketch plus color palette and I will vectorize everything in hand written HTML and SVG, use semantic element (avoid using div and span), make it "responsive" for different screen sizes... and I would pay good money for it. If you are a designer, dont sell the code.
This looks nice, but one question I have regarding licensing is that for the simpler and more "obvious" components, where's line between learning from their demo (when the code isn't locked behind a paywall) and having to purchase a license? Take "Wide Tables"[1] for example; I have built almost the exact same thing myself with Tailwind by learning from an (IIRC official) example before.<p>[1] <a href="https://tailwindui.com/components/application-ui/tables/wide" rel="nofollow">https://tailwindui.com/components/application-ui/tables/wide</a>