24 ms·

Tailwind UI

974 points by alt3red 7y ago

juretriglav 7y ago
I've been following this closely. Given the preview with some components listed it seems exceptionally well made: https://tailwindui.com/components https://tailwindui.com/components There are also live demos of the app and marketing pages: 1. https://tailwindui.com/page-examples/landing-page-01 https://tailwindui.com/page-examples/landing-page-01 2. https://tailwindui.com/page-examples/detail-view-01# 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 https://vimeo.com/393580241/82c6d7c5f6
- hadrien01 7y ago
  How did you access the page examples? I can't find a link to them on their components page.
  - juretriglav 7y ago
    They were linked to in a message via their mailing list.
- rado 7y ago
  Looks good and polished, but that landing page requires 165 KB of CSS, gzipped. That's, to put it lightly, ridiculous.
  - deweller 7y ago
    For comparison, what is bootstrap v4's weight?
    - gyrgtyn 7y ago
      https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstra... is about 20K, gzipped plus javascripts
  - philippbosch 7y ago
    Yes, but that's just because I think for simplicity they created one large CSS file that is used for all their components and example pages. That's not very realistic. You're not supposed to do it like this for your own project. Instead if you use Tailwind CSS and PurgeCSS I'm pretty sure you would end up with ~10 or 15 kB of CSS gzipped, maybe less.
    - chrshawkes 7y ago
      I'm tired of excuses for inferior tooling. If you truly know CSS, Tailwind is a waste of time.
      - larrywright 7y ago
        If you truly know assembler, C/Python/Ruby/Go is a waste of time. See how dumb that sounds?
        chrshawkes 7y ago
        Disagree. Dumb is doing the same thing over and over again and creating new tooling to do the same thing over and over but with added dependencies and frameworks. The fundamentals of web development have barely changed but the flavor of the month way of doing the same thing is constant.
        larrywright 7y ago
        HTML and css are way too low level to be productive in, in my opinion. Especially when dealing with wide ranges of screen sizes, browsers, and platforms. The only way I’m interested in touching the stuff is if there are tools to alleviate the pain. Caveat: not a UI developer, I’ve mostly done backend work And DevOps for quite some time.
        wolco 7y ago
        HTML and CSS are too low level? Does such a tool like dreamweaver with response rendering exist? It's an interesting concept.
  - psychometry 7y ago
    I'm sure that in an actual project, you can use tree shaking or a custom build to avoid including components you don't need.
    - Tomte 7y ago
      Is there a production-ready CSS purger that's not written in JavaScript? Last time I looked I couldn't find any. 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?
      - philippbosch 7y ago
        I don't know a non-JS CSS purger, but you don't need postcss to use PurgeCSS. https://purgecss.com/CLI.html https://purgecss.com/CLI.html
      - phponpcp 7y ago
        "but I'm not willing to install and use npm and several hundred dependencies" Good luck being a employable lol
        Tomte 7y ago
        Fortunately, there are many IT jobs that don't include any web work.
      - leeoniya 7y ago
        https://github.com/leeoniya/dropcss https://github.com/leeoniya/dropcss 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 https://github.com/leeoniya/dropcss/tree/master/dist
        7y ago
  - jacobsenscott 7y ago
    Congratulations on building your time machine. And welcome to 2020. 165kb is nothing these days and only takes a fraction of a second to download and processes even on a slow computer. You're going to find all kinds of other cool cool stuff you didn't have in the 90's. Did you know you can build and deploy an entire application without ever running a compiler or touching a physical machine now? We have REPLs were you can interact with your application live, in real time. It is a really amazing time to be building software now. So, again, welcome.
    - nolok 7y ago
      Congratulations on leaving your bubble. And welcome to the developping world. 165kb is a pain in the ass over 3G, and when people buy loads for them sim card giving them a data amount still measured in megabytes, it matters a lot, even the big ones like facebook had to make lite versions because of it. 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)
    - iSnow 7y ago
      >Congratulations on building your time machine. And welcome to 2020. 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 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."
    - karatestomp 7y ago
      REPLs are not new. At all. 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.
- psychometry 7y ago
  All of these new frameworks look great, but there just isn't a good way to switch from, e.g., Bootstrap to a new one. I've never come across a framework that had any kind of conversion tool or even a guide on how to efficiently switch.
  - jmcharnes 7y ago
    Jason McCreary from Laravel Shift made a tool called Tailwind Converter which will convert Bootstrap code to TailwindCSS. It's pretty wild. https://laravelshift.com/convert-bootstrap-to-tailwind-css https://laravelshift.com/convert-bootstrap-to-tailwind-css
    - wolco 7y ago
      It converts the css but keeps the markup.
  - Cthulhu_ 7y ago
    Right now I don't think CSS frameworks are intended to be a drop-in replacement; each one will also introduce a subtle change in style that you have to work with. In theory you can rebuild your application reusing functional components and only replacing visual ones, but it's still going to be a lot of work. 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.
- 6510 7y ago
  <p class="piew1 piew2 piew3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita voluptas culpa sapiente alias molestiae. Numquam corrupti in laborum sed rerum et corporis. Nemo expedita voluptas culpa sapiente alias molestiae" id="Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita voluptas culpa sapiente alias molestiae. Numquam corrupti in laborum sed rerum et corporis. Nemo expedita voluptas culpa sapiente alias molestiae"> </sarcasm>
- tpetry 7y ago
  Do these stylistic simple preview images have a name? I have been searching for these for a long time to use in my application without designing them all by my own. A free-to use pack of these would be really great.
  - swanson 7y ago
    "Product Illustration" is what Steve (the designer) calls them. See: https://www.youtube.com/watch?v=1HDR-AV4ODU https://www.youtube.com/watch?v=1HDR-AV4ODU for a livestream of how he makes them
atonse 7y ago
It's really nice, but is there something this pretty for bootstrap? 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.
- nickjj 7y ago
  > It's really nice, but is there something this pretty for bootstrap? I've always liked the Bootstrap 4 CodeBase theme ($28): https://demo.pixelcave.com/codebase/be_pages_dashboard.php 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..
  - ahpearce 7y ago
    Wow, that one is pretty nice... Do you have any experience plugging this into, say, a react app? Fairly simple?
    - nickjj 7y ago
      I haven't tried it with a React app but I have used the theme for one of my projects that's using SCSS, Webpack and ES6 JS. The docs are really good and everything is segmented nicely. It shouldn't be bad to get it set up with React.
  - matthijs_ 7y ago
    Take a look at the extended license, which you'll be needing in many cases. $999 vs $28, for a single site license. No thank you.
    - nickjj 7y ago
      > Take a look at the extended license, which you'll be needing in many cases. $999 vs $28, for a single site license. No thank you. 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.
32gbsd 7y ago
I like the clean look but still all the web homology unite! https://vimeo.com/393580241/82c6d7c5f6 https://vimeo.com/393580241/82c6d7c5f6
XCSme 7y ago
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. The HTML-CSS "separation" question will never have a "right" answer...
joaodlf 7y ago
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. I might reconsider it again once I am more comfortable with what frontend has become, but that is still quite a bit away.
- hising 7y ago
  I was experiencing the same thing. I thought it looked really well crafted, but bumped into the same finding as you. Components built on top of it would be great though!
- ripley12 7y ago
  I had a different experience – Tailwind made CSS a lot more approachable for me. 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.
  - lsinger 7y ago
    The documentation alone is great — it helped me learn things about CSS I had been kind of using but had never fully grasped.
    - rawfan 7y ago
      100% agree. I learned more about CSS in the Tailwind docs than in all the years I copy and pasted before starting with Tailwind.
- koboll 7y ago
  Tailwind's draw seems to be in its name -- it helps you work faster. So for people whose bottleneck is writing lots and lots of HTML/CSS, it's probably great. 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.
nickjj 7y ago
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. 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.
- iudqnolq 7y ago
  They've implemented that, and have size sliders for some of the components. I presume the others are images so it's harder to steal the styling.
  - nickjj 7y ago
    > They've implemented that, and have size sliders for some of the components. 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.
    - iudqnolq 7y ago
      I would like that. Personally I bookmarked this to come back to because so many of the components are listed as not yet implemented. I do think they have a fourteen day free trial, though.
KaoruAoiShiho 7y ago
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?
- zerkten 7y ago
  There seem to be relatively few themes out there, but it seems the intent of Tailwind is that you are building a custom design. There is no reason these themes couldn't exist, but you'd also want custom some components to completely break away from the behavior of the ones supplied. 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.
habosa 7y ago
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.
- ronyfadel 7y ago
  Have you used Bulma? Wondering how it compares to it. It's tiring to learn yet another CSS library.
- rajasimon 7y ago
  Bulma user here. I tried tailwind but it never works for me but the Bulma another hand it works perfectly well.
  - middleclick 7y ago
    I finished my frontend work in two days with Bulma. This is someone who had zero experience with front-end development.
    - nojvek 7y ago
      Agreed. Bulma is definitely more readable and easier to get your head around.
kareemm 7y ago
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.
- sam_goody 7y ago
  The idea of utility CSS is that you have to set every single style yourself. 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://tailwindcss.com/components https://www.tailwindtoolbox.com https://www.tailwindtoolbox.com https://tailwindcomponents.com https://tailwindcomponents.com https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/presentation https://www.creative-tim.com/learning-lab/tailwind-starter-k... Forms: https://tailwindcss-custom-forms.netlify.com 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.
- todotask 7y ago
  In addition to the other commenter, if you become more experience, you could roll your own Grid, Flexbox and some utility (like Tachyons CSS) styles. 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.
benbristow 7y ago
Looks nice but sod paying $250 for some HTML & CSS.
- zerkten 7y ago
  You are clearly not their market, but there is a big market for this. That price is inexpensive when you look at the time and effort involved of building the same components from scratch, even though Tailwind is a pretty productive tool once you know it.
  - tjholowaychuk 7y ago
    Yeah $250 is nothing if you're building a real product, fuck these cheap developers.
- WillPostForFood 7y ago
  I'll pay you $300 to rewrite and clean up the HTML & CSS for my site.
tjholowaychuk 7y ago
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.
- hi_im_miles 7y ago
  Tailwind is often paired with another build tool called PurgeCSS which eliminates any unused classes.
  - zerkten 7y ago
    This was covered early in the tutorial I followed last summer. As someone who likes good web perf and remembers when sites were much slimmer on the frontend, I was very pleasantly surprised with the results I got.
- dceddia 7y ago
  In practice, Tailwind is used with a build step and one of the steps is to run the final CSS through PurgeCSS to drastically reduce the size. Search in the comments here for PurgeCSS - someone had a similar worry and I think they got it down from 1mb to 3.4k or something.
- desireco42 7y ago
  I don't understand why would someone downvote completely reasonable post, but this HN, all kind of s*it happens here. By adding a simple utility, your css gets very short very quickly. https://tailwindcss.com/course/optimizing-for-production/ https://tailwindcss.com/course/optimizing-for-production/
efdee 7y ago
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? (Again, I realise the failure is probably on me. But I don't get it.)
- yroc92 7y ago
  I’m with you there. It looks nice, but I don’t want to learn all that css.
- rjknight 7y ago
  There are some nice aspects: - 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.
  - hackerman555 7y ago
    > 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 Not really. styled-components makes this simple if you're using react.
- iudqnolq 7y ago
  Their argument is that the idea of separating content from presentation was always a lie, and that your JS, CSS, and HTML code is always intertwined. I've found this to be partly true for web apps. 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.
mike1o1 7y ago
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. 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. 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. 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. Really powerful stuff that has helped to increase my velocity quite a bit.
- arcatek 7y ago
  Disclaimer: I haven't used Tailwind. Maybe I'm missing something. > 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. What's the difference with "color: gray; font-weight: 700"? In this case I really don't have to care about the property order, whereas in your case I would guess you still have the cognitive overhead requiring you to know that "gray" comes before "700" (unless it's expected to be preprocessed away? what if I use text-700-gray?).
  - mike1o1 7y ago
    "text-sm" is just font-size and text-gray is a color code, so the order of the classes doesn't matter either. The biggest benefit of this over inline styles is that if I decide to change the color of "gray-700", since those colors come from a configuration, I only need to change it in my configuration. It takes some getting used to of the rules, but after a day or two I don't even need to think about what the class names are.
    - 7y ago
pcurve 7y ago
On the surface, the markup is pretty damn awful. But if you reach certain level of proficiency, this will definitely speed up development. <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.
- rjknight 7y ago
  I find that the verbosity is annoying at first, but it makes it incredibly easy to come back to some old HTML and work out exactly what it's doing, and why. Even with Bootstrap, you need to maintain a mental model of what the classes are doing and how they compose, and each custom class adds more complexity to that mental model. Yes, Tailwind has lots of classes, but each class does one thing, so reasoning about the final composition is incredibly easy.
  - cageface 7y ago
    This exactly. With more traditional approaches it can be very difficult to find exactly what css rules are affecting what elements. Tailwind is more verbose but also requires a lot less context to understand what’s going on. It also makes responsive styling a lot easier in my experience.
  - have_faith 7y ago
    > Tailwind has lots of classes, but each class does one thing 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.
agluszak 7y ago
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. (Disclaimer: I'm a backend dev and I don't know CSS well)
- iovrthoughtthis 7y ago
  There is. You can create new component classes that inherit from the base classes.
- keb_ 7y ago
  Yes, this is possible using the `@apply` directive: https://tailwindcss.com/docs/utility-first#maintainability-concerns https://tailwindcss.com/docs/utility-first#maintainability-c...
- betenoire 7y ago
  IMO, as soon as you do this, you may as well use some other framework. You can no longer reason atomically about the class names when you are using @apply.
- dceddia 7y ago
  Yep, Tailwind offers the ability to create "components" that are pretty much rolled-up sets of classes like that.
oefrha 7y ago
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. [1] https://tailwindui.com/components/application-ui/tables/wide https://tailwindui.com/components/application-ui/tables/wide
agumonkey 7y ago
to the team: https://tailwindui.com/components/application-ui/forms/input-groups https://tailwindui.com/components/application-ui/forms/input... the currency sign not matching the selected symbol is confusing
sandGorgon 7y ago
so the problem is that this is priced too high. Its not about free, but the real pricing market now is themeforest. For example - http://landrick.react.themesbrand.com/ http://landrick.react.themesbrand.com/ is 17$. https://g-axon.com/wieldy-ant-design-react-redux-admin-template/ https://g-axon.com/wieldy-ant-design-react-redux-admin-templ... is 24$ (which uses ant design)
- dinkleberg 7y ago
  Tailwind UI is not a theme, it's a component library. The target audience is different. 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.
  - httgp 7y ago
    Spot on; you get a design system from day 1!
  - sandGorgon 7y ago
    Not to be an ass, but so is Ant design or Semantic UI. I honestly think this is priced too high.
    - rawfan 7y ago
      Compared to what? If you look at any agency license (use on as many sites as you want) for themeforest WordPress themes, they are about the same price, if not higher. I guarantee you, they‘ll make a million bucks on launch day!
      - sandGorgon 7y ago
        That's a great point actually. It would be nice to have a single use license. Not all of us are building many sites in our day jobs.
k__ 7y ago
I read that Tailwind CSS is awesome, but not to be confused with how Bootstrap works, because Tailwind CSS is more low-level. Does this mean, Tailwind UI is Tailwinds "answer" to that problem? Like, it's are direct Bootstrap competitor?
- dannytatom 7y ago
  I don't think it's really in competition for Bootstrap. Bootstrap is a set of common components and a grid system. Tailwind is a set of utility classes to build your own components.
jstewartmobile 7y ago
How many hundreds of megabytes for basic UI elements? I say this not an attack on Tailwind, but as an attack on web "standards."
fraktl 7y ago
It's great there's yet another UI framework on its way. Choice is awesome. 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!
ecmascript 7y ago
Looks sexy but damn that's expensive. $250 for some pre-built styles I probably need to edit a lot anyway. I rather use a free option like https://semantic-ui.com/ 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.
- dmitriid 7y ago
  Try creating a similar set of components. Time yourself. Multiply with your hourly rate.
  - opportune 7y ago
    Not sure why you’re getting downvoted. I’m a developer but I don’t do much frontend stuff. I would absolutely look into something like this if I wanted to set up a website quickly and wanted it to look good without spending too much time on it
- keithnz 7y ago
  More importantly, I think it should be open source so various people can help build up components that work well together.
newfeatureok 7y ago
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. 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 https://themes.getbootstrap.com/preview/?theme_id=4231
- iKlsR 7y ago
  See https://tailwind.build https://tailwind.build for something that already exists and knowing the community that surrounds this, he will more than make a good return off it so no worries there for the work that has gone into it. ie. https://adamwathan.me/the-book-launch-that-let-me-quit-my-job/ https://adamwathan.me/the-book-launch-that-let-me-quit-my-jo...
  - deleted 7y ago
    [deleted]
- tonyoaky 7y ago
  But isn't Tachyons already on github?
- mlcdf 7y ago
  TailwindCSS is licenced under MIT so I dont' see how creating and selling components created with it could be seen as "circumventing the license". Tachyons is licenced under MIT too.
keb_ 7y ago
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. https://basscss.com/ https://basscss.com/
- Agoreddah 7y ago
  Wow, just today I was creating css lib for my project with similar naming and behaviour rules. Thanks for showing it out, I will check (eventually create) sass version of it. In my personal opinion, for simple projects, this is all what developer needs. Intuitive, extensible, low dependency and fast.
  - keb_ 7y ago
    Yes, I agree. I use basscss for a ton of small projects, and my personal sites. It's so small, it's trivial to include even when I'm using larger frameworks like Bootstrap.
deleted 7y ago
[deleted]
SnowingXIV 7y ago
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. 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.
longtermd 7y ago
I didn't get the pricing. Is this one-time, monthly, or annual?
- httgp 7y ago
  It’s one-time and you get lifetime updates for the kits you buy.
desireco42 7y ago
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. I like how they didn't limit too much what can you do with components in license, which is really good. 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.
thrownaway954 7y ago
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. this isn't an issue with something like bootstrap where a single class makes a button look pretty.
- deltron3030 7y ago
  You can extract components: https://tailwindcss.com/docs/extracting-components/ https://tailwindcss.com/docs/extracting-components/ And you can store and access components as code snippets within your code editor (e.g. VSCode), that's how I'd store the bigger Tailwind UI components. When I need a component then I just use a shortcut and pick from a component menu.
  - thrownaway954 7y ago
    i think you're missing the point. extracting "component" as code snippets does nothing if one day your boss tells you to change all the size and colors of all the buttons. you still have to go through your entire site and make the changes manually at every instance... or have the foresight to have a class on every button that you can reference through pure css to make the change without breaking tailwind... but at that point, why would have use tailwind to begin with.
    - thrownaway954 7y ago
      well... looking at the @apply directive that they have, i think found the answer to this. i've been proven wrong: https://tailwindcss.com/course/composing-utilities-with-apply/#app https://tailwindcss.com/course/composing-utilities-with-appl...
      - thrownaway954 7y ago
        continuing to fall on my sword from yesterday... my god... i am impressed. i've been going through the screencasts they have and i think i'm going to ditch bootstrap and use tailwind for my next project. https://tailwindcss.com/screencasts/ https://tailwindcss.com/screencasts/
dylanhassinger 7y ago
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. 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. Excited for UI. Keep it comin!
deleted 7y ago
[deleted]
z3t4 7y ago
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.
ronyfadel 7y ago
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? 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.
- markdown 7y ago
  > 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 I used to sell GPL licensed Joomla extensions and themes. Short answer: you can't. Long answer: You just can't. People who're going to pirate your work aren't your customers and weren't going to pay anyway.
- aniforprez 7y ago
  In this case they're not even trying to stop piracy cause as with their book "Refactoring UI" none of this stuff is locked behind DRM. You can possibly copy all the HTML and spread it around if you have access but that would be scummy and it's great that the devs here trust the users to not help such an effort and have not added intrusive methods to protect this. The license is also very permissive. For what we potentially get as this is closer to full release, it's well worth the cost
  - nojvek 7y ago
    Oh. Refactoring UI is by the tailwind folks. Did not know. This gives me some extra confidence.
meerita 7y ago
I don't like the way they designed the inputs. Pure placeholder hint, no label. Will create a big accesibility and usability problem.
- tracerbulletx 7y ago
  They have labels on all their sample form components? https://tailwindui.com/components/application-ui/forms/input-groups https://tailwindui.com/components/application-ui/forms/input...
bensochar 7y ago
To me this is solving Tailwind's biggest issue: consistency & context. 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 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
- ahallock 7y ago
  Why not use view templates to capture these?
  - bensochar 7y ago
    For alerts a sharable template is doable. So maybe a bad example, LOL. But for buttons & heros not so much. I've worked with apps that have a "button" template. I find it overkill. For one project we have some components rendered both server-side & with Vue. Other cases I've had are sharing styles across multiple apps and pulling in markup from a 3rd party, like Stripe or a WYSIWYG. But you're right. Ideally this wouldn't be an issue w/ view templates.
    - ahallock 7y ago
      I agree; for smaller components like labels and buttons, having some compound rules would help. They tend to be well-defined. I believe you can create composite styles in Tailwind.
bensochar 7y ago
Its like George Costanza says about sex & parking. Why should I pay for a Tailwind hero when, if I apply myself, I can get a Bootstrap hero for free? https://tailwindui.com/components/marketing/sections/heroes https://tailwindui.com/components/marketing/sections/heroes https://getbootstrap.com/docs/4.4/components/jumbotron/ https://getbootstrap.com/docs/4.4/components/jumbotron/
- ahallock 7y ago
  For starters, it's a more modern approach and the designer behind it is amazing, so it looks much better than Bootstrap IMO. You also get all the other components they add in the future, whereas Bootstrap only has its core components.
arendtio 7y ago
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. [1] https://openui5.org/ https://openui5.org/ [2] Sample App: https://github.com/SAP-samples/openui5-sample-app https://github.com/SAP-samples/openui5-sample-app [3] Slider in the component library: https://openui5.hana.ondemand.com/entity/sap.m.Slider/sample/sap.m.sample.Slider https://openui5.hana.ondemand.com/entity/sap.m.Slider/sample...
- runako 7y ago
  Good gracious, you have to install a toolchain specific to the UI framework to see the sample app? I know I'm curmudgeonly about front-end toolchain bloat, but doesn't this seem excessive?
- hello_moto 7y ago
  1. is heavy (size) 2. is huge (libs) 3. was made by SAP for custom HANA apps with "normalized" widgets and skins, originally known as SAP UI5 4. MVC, Single-App, two-way data-binding, tutorials are hard to grasp, conventions that may not lend itself to front-end devs mindset. 5. naming convention is a mixed of Java and C++ (hungarian notation) instead of JavaScript Source: used SAP UI5 in the past. Nobody likes it.
ahallock 7y ago
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.
irrationalactor 7y ago
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. Is there anything similar to Tailwind that doesn't require any build process?
- AbdelilahLbardi 7y ago
  You still can use the external CDN link. But you won't be able to do a custom configuration file which is completely okay.
  - uyuioi 7y ago
    I don’t recommend people use the CDN, it unpacks with a huge payload.
jacobsenscott 7y ago
Remember when the OS provided the UI, and you could just focus on solving your users problems without thinking much about the UI. Those were the days.
misiti3780 7y ago
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.
- mkarnicki 7y ago
  While not CSS courses directly, these resources should help you address what you're looking for. Tailwind related playlists on Adam Wathan's YouTube: https://www.youtube.com/channel/UCy1H38XrN7hi7wHSClfXPqQ/playlists https://www.youtube.com/channel/UCy1H38XrN7hi7wHSClfXPqQ/pla... And this publication (by same authors as Tailwind UI, that is Adam and Steve) https://refactoringui.com/book/ https://refactoringui.com/book/ Enjoy!
  - misiti3780 7y ago
    thx
nojvek 7y ago
Do these come as custom element ? Just wanna abstract away and deal with higher level UI elems.
udeathstarck 7y ago
Remove
udeathstarck 7y ago
Remove all the things
markdown 7y ago
Why is the license on another website... and a website built for collaboratively editing a document no less? Best to set it in stone (by bringing it onto your own website) before you start selling.
kundiis 7y ago
how is this different than bootstrap?
uyuioi 7y ago
Getting tailwind to work properly with Vue CLI has been the bane of my existence.
- gbrits 7y ago
  How so? Haven't tried tailwind, but wanted to try it on a pretty decent-sized Vue-project
ivanhoe 7y ago
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?
williamdclt 7y ago
I really like Tailwind's approach in some cases, it does make prototyping extremely fast. 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: .my-class { use .text-sm use .text-gray use .bold } Kind of like calling several functions from a single function to compose their effects. 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. If I've missed something and this is actually possible, please somebody tell me!
- mike1o1 7y ago
  This already exists and it's great! https://tailwindcss.com/docs/extracting-components#extracting-css-components-with-apply https://tailwindcss.com/docs/extracting-components#extractin... .btn { @apply bg-blue-500 text-white py-2 px-4 rounded; }
- htunnicliff 7y ago
  If you take advantage of PostCSS or Tailwind's CLI, you can compose something like: .my-class { @apply text-sm; @apply text-gray; @apply font-bold; }
  - williamdclt 7y ago
    This is exactly what I want, down to the syntax!
- pdr2020 7y ago
  Other commenters have addressed ways to implement this. But ideally, instead of extracting that specific collection of classes out to a class, extract out the HTML fragment into it's own template (or into it's own React Component or insert framework component abstraction here). The cleaner separation now is: 1. classes represent some atomic unit that enforces (for that unit) some design system specification 2. html fragments represent a specific implementation composed of those atomic units
rsp1984 7y ago
Please excuse the newbie questions but would I be able to use this in a WYSIWYG framework like Webflow or Weebly or Wordpress? How about compatibility with React? Or is this the land of "bare metal" HTML+JS+CSS?
- marc_io 7y ago
  You can use it with WordPress for sure, as you have total control of the markup. But you can't use it directly with Webflow. I don't know about Weebly.
cc9one 7y ago
Just bought Tailwind. Where do I find my Tailwind plugin list?
luketheobscure 7y ago
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. 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! 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.
- CGamesPlay 7y ago
  I agree with you about Tailwind, but had to call you out on this: > BEM seems to be the worst of both worlds, both abandoning the "cascading" part of "Cascading Style Sheets" and still requiring verbose class names! BEM doesn't abandon the cascade (or really care about it). What BEM is actually pushing back on is rule specificity. For example: #navbar a { color: blue } /* Can't do this, it doesn't change my navbar-submenu colors */ .navbar-submenu { color: inherit } /* Have to do this as a workaround */ #navbar .navbar-submenu { color: inherit } And now I'm in an arms race with myself over rule specificity.
  - have_faith 7y ago
    I think BEM is often misunderstood, it's not immediately obvious to beginners why it's helpful. Specificity is one problem it helps solve as you mentioned but the biggest thing for me is it forces you to think about what an element is and who it belongs to. If someone writes '.nav a' they're saying "select all links inside of nav", but what they really wanted to say was "select all nav menu links, and nothing else", a class like '.nav__link' will never select other links that happen to be in the nav (CTA buttons, logo links, etc) and will survive markup restructuring, something like ".nav > ul > li > a' will not survive minor markup changes as it doesn't express what someone wanted to select in the first place. I think this way of thinking brings a lot of benefits that most CSS frameworks don't give.
neya 7y ago
I can totally see the value of Tailwind UI, and as an experienced user of UIKIT (https://www.getuikit.com https://www.getuikit.com), 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? 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? 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. Thank you.
winrid 7y ago
It looks really nice. Site is fast too. Good job.
davidbanham 7y ago
I'm very excited by this! I currently use https://materializecss.com/ https://materializecss.com/ 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. 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. 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.
dharma1 7y ago
Without commenting on Tailwind CSS itself, I think the value add here is with the very nice looking UI components designed by Steve Schoger. I would like to see a React component version of this, ready to use with a CMS like https://webiny.com https://webiny.com
arcosdev 7y ago
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).
darepublic 7y ago
I haven't tried this before but it reminds me of tachyons from what I'm reading in the comments
hirako2000 7y ago
I used tailwind, not for long, until I found basscss. It comes down to a css library being a utility that defines clean patterns for extension.
psoots 7y ago
This is not a good idea. 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. 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? Frankly, I really enjoy using Tailwind CSS, but I'm a little nervous now to even use the original project in my work.
aagha 7y ago
Wow. I just watched the video Adam put together of slamming a new front-end together and it's really impressive (and fast).
mirap 7y ago
UX designer here! Tailwind is great piece of work and I'd recommend it for validating MVPs and building new projects in general. Reasons: - Its constrains and whitespaces are well made, if kept untouched, the result may be good, even if build by dev with no design skills. - Elements are containing what's necessary, but no more. No unnecessary tooltips etc. - All elements have clear basic states (see https://tailwindui.com/components/application-ui/forms/input-groups https://tailwindui.com/components/application-ui/forms/input...)
hackerman555 7y ago
I like the design, hate the implementation. Really doesn't work with react. react + styled components is god mode. This is a step down (aside from the design). At the end of the day, CSS isn't that hard anymore. Design it in figma. Put it into zeplin. Copy paste the styles into a styled-component. You're done. tailwind is only a step up if you're a russian php developer who has been using bootstrap for the last 10 years.

974 points by alt3red 7y ago

I've been following this closely. Given the preview with some components listed it seems exceptionally well made: https://tailwindui.com/components https://tailwindui.com/components There are also live demos of the app and marketing pages: 1. https://tailwindui.com/page-examples/landing-page-01 https://tailwindui.com/page-examples/landing-page-01 2. https://tailwindui.com/page-examples/detail-view-01# 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 https://vimeo.com/393580241/82c6d7c5f6

hadrien01 7y ago
How did you access the page examples? I can't find a link to them on their components page.
- juretriglav 7y ago
  They were linked to in a message via their mailing list.
rado 7y ago
Looks good and polished, but that landing page requires 165 KB of CSS, gzipped. That's, to put it lightly, ridiculous.
- deweller 7y ago
  For comparison, what is bootstrap v4's weight?
  - gyrgtyn 7y ago
    https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstra... is about 20K, gzipped plus javascripts
- philippbosch 7y ago
  Yes, but that's just because I think for simplicity they created one large CSS file that is used for all their components and example pages. That's not very realistic. You're not supposed to do it like this for your own project. Instead if you use Tailwind CSS and PurgeCSS I'm pretty sure you would end up with ~10 or 15 kB of CSS gzipped, maybe less.
  - chrshawkes 7y ago
    I'm tired of excuses for inferior tooling. If you truly know CSS, Tailwind is a waste of time.
    - larrywright 7y ago
      If you truly know assembler, C/Python/Ruby/Go is a waste of time. See how dumb that sounds?
      - chrshawkes 7y ago
        Disagree. Dumb is doing the same thing over and over again and creating new tooling to do the same thing over and over but with added dependencies and frameworks. The fundamentals of web development have barely changed but the flavor of the month way of doing the same thing is constant.
        larrywright 7y ago
        HTML and css are way too low level to be productive in, in my opinion. Especially when dealing with wide ranges of screen sizes, browsers, and platforms. The only way I’m interested in touching the stuff is if there are tools to alleviate the pain. Caveat: not a UI developer, I’ve mostly done backend work And DevOps for quite some time.
        wolco 7y ago
        HTML and CSS are too low level? Does such a tool like dreamweaver with response rendering exist? It's an interesting concept.
- psychometry 7y ago
  I'm sure that in an actual project, you can use tree shaking or a custom build to avoid including components you don't need.
  - Tomte 7y ago
    Is there a production-ready CSS purger that's not written in JavaScript? Last time I looked I couldn't find any. 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?
    - philippbosch 7y ago
      I don't know a non-JS CSS purger, but you don't need postcss to use PurgeCSS. https://purgecss.com/CLI.html https://purgecss.com/CLI.html
    - phponpcp 7y ago
      "but I'm not willing to install and use npm and several hundred dependencies" Good luck being a employable lol
      - Tomte 7y ago
        Fortunately, there are many IT jobs that don't include any web work.
    - leeoniya 7y ago
      https://github.com/leeoniya/dropcss https://github.com/leeoniya/dropcss 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 https://github.com/leeoniya/dropcss/tree/master/dist
      - 7y ago
- jacobsenscott 7y ago
  Congratulations on building your time machine. And welcome to 2020. 165kb is nothing these days and only takes a fraction of a second to download and processes even on a slow computer. You're going to find all kinds of other cool cool stuff you didn't have in the 90's. Did you know you can build and deploy an entire application without ever running a compiler or touching a physical machine now? We have REPLs were you can interact with your application live, in real time. It is a really amazing time to be building software now. So, again, welcome.
  - nolok 7y ago
    Congratulations on leaving your bubble. And welcome to the developping world. 165kb is a pain in the ass over 3G, and when people buy loads for them sim card giving them a data amount still measured in megabytes, it matters a lot, even the big ones like facebook had to make lite versions because of it. 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)
  - iSnow 7y ago
    >Congratulations on building your time machine. And welcome to 2020. 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 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."
  - karatestomp 7y ago
    REPLs are not new. At all. 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.
psychometry 7y ago
All of these new frameworks look great, but there just isn't a good way to switch from, e.g., Bootstrap to a new one. I've never come across a framework that had any kind of conversion tool or even a guide on how to efficiently switch.
- jmcharnes 7y ago
  Jason McCreary from Laravel Shift made a tool called Tailwind Converter which will convert Bootstrap code to TailwindCSS. It's pretty wild. https://laravelshift.com/convert-bootstrap-to-tailwind-css https://laravelshift.com/convert-bootstrap-to-tailwind-css
  - wolco 7y ago
    It converts the css but keeps the markup.
- Cthulhu_ 7y ago
  Right now I don't think CSS frameworks are intended to be a drop-in replacement; each one will also introduce a subtle change in style that you have to work with. In theory you can rebuild your application reusing functional components and only replacing visual ones, but it's still going to be a lot of work. 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.
6510 7y ago
<p class="piew1 piew2 piew3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita voluptas culpa sapiente alias molestiae. Numquam corrupti in laborum sed rerum et corporis. Nemo expedita voluptas culpa sapiente alias molestiae" id="Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita voluptas culpa sapiente alias molestiae. Numquam corrupti in laborum sed rerum et corporis. Nemo expedita voluptas culpa sapiente alias molestiae"> </sarcasm>
tpetry 7y ago
Do these stylistic simple preview images have a name? I have been searching for these for a long time to use in my application without designing them all by my own. A free-to use pack of these would be really great.
- swanson 7y ago
  "Product Illustration" is what Steve (the designer) calls them. See: https://www.youtube.com/watch?v=1HDR-AV4ODU https://www.youtube.com/watch?v=1HDR-AV4ODU for a livestream of how he makes them

atonse 7y ago

It's really nice, but is there something this pretty for bootstrap? 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.

nickjj 7y ago
> It's really nice, but is there something this pretty for bootstrap? I've always liked the Bootstrap 4 CodeBase theme ($28): https://demo.pixelcave.com/codebase/be_pages_dashboard.php 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..
- ahpearce 7y ago
  Wow, that one is pretty nice... Do you have any experience plugging this into, say, a react app? Fairly simple?
  - nickjj 7y ago
    I haven't tried it with a React app but I have used the theme for one of my projects that's using SCSS, Webpack and ES6 JS. The docs are really good and everything is segmented nicely. It shouldn't be bad to get it set up with React.
- matthijs_ 7y ago
  Take a look at the extended license, which you'll be needing in many cases. $999 vs $28, for a single site license. No thank you.
  - nickjj 7y ago
    > Take a look at the extended license, which you'll be needing in many cases. $999 vs $28, for a single site license. No thank you. 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.

32gbsd 7y ago

I like the clean look but still all the web homology unite! https://vimeo.com/393580241/82c6d7c5f6 https://vimeo.com/393580241/82c6d7c5f6

XCSme 7y ago

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. The HTML-CSS "separation" question will never have a "right" answer...

joaodlf 7y ago

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. I might reconsider it again once I am more comfortable with what frontend has become, but that is still quite a bit away.

hising 7y ago
I was experiencing the same thing. I thought it looked really well crafted, but bumped into the same finding as you. Components built on top of it would be great though!
ripley12 7y ago
I had a different experience – Tailwind made CSS a lot more approachable for me. 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.
- lsinger 7y ago
  The documentation alone is great — it helped me learn things about CSS I had been kind of using but had never fully grasped.
  - rawfan 7y ago
    100% agree. I learned more about CSS in the Tailwind docs than in all the years I copy and pasted before starting with Tailwind.
koboll 7y ago
Tailwind's draw seems to be in its name -- it helps you work faster. So for people whose bottleneck is writing lots and lots of HTML/CSS, it's probably great. 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.

nickjj 7y ago

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. 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.

iudqnolq 7y ago
They've implemented that, and have size sliders for some of the components. I presume the others are images so it's harder to steal the styling.
- nickjj 7y ago
  > They've implemented that, and have size sliders for some of the components. 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.
  - iudqnolq 7y ago
    I would like that. Personally I bookmarked this to come back to because so many of the components are listed as not yet implemented. I do think they have a fourteen day free trial, though.

KaoruAoiShiho 7y ago

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?

zerkten 7y ago
There seem to be relatively few themes out there, but it seems the intent of Tailwind is that you are building a custom design. There is no reason these themes couldn't exist, but you'd also want custom some components to completely break away from the behavior of the ones supplied. 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.

habosa 7y ago

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.

ronyfadel 7y ago
Have you used Bulma? Wondering how it compares to it. It's tiring to learn yet another CSS library.
rajasimon 7y ago
Bulma user here. I tried tailwind but it never works for me but the Bulma another hand it works perfectly well.
- middleclick 7y ago
  I finished my frontend work in two days with Bulma. This is someone who had zero experience with front-end development.
  - nojvek 7y ago
    Agreed. Bulma is definitely more readable and easier to get your head around.

kareemm 7y ago

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.

sam_goody 7y ago
The idea of utility CSS is that you have to set every single style yourself. 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://tailwindcss.com/components https://www.tailwindtoolbox.com https://www.tailwindtoolbox.com https://tailwindcomponents.com https://tailwindcomponents.com https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/presentation https://www.creative-tim.com/learning-lab/tailwind-starter-k... Forms: https://tailwindcss-custom-forms.netlify.com 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.
todotask 7y ago
In addition to the other commenter, if you become more experience, you could roll your own Grid, Flexbox and some utility (like Tachyons CSS) styles. 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.

benbristow 7y ago

Looks nice but sod paying $250 for some HTML & CSS.

zerkten 7y ago
You are clearly not their market, but there is a big market for this. That price is inexpensive when you look at the time and effort involved of building the same components from scratch, even though Tailwind is a pretty productive tool once you know it.
- tjholowaychuk 7y ago
  Yeah $250 is nothing if you're building a real product, fuck these cheap developers.
WillPostForFood 7y ago
I'll pay you $300 to rewrite and clean up the HTML & CSS for my site.

tjholowaychuk 7y ago

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.

hi_im_miles 7y ago
Tailwind is often paired with another build tool called PurgeCSS which eliminates any unused classes.
- zerkten 7y ago
  This was covered early in the tutorial I followed last summer. As someone who likes good web perf and remembers when sites were much slimmer on the frontend, I was very pleasantly surprised with the results I got.
dceddia 7y ago
In practice, Tailwind is used with a build step and one of the steps is to run the final CSS through PurgeCSS to drastically reduce the size. Search in the comments here for PurgeCSS - someone had a similar worry and I think they got it down from 1mb to 3.4k or something.
desireco42 7y ago
I don't understand why would someone downvote completely reasonable post, but this HN, all kind of s*it happens here. By adding a simple utility, your css gets very short very quickly. https://tailwindcss.com/course/optimizing-for-production/ https://tailwindcss.com/course/optimizing-for-production/

efdee 7y ago

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? (Again, I realise the failure is probably on me. But I don't get it.)

yroc92 7y ago
I’m with you there. It looks nice, but I don’t want to learn all that css.
rjknight 7y ago
There are some nice aspects: - 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.
- hackerman555 7y ago
  > 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 Not really. styled-components makes this simple if you're using react.
iudqnolq 7y ago
Their argument is that the idea of separating content from presentation was always a lie, and that your JS, CSS, and HTML code is always intertwined. I've found this to be partly true for web apps. 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.

mike1o1 7y ago

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. 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. 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. 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. Really powerful stuff that has helped to increase my velocity quite a bit.

arcatek 7y ago
Disclaimer: I haven't used Tailwind. Maybe I'm missing something. > 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. What's the difference with "color: gray; font-weight: 700"? In this case I really don't have to care about the property order, whereas in your case I would guess you still have the cognitive overhead requiring you to know that "gray" comes before "700" (unless it's expected to be preprocessed away? what if I use text-700-gray?).
- mike1o1 7y ago
  "text-sm" is just font-size and text-gray is a color code, so the order of the classes doesn't matter either. The biggest benefit of this over inline styles is that if I decide to change the color of "gray-700", since those colors come from a configuration, I only need to change it in my configuration. It takes some getting used to of the rules, but after a day or two I don't even need to think about what the class names are.
  - 7y ago

pcurve 7y ago

On the surface, the markup is pretty damn awful. But if you reach certain level of proficiency, this will definitely speed up development. <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.

rjknight 7y ago
I find that the verbosity is annoying at first, but it makes it incredibly easy to come back to some old HTML and work out exactly what it's doing, and why. Even with Bootstrap, you need to maintain a mental model of what the classes are doing and how they compose, and each custom class adds more complexity to that mental model. Yes, Tailwind has lots of classes, but each class does one thing, so reasoning about the final composition is incredibly easy.
- cageface 7y ago
  This exactly. With more traditional approaches it can be very difficult to find exactly what css rules are affecting what elements. Tailwind is more verbose but also requires a lot less context to understand what’s going on. It also makes responsive styling a lot easier in my experience.
- have_faith 7y ago
  > Tailwind has lots of classes, but each class does one thing 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.

agluszak 7y ago

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. (Disclaimer: I'm a backend dev and I don't know CSS well)

iovrthoughtthis 7y ago
There is. You can create new component classes that inherit from the base classes.
keb_ 7y ago
Yes, this is possible using the `@apply` directive: https://tailwindcss.com/docs/utility-first#maintainability-concerns https://tailwindcss.com/docs/utility-first#maintainability-c...
betenoire 7y ago
IMO, as soon as you do this, you may as well use some other framework. You can no longer reason atomically about the class names when you are using @apply.
dceddia 7y ago
Yep, Tailwind offers the ability to create "components" that are pretty much rolled-up sets of classes like that.

oefrha 7y ago

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. [1] https://tailwindui.com/components/application-ui/tables/wide https://tailwindui.com/components/application-ui/tables/wide

agumonkey 7y ago

to the team: https://tailwindui.com/components/application-ui/forms/input-groups https://tailwindui.com/components/application-ui/forms/input... the currency sign not matching the selected symbol is confusing

sandGorgon 7y ago

so the problem is that this is priced too high. Its not about free, but the real pricing market now is themeforest. For example - http://landrick.react.themesbrand.com/ http://landrick.react.themesbrand.com/ is 17$. https://g-axon.com/wieldy-ant-design-react-redux-admin-template/ https://g-axon.com/wieldy-ant-design-react-redux-admin-templ... is 24$ (which uses ant design)

dinkleberg 7y ago
Tailwind UI is not a theme, it's a component library. The target audience is different. 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.
- httgp 7y ago
  Spot on; you get a design system from day 1!
- sandGorgon 7y ago
  Not to be an ass, but so is Ant design or Semantic UI. I honestly think this is priced too high.
  - rawfan 7y ago
    Compared to what? If you look at any agency license (use on as many sites as you want) for themeforest WordPress themes, they are about the same price, if not higher. I guarantee you, they‘ll make a million bucks on launch day!
    - sandGorgon 7y ago
      That's a great point actually. It would be nice to have a single use license. Not all of us are building many sites in our day jobs.

k__ 7y ago

I read that Tailwind CSS is awesome, but not to be confused with how Bootstrap works, because Tailwind CSS is more low-level. Does this mean, Tailwind UI is Tailwinds "answer" to that problem? Like, it's are direct Bootstrap competitor?

dannytatom 7y ago
I don't think it's really in competition for Bootstrap. Bootstrap is a set of common components and a grid system. Tailwind is a set of utility classes to build your own components.

jstewartmobile 7y ago

How many hundreds of megabytes for basic UI elements? I say this not an attack on Tailwind, but as an attack on web "standards."

fraktl 7y ago

It's great there's yet another UI framework on its way. Choice is awesome. 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!

ecmascript 7y ago

Looks sexy but damn that's expensive. $250 for some pre-built styles I probably need to edit a lot anyway. I rather use a free option like https://semantic-ui.com/ 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.

dmitriid 7y ago
Try creating a similar set of components. Time yourself. Multiply with your hourly rate.
- opportune 7y ago
  Not sure why you’re getting downvoted. I’m a developer but I don’t do much frontend stuff. I would absolutely look into something like this if I wanted to set up a website quickly and wanted it to look good without spending too much time on it
keithnz 7y ago
More importantly, I think it should be open source so various people can help build up components that work well together.

newfeatureok 7y ago

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. 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 https://themes.getbootstrap.com/preview/?theme_id=4231

iKlsR 7y ago
See https://tailwind.build https://tailwind.build for something that already exists and knowing the community that surrounds this, he will more than make a good return off it so no worries there for the work that has gone into it. ie. https://adamwathan.me/the-book-launch-that-let-me-quit-my-job/ https://adamwathan.me/the-book-launch-that-let-me-quit-my-jo...
- deleted 7y ago
  [deleted]
tonyoaky 7y ago
But isn't Tachyons already on github?
mlcdf 7y ago
TailwindCSS is licenced under MIT so I dont' see how creating and selling components created with it could be seen as "circumventing the license". Tachyons is licenced under MIT too.

keb_ 7y ago

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. https://basscss.com/ https://basscss.com/

Agoreddah 7y ago
Wow, just today I was creating css lib for my project with similar naming and behaviour rules. Thanks for showing it out, I will check (eventually create) sass version of it. In my personal opinion, for simple projects, this is all what developer needs. Intuitive, extensible, low dependency and fast.
- keb_ 7y ago
  Yes, I agree. I use basscss for a ton of small projects, and my personal sites. It's so small, it's trivial to include even when I'm using larger frameworks like Bootstrap.

deleted 7y ago

[deleted]

SnowingXIV 7y ago

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. 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.

longtermd 7y ago

I didn't get the pricing. Is this one-time, monthly, or annual?

httgp 7y ago
It’s one-time and you get lifetime updates for the kits you buy.

desireco42 7y ago

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. I like how they didn't limit too much what can you do with components in license, which is really good. 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.

thrownaway954 7y ago

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. this isn't an issue with something like bootstrap where a single class makes a button look pretty.

deltron3030 7y ago
You can extract components: https://tailwindcss.com/docs/extracting-components/ https://tailwindcss.com/docs/extracting-components/ And you can store and access components as code snippets within your code editor (e.g. VSCode), that's how I'd store the bigger Tailwind UI components. When I need a component then I just use a shortcut and pick from a component menu.
- thrownaway954 7y ago
  i think you're missing the point. extracting "component" as code snippets does nothing if one day your boss tells you to change all the size and colors of all the buttons. you still have to go through your entire site and make the changes manually at every instance... or have the foresight to have a class on every button that you can reference through pure css to make the change without breaking tailwind... but at that point, why would have use tailwind to begin with.
  - thrownaway954 7y ago
    well... looking at the @apply directive that they have, i think found the answer to this. i've been proven wrong: https://tailwindcss.com/course/composing-utilities-with-apply/#app https://tailwindcss.com/course/composing-utilities-with-appl...
    - thrownaway954 7y ago
      continuing to fall on my sword from yesterday... my god... i am impressed. i've been going through the screencasts they have and i think i'm going to ditch bootstrap and use tailwind for my next project. https://tailwindcss.com/screencasts/ https://tailwindcss.com/screencasts/

dylanhassinger 7y ago

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. 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. Excited for UI. Keep it comin!

deleted 7y ago

[deleted]

z3t4 7y ago

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.

ronyfadel 7y ago

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? 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.

markdown 7y ago
> 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 I used to sell GPL licensed Joomla extensions and themes. Short answer: you can't. Long answer: You just can't. People who're going to pirate your work aren't your customers and weren't going to pay anyway.
aniforprez 7y ago
In this case they're not even trying to stop piracy cause as with their book "Refactoring UI" none of this stuff is locked behind DRM. You can possibly copy all the HTML and spread it around if you have access but that would be scummy and it's great that the devs here trust the users to not help such an effort and have not added intrusive methods to protect this. The license is also very permissive. For what we potentially get as this is closer to full release, it's well worth the cost
- nojvek 7y ago
  Oh. Refactoring UI is by the tailwind folks. Did not know. This gives me some extra confidence.

meerita 7y ago

I don't like the way they designed the inputs. Pure placeholder hint, no label. Will create a big accesibility and usability problem.

tracerbulletx 7y ago
They have labels on all their sample form components? https://tailwindui.com/components/application-ui/forms/input-groups https://tailwindui.com/components/application-ui/forms/input...

bensochar 7y ago

To me this is solving Tailwind's biggest issue: consistency & context. 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 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

ahallock 7y ago
Why not use view templates to capture these?
- bensochar 7y ago
  For alerts a sharable template is doable. So maybe a bad example, LOL. But for buttons & heros not so much. I've worked with apps that have a "button" template. I find it overkill. For one project we have some components rendered both server-side & with Vue. Other cases I've had are sharing styles across multiple apps and pulling in markup from a 3rd party, like Stripe or a WYSIWYG. But you're right. Ideally this wouldn't be an issue w/ view templates.
  - ahallock 7y ago
    I agree; for smaller components like labels and buttons, having some compound rules would help. They tend to be well-defined. I believe you can create composite styles in Tailwind.

bensochar 7y ago

Its like George Costanza says about sex & parking. Why should I pay for a Tailwind hero when, if I apply myself, I can get a Bootstrap hero for free? https://tailwindui.com/components/marketing/sections/heroes https://tailwindui.com/components/marketing/sections/heroes https://getbootstrap.com/docs/4.4/components/jumbotron/ https://getbootstrap.com/docs/4.4/components/jumbotron/

ahallock 7y ago
For starters, it's a more modern approach and the designer behind it is amazing, so it looks much better than Bootstrap IMO. You also get all the other components they add in the future, whereas Bootstrap only has its core components.

arendtio 7y ago

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. [1] https://openui5.org/ https://openui5.org/ [2] Sample App: https://github.com/SAP-samples/openui5-sample-app https://github.com/SAP-samples/openui5-sample-app [3] Slider in the component library: https://openui5.hana.ondemand.com/entity/sap.m.Slider/sample/sap.m.sample.Slider https://openui5.hana.ondemand.com/entity/sap.m.Slider/sample...

runako 7y ago
Good gracious, you have to install a toolchain specific to the UI framework to see the sample app? I know I'm curmudgeonly about front-end toolchain bloat, but doesn't this seem excessive?
hello_moto 7y ago
1. is heavy (size) 2. is huge (libs) 3. was made by SAP for custom HANA apps with "normalized" widgets and skins, originally known as SAP UI5 4. MVC, Single-App, two-way data-binding, tutorials are hard to grasp, conventions that may not lend itself to front-end devs mindset. 5. naming convention is a mixed of Java and C++ (hungarian notation) instead of JavaScript Source: used SAP UI5 in the past. Nobody likes it.

ahallock 7y ago

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.

irrationalactor 7y ago

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. Is there anything similar to Tailwind that doesn't require any build process?

AbdelilahLbardi 7y ago
You still can use the external CDN link. But you won't be able to do a custom configuration file which is completely okay.
- uyuioi 7y ago
  I don’t recommend people use the CDN, it unpacks with a huge payload.

jacobsenscott 7y ago

Remember when the OS provided the UI, and you could just focus on solving your users problems without thinking much about the UI. Those were the days.

misiti3780 7y ago

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.

mkarnicki 7y ago
While not CSS courses directly, these resources should help you address what you're looking for. Tailwind related playlists on Adam Wathan's YouTube: https://www.youtube.com/channel/UCy1H38XrN7hi7wHSClfXPqQ/playlists https://www.youtube.com/channel/UCy1H38XrN7hi7wHSClfXPqQ/pla... And this publication (by same authors as Tailwind UI, that is Adam and Steve) https://refactoringui.com/book/ https://refactoringui.com/book/ Enjoy!
- misiti3780 7y ago
  thx

nojvek 7y ago

Do these come as custom element ? Just wanna abstract away and deal with higher level UI elems.

udeathstarck 7y ago

Remove

udeathstarck 7y ago

Remove all the things

markdown 7y ago

Why is the license on another website... and a website built for collaboratively editing a document no less? Best to set it in stone (by bringing it onto your own website) before you start selling.

kundiis 7y ago

how is this different than bootstrap?

uyuioi 7y ago

Getting tailwind to work properly with Vue CLI has been the bane of my existence.

gbrits 7y ago
How so? Haven't tried tailwind, but wanted to try it on a pretty decent-sized Vue-project

ivanhoe 7y ago

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?

williamdclt 7y ago

I really like Tailwind's approach in some cases, it does make prototyping extremely fast. 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: .my-class { use .text-sm use .text-gray use .bold } Kind of like calling several functions from a single function to compose their effects. 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. If I've missed something and this is actually possible, please somebody tell me!

mike1o1 7y ago
This already exists and it's great! https://tailwindcss.com/docs/extracting-components#extracting-css-components-with-apply https://tailwindcss.com/docs/extracting-components#extractin... .btn { @apply bg-blue-500 text-white py-2 px-4 rounded; }
htunnicliff 7y ago
If you take advantage of PostCSS or Tailwind's CLI, you can compose something like: .my-class { @apply text-sm; @apply text-gray; @apply font-bold; }
- williamdclt 7y ago
  This is exactly what I want, down to the syntax!
pdr2020 7y ago
Other commenters have addressed ways to implement this. But ideally, instead of extracting that specific collection of classes out to a class, extract out the HTML fragment into it's own template (or into it's own React Component or insert framework component abstraction here). The cleaner separation now is: 1. classes represent some atomic unit that enforces (for that unit) some design system specification 2. html fragments represent a specific implementation composed of those atomic units

rsp1984 7y ago

Please excuse the newbie questions but would I be able to use this in a WYSIWYG framework like Webflow or Weebly or Wordpress? How about compatibility with React? Or is this the land of "bare metal" HTML+JS+CSS?

marc_io 7y ago
You can use it with WordPress for sure, as you have total control of the markup. But you can't use it directly with Webflow. I don't know about Weebly.

cc9one 7y ago

Just bought Tailwind. Where do I find my Tailwind plugin list?

luketheobscure 7y ago

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. 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! 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.

CGamesPlay 7y ago
I agree with you about Tailwind, but had to call you out on this: > BEM seems to be the worst of both worlds, both abandoning the "cascading" part of "Cascading Style Sheets" and still requiring verbose class names! BEM doesn't abandon the cascade (or really care about it). What BEM is actually pushing back on is rule specificity. For example: #navbar a { color: blue } /* Can't do this, it doesn't change my navbar-submenu colors */ .navbar-submenu { color: inherit } /* Have to do this as a workaround */ #navbar .navbar-submenu { color: inherit } And now I'm in an arms race with myself over rule specificity.
- have_faith 7y ago
  I think BEM is often misunderstood, it's not immediately obvious to beginners why it's helpful. Specificity is one problem it helps solve as you mentioned but the biggest thing for me is it forces you to think about what an element is and who it belongs to. If someone writes '.nav a' they're saying "select all links inside of nav", but what they really wanted to say was "select all nav menu links, and nothing else", a class like '.nav__link' will never select other links that happen to be in the nav (CTA buttons, logo links, etc) and will survive markup restructuring, something like ".nav > ul > li > a' will not survive minor markup changes as it doesn't express what someone wanted to select in the first place. I think this way of thinking brings a lot of benefits that most CSS frameworks don't give.

neya 7y ago

I can totally see the value of Tailwind UI, and as an experienced user of UIKIT (https://www.getuikit.com https://www.getuikit.com), 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? 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? 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. Thank you.

winrid 7y ago

It looks really nice. Site is fast too. Good job.

davidbanham 7y ago

I'm very excited by this! I currently use https://materializecss.com/ https://materializecss.com/ 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. 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. 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.

dharma1 7y ago

Without commenting on Tailwind CSS itself, I think the value add here is with the very nice looking UI components designed by Steve Schoger. I would like to see a React component version of this, ready to use with a CMS like https://webiny.com https://webiny.com

arcosdev 7y ago

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).

darepublic 7y ago

I haven't tried this before but it reminds me of tachyons from what I'm reading in the comments

hirako2000 7y ago

I used tailwind, not for long, until I found basscss. It comes down to a css library being a utility that defines clean patterns for extension.

psoots 7y ago

This is not a good idea. 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. 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? Frankly, I really enjoy using Tailwind CSS, but I'm a little nervous now to even use the original project in my work.

aagha 7y ago

Wow. I just watched the video Adam put together of slamming a new front-end together and it's really impressive (and fast).

mirap 7y ago

UX designer here! Tailwind is great piece of work and I'd recommend it for validating MVPs and building new projects in general. Reasons: - Its constrains and whitespaces are well made, if kept untouched, the result may be good, even if build by dev with no design skills. - Elements are containing what's necessary, but no more. No unnecessary tooltips etc. - All elements have clear basic states (see https://tailwindui.com/components/application-ui/forms/input-groups https://tailwindui.com/components/application-ui/forms/input...)

hackerman555 7y ago

I like the design, hate the implementation. Really doesn't work with react. react + styled components is god mode. This is a step down (aside from the design). At the end of the day, CSS isn't that hard anymore. Design it in figma. Put it into zeplin. Copy paste the styles into a styled-component. You're done. tailwind is only a step up if you're a russian php developer who has been using bootstrap for the last 10 years.