19 ms·

Why I Love Tailwind

• nikivi 6y ago
  Was always curious, why it was Tailwind that won 'utility-first css' and not https://tachyons.io https://tachyons.io which did this approach first.
  • mxstbr 6y ago
    Exactly! Tachyons was awesome and ahead of its time but its core design system wasn't as well made as Tailwind's is. Also, to be fair, Tailwind's marketing game is out of this world as well. They are literally some of the best developer marketers on this planet!
    • busterarm 6y ago
      Tailwind is also like half a megabyte minified and zipped vs Tachyons 20kb.
      • config_yml 6y ago
        But who uses all those tokens from the full tailwind build? Maybe if you use the CDN build? That's why purgecss is builtin. It's dead simple to setup and you'll have only the used classes in your CSS output.
        • busterarm 6y ago
          I agree, I've just seen this kind of thing before and have low expectations of what people will do with it. Basically I'm expecting people to be lazy and use the full thing. Especially the CDN build.
    • subpixel 6y ago
      You can create (or recreate) Tachyons using Tailwind, and take advantage of all the bells and whistles that the later offers that the former does not.
    • uxcolumbo 6y ago
      Can you give some examples of what they did marketing wise that helped it being adopted more widely than Tachyons?
      • cambalache 6y ago
        They wrote a book that is pretty popular. Thanks to their connections with the Laravel leadership they got Tailwind as a somehow default for the front-end in Laravel. I dont know if it is organic or not, but there are dozens of articles about Tailwind coming up daily in sites like Medium and Dev.to.
      • rendall 6y ago
        Have you seen the trailer for Tailwind 2? https://youtu.be/3u_vIdnJYLc https://youtu.be/3u_vIdnJYLc
      • ediatedia 6y ago
        Adam Wathan actually wrote about it: https://adamwathan.me/tailwindcss-from-side-project-byproduct-to-multi-mullion-dollar-business/ https://adamwathan.me/tailwindcss-from-side-project-byproduc... I think one of the most powerful things was making a course then giving it away - really goes far to boost your prominence as a developer and building those lists.
  • corobo 6y ago
    Tailwind creator is mates with the Laravel creator so got a big boost in eyeballs from that. I guess Tachyons didn't have that. If I can be honest the name is a pain in the arse to remember too
  • leftnode 6y ago
    Great marketing (and this is from a huge fan of Tailwind). Marketing, even for OSS projects, is incredibly important.
  • jozzy-james 6y ago
    great documentation, good 'outreach' presence around the interwebs from the team, sensible class naming (tachyons can get a little...eh, imo), the build possibilities are quite nice (tho may be as flexible in tachyons...haven't used it in quite some time), responsive everything (mostly), the laravel bump as mentioned - all in all an evolution of previous attempts that resonates better i guess.
  • desmap 6y ago
    I still use Tachyons which I find way better. It*s just a css mapper with much saner design decisions.
  • benfrain 6y ago
    Ha, you kids! What about the REAL project that kicked off atomic styling: https://acss.io https://acss.io pioneered by Thierry Koblentz and friends while at Yahoo. Everything that came since is just a variant, in principle, of that. It never gets the props!
  • bridgejupiter 6y ago
    I think the biggest thing is documentation. Tachyons has basically none, the only way you would even know that you can do responsive design with it for example is by reading all of the CSS. Case in point from this very thread: > i'm trying to find it in the docs - but how do you apply a different border on mobile, tablet and desktop via tachyons? https://news.ycombinator.com/item?id=25333465 https://news.ycombinator.com/item?id=25333465 You can't cross the chasm from early adopter tinkerer types to the more mainstream community without teaching people how to use your tool.
  • deltron3030 6y ago
    I think it's because of the hardcore minimalism of the creators or Tachyons and also Theme UI, it lacks mass appeal because of it. If you dig into Steve Schogers style (the guy behind Refactoring UI and Tailwind aesthetics) you'll see that he's more in the Streamline Moderne camp than Bauhaus minimalism, his stuff looks more "designed" in the sense of how non designers think about good design. Tachyons is kinda invisible..
• imposter 6y ago
  My opinion moved from liking tailwind to loving it when tailwindplay got realsed (play.tailwind.com). It's so cool, and faster than any hot-reload ever will be. It's in my opinion is the smoothest way to create UI components on the fly with ease that of drag and drop tools, but with much more extended functionality.
  • epja 6y ago
    I think you meant to link to https://play.tailwindcss.com https://play.tailwindcss.com
    • mythz 6y ago
      Nice, instant live previews as you're toggling through IntelliSense is pretty slick.
  • jozzy-james 6y ago
    even just using the element classes option in dev tools makes for rapid prototyping
  • jarek83 6y ago
    I'm not convinced to Tailwind. Can someone explain to me how this is better than "normal" CSS? Take this example from the play site: 3 bullet points, each has to repeat the same thing: <li class="flex items-start"> <span class="h-6 flex items-center sm:h-7"> <li class="flex items-start"> <span class="h-6 flex items-center sm:h-7"> <li class="flex items-start"> <span class="h-6 flex items-center sm:h-7"> vs classes: <li class="bulletpoint__container"> <span class="bulletpoint"> <li class="bulletpoint__container"> <span class="bulletpoint"> <li class="bulletpoint__container"> <span class="bulletpoint"> And when you have this all around your project, and then you decided to change 1 thing. How Tailwind makes it easier here? I tried to inspect the Tailwind styles in browser - sorry, but it looks like nightmare.
    • cteague 6y ago
• xyproto 6y ago
  The text flows outside of the box in the very first example of why Tailwind is great. Viewed on mobile. Not convinced.
  • bjarneh 6y ago
    > flows outside of the box in the very first example of why Tailwind is great It's just greater than that particular box :-)
  • mxstbr 6y ago
    Fixed, that was my bad with the example! I didn't include Tailwind's reset for the example as that was causing issues with the rest of my site. I forgot to add the word-break rule that it includes!
  • deleted 6y ago
    [deleted]
  • mtlynch 6y ago
    I'm not sure that this blog post uses Tailwind. The CSS rules don't look like Tailwind, but the build process might be mangling rule names. Also, remember to critique constructively: >Please don't post shallow dismissals, especially of other people's work. A good critical comment teaches us something.
    • mxstbr 6y ago
      Correct, my blog is not built with Tailwind (yet). I made it many years ago before Tailwind was a thing!
    • xyproto 6y ago
      The critique was pretty specific, though? And if a framework that aims to be the pinnacle of CSS makes it easy to get the basics wrong, how is that shallow?
• jozzy-james 6y ago
  not related to the article at all, but figure I'd share this thing that was recently released (no affiliation, just a fan of marcel's work) : https://usewindy.com/ https://usewindy.com/
  • gavinray 6y ago
    Whoa this is really cool
  • mpociot 6y ago
    Thank you for posting this. I posted the link a couple of days ago on HN, but it didn't get much attention back then :D Cool to see that people like it!
    • jozzy-james 6y ago
      have yet to try it out myself actually, but it's on the short list once i get some time at work :)
• devmor 6y ago
  I'm a really big fan of tailwind as someone who doesn't like to do frontend. It's let me iterate decent-looking proof of concept features and MVPs while focusing mostly on the backend, where previously most of my designs would look like craigslist.
  • freedomben 6y ago
    I'm in the same boat but I've really hit a painful point where I can do a good job with Tailwind UI components and other things like that, and I can massage and hack on them to get them looking good, but I can't make a great UI. I'm getting really close to going back to minimalism. A clean modern look with good color scheme and good fonts, without worrying about animations or really fancy components.
    • bladegash 6y ago
      Check out tailwind-ui[1]. For me at least, the cost was well worth the value and it’s not much more expensive than the variety of Bootstrap templates I have purchased over the years. It also helps support future development of tailwind. [1] https://tailwindui.com/ https://tailwindui.com/
  • bladegash 6y ago
    Same here! I am a huge fan of the base styling and components they offer. I even splurged on tailwind-ui, I am super happy with it, and I highly recommend it to others. It is such a refreshing experience to have something other than Bootstrap derived personal projects and MVPs. To anyone from Tailwind that may read this, please keep up the great work. The easily apparent thoughtfulness and taste that went into tailwind and tailwind-ui are what drove me to try it out, learn it, and incorporate it into projects. I’m excited to see what else gets added to tailwind-ui and the progress on headless-ui as well! If you need any contributors on the front-end side, especially with accessibility, let me know who to reach out to.
• stanmancan 6y ago
  Atomic CSS is not ideal for performance. No tooling can extract the per-page critical CSS, so you end up shipping more CSS to the browser than necessary. The bigger and more dynamic the app, the more unnecessary code you will ship. Isn’t this solved by using PurgeCSS? During your build phase it removes any unused classes from the final build. You end up with a single CSS file, which is usually quite small, that your browser only downloads once and then caches it. Do people actually generate a CSS file for every page?
  • mxstbr 6y ago
    Yes, CSS-in-JS actually generates critical CSS for every page and user! Quite mind-blowing, right? That's possible because it knows exactly which components were rendered in which state, which no other tool can do. See the footnote in the blogpost that explains this more in-depth. I'll copy and paste it here: > CSS-in-JS automatically extracts the critical CSS for the requested page and inlines it into a <style> tag. That means the first-paint with CSS-in-JS will always be faster as it saves both an extra network request for the .css file as well as sending less CSS code to the client. While the Time To Interactive for small apps will be slightly slower (as the JavaScript bundle includes the CSS-in-JS library you use) once your app grows the network request for the larger CSS file can outweigh any CSS-in-JS library and can cause a slower Time To Interactive as well.
    • stanmancan 6y ago
      Interesting thanks! Wouldn’t this only be a benefit for the very first request when it has to download the css file? Seems like including online styles would increase the page size of every page, on every load, versus a one time delay downloading the css?
      • newmnhn 6y ago
        The problem is partly that page speed measurement tools care a lot about that first load. Even if everything after that is super snappy due to cached resources, if you are only using 5% of the total CSS file in the first page the user hits, that other 95% is dragging down the experience on first load, and especially dragging down lighthouse scores. It doesn't mean though, that you can't have a combined approach where a small amount of genuinely global CSS is loaded from an external file that is cached, while component-specific CSS lives in the component and renders inline with it. But then it's like ... why do that extra request if the file is that small, and you end up with inline everything. Definitely the trend from a business point of view is to optimize for good perf scores on lighthouse, even if that's a little illogical at times. Another thing though is that often the JS for whole chunks of a page (which contains the CSS) can be code-split and cached as its own file, so whole components made up of HTML CSS and JS can be lazy loaded and if that same chunk of stuff is needed again, it could be a cached JS file. Especially if these are "below the fold" and pulled in as the user scrolls or something, you get a small initial payload + small JS files being called in to run as needed. I don't know how many implementations there are of this in the wild, but it's possible.
• scandox 6y ago
  > This does require some design taste, but most frontend engineers I know have developed that over the years of building user interfaces. Nope. Never really happened for me. Admittedly I don't solely work on frontend. But 22 years of making user facing interfaces and I really don't feel more confident about it than I did on day one.
  • CharlesW 6y ago
    > But 22 years of making user facing interfaces and I really don't feel more confident about it than I did on day one. You might enjoy "Refactoring UI", which I find to be a good design reference (with lots of specific tactics and examples) for front-end developers. It takes a lot of mystery out of the design process. [1] https://refactoringui.com/ https://refactoringui.com/
  • rohitpaulk 6y ago
    I'd recommend reading "Refactoring UI" (by the authors of Tailwind)
  • edoceo 6y ago
    This book: The Design of Everyday Things by Don Norman really helped me with UX/UI thinking
    • vulcan01 6y ago
      This book is really good... (It used to be printed as "The Psychology of Everyday Things", if you're looking in your library).
  • _jesseb 6y ago
    There are a _lot_ of frontend devs who don't, especially now that frontend is so much more than "slap some html and css together". I probably just know the wrong people but I can count on one hand the amount of frontend people I know that I would say have an eye for design. It's pretty easy to get by without it. :)
  • Neputys 6y ago
• jack_riminton 6y ago
  Love it! I've meshed so completely with tailwind on Rails that it put me off learning React. Guess there's no excuse now
• timvisee 6y ago
  What is Tailwind's performance like? It seems like a ginormous CSS (and JS?) blob for a rather simple visual design.
  • _fat_santa 6y ago
    It's actually pretty good. Just have to make sure that purgeCSS is setup property to remove any properties you didn't use.
  • jozzy-james 6y ago
    purgecss and customizing the config will reduce any file size concerns you have (plus gzip, etc) - from an execution perspective, since you're only using a fixed set of class names, the parsing is quite fast.
• desmap 6y ago
  Tailwind's paradigm ("atomic css") is great and the future, but there is a much better implementation, the barely maintained Tachyons is way superior and was also the first that made atomic css popular. I wrote following on Reddit which still holds true: After 2 days of testing, I chose this stack: Tachyons as primary CSS-in-JS and media-queries method in my React components; why: it's slick, easy and complete and brings you quite far configuration is super; eg, creating your own color or default font is just putting them in your App.css and they override Tachyons; creating other breakpoints is possible (just change and recompile, this takes 1sec and a tachyons-cli is there, no need to touch webpack or eject CRA) however, configuring Tachyons is not required at all, I tested it in and out and it's all perfect at the moment, it's really turn-key and absolutely the right approach to our problem; Tachyons does just one thing and it does is right I preferred it very much over others like Tailwind because Tailwind has cumbersome and long CSS naming; Tailwind's philosophy and strategy is inconsistent; on the one hand, it wants to be atomic CSS, on the other hand, it bloats and pollutes your components almost like real CSS, wth? either I do minimal atomic CSS (it's called 'atomic'!) like Tachyons or I put real CSS in my component; Tailwind doesn't know what it wants to be while Tachyons has a clear strategy which is perfectly executed => an ultra atomic mapping to CSS, Tailwinds bobs up and down with some short names and then some long ones...; also setting Tailwind up or configuring is unnecessary complex and bloated; doc is comprehensive and complete but also because of its own complications and disunity; atomic css doesn't need to be science; compared to Tailwind, Tachyons is a dream I also checked styled-system but found the DX not close to Tachyons and couldn't see any benefit over Tachyons; it's too cumbersome but in a different way than Tailwind Tachyons is just 13kb gzipped while fully featured (Tailwind is 36kb) while small Tachyons has the biggest ecosystem (related libs, cheatsheets, blog posts), at the end of the day, you don't need more, again it's just a mapper and more advanced stuff should be done with eg Emotion anyway[1] [1] https://www.reddit.com/r/reactjs/comments/a6qhbr/checked_21_react_ui_kits_briefly_im_done/ https://www.reddit.com/r/reactjs/comments/a6qhbr/checked_21_...
  • shallowthought 6y ago
    An ineffable truth of webdev is that it is constantly disrupted by morons who claim to have an improvement, but really just want as many people as possible to use something THEY built.
• nael09 6y ago
  Met too
• rattray 6y ago
  Regarding performance, twin.macro seems like a fantastic approach for React users, inlining the styles where needed with Emotion/similar. It also answers the "where do custom styles go" question to some extent (answer: the css prop). https://github.com/ben-rogerson/twin.macro https://github.com/ben-rogerson/twin.macro Edit: I had stopped reading half way through! This is what the article is about. I'll leave my comment up to publicly shame myself.
• aspyct 6y ago
  Wasn't the whole point of CSS to separate presentation from data, and move away from <font color=red> and other <table> that made layouts too difficult to change? Consider this: <h2 class="text-purple-500">Customer Support</h2> How is this different from <h2><font color="purple">Customer Support</font></h2>? This is still considered bad practice, right?
  • dasil003 6y ago
    That philosophy works if you have a lot of docs with uniform content that can be represented by simple tags that don't need to change much. However if you have a rich UI then A) there tends to be more structure than content and B) structure, behavior and presentation are coupled together by definition. Yes you can try to shove the square post into a round hole by naming your HTML just-so, cramming as much presentation in your CSS with pseudo elements, and using pure JS files hooked to HTML via classes/ids, but the minute you need to change anything you'll see you can't make a single change without carefully considering all 3 "de-coupled" file types. Worse, if you try to reuse these semantic definitions across a large app, now you find that a change over here can break things way over there, the larger the app the worse it gets. Once you get to this point you realize that component level isolation ala React/JSX is a much more sane approach to manage huge web app UIs than pretending that functional de-coupling is some kind of platonic ideal rather than just one possible set of tradeoffs.
  • sneak 6y ago
    AIUI Tailwind is an explicit rejection of the previous "decouple content and presentation" dogma. People seem to like it.
    • prionassembly 6y ago
      Factoring and decoupling parts complex systems is good engineering, but "content and presentation" are the map, not the territory.
  • shallowthought 6y ago
    Because it's more than six months old, and therefore totally obsolete.
• AltruisticGapHN 6y ago
  I’ve been thinking about an alternative to tailwind but I have no idea how to implement it. I think what would be even more powerful is you configure all the classes with some kind of regexp. They need to be unique. You could provide a function as well that returns the correct css for any given captured units in the class name so eg. "mb-4em" you have template "mb-(\\d+)em" declared. The tool recognizes it and either just puts the number there, uses a mapping (4 becomes 16), or calls a function to return the resulting css properties. What I like about it is you could just as well create more advanced utilities and the parser never generates any classes in advance. It would need some kind of watcher though to detect any new class aded to templates that match the definition file. Then there would be no need to purge anything. Kind of a vague concept I’ll admit, but for me starting with a figma or sketch where designer typically does not folow a consistent guideline, it means I can just start writing templates and keep declaring utilities as I go because in the real world you bet that happens.
  • jozzy-james 6y ago
    i mean, tailwind kinda does a very simple version of that...`/` is not a valid class character, but it's parsed correctly on compile.
  • zamalek 6y ago
    You could do it with single file component frameworks (Svelte, Vue, possibly Angular). Your CSS is alongside your HTML and so your classes could be matched during compile.
• hospadar 6y ago
  Genuine question, I'm a dev, but primarily backend and all my frontends are internal/chunky/it doesn't matter I usually do 2 things when styling my crummy internal sites: a) manually write semantically-named classes for things that need it ("help-text", "external-link") and b) just in-line styles for everything else (esp. when a style really only applies to one element, or is intimately related to important layout considerations). It seems to me that css classes which contain styling info in their name (h-32, font-semibold, text-cyan-600) aren't really any better than just in-line styles, and in fact maybe worse because they [seem to me] to just be an alias [which I have to learn, and will forget later] for a css style. Wouldn't it be simpler to just inline the style? So my question is: what's the real benefit of this kind of css framework? What are the scenarios where it really helps to do styling this way? Is it just a performance thing? Is it about streamlining a dev workflow in some way that I don't get?
  • CGamesPlay 6y ago
    There might be more, but the first that comes to mind is "snapping". To pull from your example, `h-29` through `h-31` don't exist, meaning you have fewer options and will settle on one of the standardized heights. Similarly, `cyan-501` to `cyan-599` don't exist, so you don't accidentally settle on a slightly-different shade.
  • savanaly 6y ago
    Tailwind itself has this [0] to say about inline styles vs utility classes. [0] https://tailwindcss.com/docs/utility-first#why-not-just-use-inline-styles https://tailwindcss.com/docs/utility-first#why-not-just-use-...
  • jozzy-james 6y ago
    text-red-500 isn't the same as color=red, and you can override which shade of red that is (or make it green/brown/whatever...tho that would be silly). but you can also define brand-centric names for stuff and they apply to anywhere you'd be able to use a color (text, border, shadow, etc). there's also the notion of having a design system, rather than a prescriptive framework...tailwind comes with some sensible defaults on these things, but it's built in a way that you can override it all to suite your org's look and feel. with that said, it's an internal tool - who give a hoot?
• earthboundkid 6y ago
  The discussions of Tailwind are always heated but fundamentally boring because all the threads are started by people making the obvious objections that arise before you use it which were answered by Adam three years ago.[1] Do people who have actually used Tailwind in a real project have anything to add? [1] https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-... For my part, I am seeing slow rendering on some of my sites (page doesn't appear on webpagetest.org until 1s after network is done), and I wonder if maybe having atomic CSS is slower to render? Anyone have experience with that?
  • sbergot 6y ago
    Have you profiled your page? I have used it on medium project and I haven't had any painting speed issue.
    • earthboundkid 6y ago
      I can't figure out how to get Chrome to tell me what element is making initial render slow. There are a lot of tutorials for figuring out why JS re-rendering is slow once you have a layout, but there doesn't seem to be a way to identify problems with initial render that I have found.
      • aidos 6y ago
        Can you start by completely blocking the css to check if that’s definitely the issue? I’d quite like to know if there’s a genuine issue to be concerned about.
        • earthboundkid 6y ago
          Here is the site with the media=print hack: https://www.webpagetest.org/result/201207_DiW4_9712575effac226a4b92b8baa9c65b58/ https://www.webpagetest.org/result/201207_DiW4_9712575effac2... You can see it displays the no CSS version around 900ms and then it takes until 1900ms to display the CSS version.
• timdaub 6y ago
  Mhh... I don't know how to feel about this. Over the last year, I've shipped a bunch of (p)react components [1, 2, 3] and what is cool about them is indeed that you can now encapsulate a UI function and make it re-usable within your project or even across projects. In theory, this should finally give front end devs the same super powers as backend devs: high reusability. However, a problem that I wasn't able to distinctly address is CSS. Currently, there's simply too many variants of encapsulating CSS into a "react module". You can opt to use: - css modules - styled components and derivatives - CSS in JS or classes in JS, etc. But ultimately, if you build your UI as a patchwork of many integrated UI elements (which IMO should be something legit in frontend development), you'll end up having to include 5 different CSS-in-bla libraries either in your build pipeline or (worse) in your bundle code that you ship to production (bloats the size and hence your app's performance). Long story short: Combining styled components with twin macro and tailwind doesn't make my life easier currently. And the benefits to my users will not be apparent directly either. Not to say that all the CSS-to-XY movement isn't cool. Still, I think the best solution to this problem has yet to be discovered. 1: https://github.com/TimDaub/preact-touchable-dock https://github.com/TimDaub/preact-touchable-dock 2: https://github.com/TimDaub/react-envelope-graph https://github.com/TimDaub/react-envelope-graph 3: https://github.com/TimDaub/react-simple-knob https://github.com/TimDaub/react-simple-knob
  • shallowthought 6y ago
    My concern is that people might get too complacent with libraries that claim to make CSS local, and people might get lazy and all start using the exact same "generate a unique id" library, which will then start generating a ton of the same id across multiple users of that library.
• ehejsbbejsk 6y ago
  I like Tailwind because it’s the best solution of the bunch at the moment. But I much rather work on iOS over HTML. Now why is that?
  • boromi 6y ago
    I'm not sure what you mean by "But I much rather work on iOS over HTML. Now why is that?" can you clarify?
• tomelders 6y ago
  Not a fan of it myself. I've never understood this desire to avoid writing CSS wherever possible. It's not hard - at least not anymore - but this type of abstraction makes it hard, in my opinion. On top of that, I think it's just a bad idea to pepper your html with utility class names. That said, these days pretty much everything I do is React, and styled-components' ability to interpolate props in styles and attributes is pretty darn nifty.
  • citrons 6y ago
    +1 for styled-components my prefered choice now over tailwind. Styled-components have good integration with typescript - no need for custom utility classes or inline css, also doesn't have a way writing an invalid css-classname and styled-component written css can be easily linted.
  • sbergot 6y ago
    Using tailwind is mostly like using css. It is just a selection of recommended properties and values that hides almost nothing about the nature of css. The abstraction is very thin and its main goal is to limit the "power" of css (complex selectors, arbitrary color or spacing values) to help developers implement best practices.
• woile 6y ago
  I also love tailwind! To me it feels like the defaults are sane enough + an amazing documentation which summarizes all the CSS I use. Most of the time I think: "I need a small margin on the right and a big one at the bottom, and let's see a black background" which is super cheap to mentally translate to "mr-1 mb-10 bg-black" while staying in the HTML. If I'm repeating too much I can either move that to a custom tailwind CSS component or a react component. It just feels easy working with, and it's super flexible.
  • desmap 6y ago
    > To me it feels like the defaults are sane enough I found the exact opposite. If one has perfect defaults it's Tachyons.
    • woile 6y ago
      If I had known it, maybe I would've tried it. I gave a quick glance to the website and didn't fully understand the idea behind it :/
• feronull 6y ago
  The only good use case to use something like Tailwind CSS is that your CSS does not grow exponentially and using twin.macro you lost that.
• chmod775 6y ago
  That example also encapsulates everything that wrong with how CSS is used today. The markup contains no information about what the contents are anymore, so you lose the ability to target anything that is X: for example an email, an avatar within a 'people-card' etc. HTML/CSS was supposed to separate content from looks. Of course that ship has sailed long ago, since modern day development seems to be insistent and mushing HTML, CSS and JS together in the same file. Looks is logic is content is looks is a mess. HTML/CSS was also supposed to be re-usable. Now instead the re-usability is within react/angular/etc. components, so you now have to use react and javascript everywhere you want to show similar elements - if you want to have the ability to easily change them later. Of course this isn't the point. If you have the ability to work with react components, you probably are knowledgeable enough to use CSS. So the only remaining use-case is "way for non-technical people to write objectively bad HTML and have it look nice". Which again, is fine. Sometimes bad is good enough when the alternative is nothing at all. I'm still not a fan.
  • lenkite 6y ago
    Frameworks like Tailwind CSS will go the way of the dodo, once CSS gets proper scoping, isolation and inheritance. (No JS needed). Then you can truly have semantic HTML with presentational stuff separated cleanly without needing any toolchain or 1k+ deps library to do this.
    • idoh 6y ago
      When is that going to happen?
    • boromi 6y ago
      Ok that sounds fantastic, how long should we wait until that's the case and is adopted by all browsers and is backward compatible? That's the issue here.
      • lenkite 6y ago
        Ballpark guess - less than 5 years. There is the work ongoing on CSS and HTM modules at: https://github.com/WICG/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md https://github.com/WICG/webcomponents/blob/gh-pages/proposal... https://github.com/WICG/webcomponents/blob/gh-pages/proposals/html-modules-explainer.md https://github.com/WICG/webcomponents/blob/gh-pages/proposal...
• nickjj 6y ago
  I really like Tailwind but has anyone figured out how to get it to run quickly in development with Webpack? For example Tailwind 2.0 out of the box produces around 3.5mb of CSS and Webpack 5+ on an SSD takes 5+ seconds to start things up. This is a problem with Docker because if your main app container needs to be restart it involves stopping Docker Compose and then upping things. This means your app is delayed 5+ seconds from starting. In production it's no problem with purge CSS and your build step producing the final assets out of band, but I think having a top notch dev experience is really important. You can do some hacks around how Tailwind imports its fils to make CSS updates happen nearly instantly but the initial Webpack start up time still suffers. Currently I get around this by enabling Webpack's filesystem cache but this seems like a band-aid solution. Any suggestions? On a non-SSD machine I noticed the start up time being 28 seconds btw. It's a non-issue for me but if you want to make open source projects that others use, a ~30 second start up penalty in development is a killer for a pretty large chunk of people.
  • dceddia 6y ago
    I’m not sure if it would fit into your dev stack, but letting Tailwind be handled by a Makefile might help. Or, really, any build tool that can use timestamps to determine if a build is needed. I’ve got a setup like this for a couple Eleventy projects, where it kicks off ‘make’ before starting the dev server. Most of the time, make will finish instantly because I haven’t changed the CSS source. Here’s the file I use in case it helps: https://gist.github.com/dceddia/be4d0f136a340359a57a52f168935f21 https://gist.github.com/dceddia/be4d0f136a340359a57a52f16893...
    • nickjj 6y ago
      Thanks. Yeah I was hoping to avoid having to decouple building Tailwind from Webpack as it does complicate the process by a fair bit.
• desmap 6y ago
  Tailwind must have an extremely talented social media guy/growth hacker or be a very good product: 14 HN front-page hits within just one year. https://hn.algolia.com/?dateRange=pastYear&page=0&prefix=false&query=tailwind&sort=byPopularity&type=story https://hn.algolia.com/?dateRange=pastYear&page=0&prefix=fal... Edit: Got downvotes, guess what haha
  • deltron3030 6y ago
    It's a good tool and they have a strong Twitter community.
• w_t_payne 6y ago
  I'm personally a big fan of Tailwind + either HTMX or Alpine.js, as it lets me easily generate modular UI components in the back-end using the 'dominate' Python library, without having to fuss around too much. (Other frameworks such as React should work as well, I just haven't experimented with them very much so far). Munging these tools together has let me create my own 'distributed back end framework', so I can define back-end logic and front-end logic in the same place, but have the back-end logic run on whichever machine I choose, so e.g. an edge device can send a fragment of UI to a monitoring dashboard. It's all rather nice and I'm very pleased with myself. :-)
• city41 6y ago
  There's something to be said about being able to build out an entire component with just using your editor's css autocomplete. The name "tailwind" is really apt once you get the feel for it. The authors did decide to 'fix' some css naming, such as Tailwind's `hidden` class is `display: none` rather than `visibility: hidden`, which seems wrong at first. But when you see that `visibility: hidden` is `invisible` in Tailwind, it does makes sense. I still can't help but think just following the existing naming might have been better, about my only teeny tiny gripe so far.
• mmckelvy 6y ago
  I think the original concept of using inline styles in your React components was truly a leap forward in terms of styling DX. It seems like most of the developments since (CSS in JS, Tailwind) have just been more inefficient ways of implementing that core inline styles concept. Ok, these new solutions give you pseudo classes, but those can easily be replicated in JS. Beyond that, I don't see the upside of the additional complexity these solutions bring vs plain inline styles.
• desmap 6y ago
  Tachyons needs this for a button: <a class="f6 link dim ph3 pv2 mb2 dib white bg-black" /> Anyone so quick to show the same in Tailwind to have a comparison? You can see the button rendered here (the first at the top): https://tachyons.io/components/buttons/basic/index.html#0 https://tachyons.io/components/buttons/basic/index.html#0
  • jozzy-james 6y ago
    not exact, but from one of my buttons flex bg-black text-white px-8 py-4 font-bold cursor-pointer items-center justify-center edit: more characters needed, but IMO makes more sense as to what it's doing.
  • dsissitka 6y ago
    <a class="active:opacity-80 bg-black hover:opacity-50 inline-block mb-2 px-4 py-2 text-sm text-white transition-opacity"> Button Text </a> https://play.tailwindcss.com/rNUrXntEZQ https://play.tailwindcss.com/rNUrXntEZQ Edit: That should be `focus:opacity-80` instead of `active:opacity-80`.
• recursivedoubts 6y ago
  One of the best things about Tailwind (and the component and HTML-first movements in general) is a move towards Locality of Behavior: https://htmx.org/essays/locality-of-behaviour/ https://htmx.org/essays/locality-of-behaviour/ With these approaches, you can achieve a complete understanding of a component in one place, without needing to pick around in a bunch of different places, using id-matching or some other mentally burdensome mechanism to keep everything straight. There are trade-offs (as the essay mentions) but Locality of Behavior obviously has a lot of advantages.
• adkadskhj 6y ago
  Can anyone recommend any text-heavy tailwind themes? Or - are themes even viable with Tailwind? I'm a backend Dev who plans to buy Tailwind Build (or w/e it's called). I enjoy the idea of not having to worry (as much) about design, and instead just focus on content layout, etc. Tailwind is neat that way. With that said though i'm not a fan of the .. "modern" design. I'll use it, i guess, but on text heavy pages ala Wikipedia or HackerNews, Tailwind looks like it would waste a lot of space. Though maybe i'm off base. The point of this is to ask if theming has gotchas. Eg maybe themes work, but they're rarely ever supported well enough, leaving you with little gaps in design that cause problems. Thoughts?
  • aaron32311 6y ago
    Asking since I’m working on something in this space.. Why tailwind and say not Bootstrap? And can you elaborate on the text heavy pages?
    • adkadskhj 6y ago
      Disclaimer: I'm super not design focused, statements made below are assumptions, feel free to correct. > Why tailwind and say not Bootstrap? From the un-researched outside i don't understand how much of Bootstrap is pure CSS and how much depends on JS. I know when i've used Bootstrap in the past i saw a lot of JS, which turns me off. I primarily want a light CSS framework. This is coupled with the fact that UI executed logic is handled by WASM in my use case (Rust). So the thought of decoupling JS puts up mental friction that Tailwind doesn't give me the impression of. Sidenote, i've tried some of the Bootstrap ecosystem in the past and it felt rather messy. I imagine this is partly due to the success of the Bootstrap ecosystem, but it felt messy enough that i'd probably only be interested in a streamlined CSS only Bootstrap offering. > And can you elaborate on the text heavy pages? I guess i just mean pages where i want to see more dense information, like Wikipedia, rather than more sparse information which is common these days. An easy comparison is New vs Old Reddit. A lot of design i see, even from Tailwind, organizes UIs like New Reddit. That might be nice for landing pages and customer navigation - but i loathe it for data. When i'm viewing long for data i want to see things both look good and be densely packed - within reason. New Reddit takes high volume information (lots of links/descriptions/comments) and makes navigating it ~5x less efficient.
• tmikaeld 6y ago
  Semantic-UI [0] is also a well established framework for building up design using css classes and html only. It's been more or less abandoned when the main developer got tired of it though, I really hope the same doesn't happen here. [0] https://semantic-ui.com https://semantic-ui.com [1] https://fomantic-ui.com https://fomantic-ui.com (Community fork)
• sytse 6y ago
  In https://news.ycombinator.com/item?id=25305467 https://news.ycombinator.com/item?id=25305467 there was talk about the PETAL stack of which Tailwind is a part. It consists of Phoenix, Elixir, Tailwind, Alpine.js, and LiveView.
• CaptArmchair 6y ago
  I spot many comments either stating that "Tailwind doesn't respect the whole point of CSS: separation of data and presentation" or "CSS falls completely short." I think the truth is to be found somewhere in between. This debate is really about what people want and how they envision the Web. Either as hypertext documents that link information; or as a platform for "rich web applications." While people argue over the problems JavaScript pose when building applications. The same type of arguments also pop up when it comes to CSS. How the focus on semantics hampers building rich applications with a dynamic DOM structure. I posted a comment a few days ago that goes into detail about this. I hope you will forgive me for repeating it here. I feel it's relevant to this discussion as well. What changed over the past 30 years is how the Web evolved from a small group of academics and engineers 30 years ago into the billions that it connects today. It's not just hypertext. It's hypertext and every other conceivable business case which is being shoehorned into the browser. The Web originally wasn't conceived to provide affordances that allow for "rich media experiences". Foundational technologies - HTTP, HTML, CSS, JS,... - weren't originally designed to build complex user interfaces and applications. Yet, as more and more and more people got connected: that's exactly what they wanted. Remember Flash? Or Java applets? Or Silverlight? Those were hailed as additional technologies that would merge complex user interfaces into the Web. Macromedia coined the term "Rich Web Applications" back in 2002. All of them failed for various reasons. Ever since the Web Standards moving of the mid-00's, communities of designers have taken CSS and HTML and tried to bend and use them in any way possible to bring visually stunning experiences on the Web. This is where you will find the direct roots of many ideas and dynamics that are currently in vogue. It's their influence, as well as other dynamics - e.g. the introduction of the smartphone, the rise of big tech - that has defined how browser technology has evolved. Over the past decade, browser vendors have tacked on additional browser API's on top of the original, decade old foundations, while communities of frontend developers have spawned ever intricate constellations of interlocking JavaScript libraries and frameworks that specifically try to break out of how the Web originally was intended to work. Some things have become easier as specifications evolved a bit (e.g. CSS3). But at the end of the day, your browser still needs to download HTML, JS and CSS, parse all of that, execute and render it onto a canvas. Tailwind solves a particular issue: it tries to do away with the semantics of CSS and abstracts how presentation relates to the DOM structure in order to allow developers to focus on what they should be building: rich, highly interactive applications. Tailwind, however, isn't the right tool if you want to focus on building classic hypertext documents / websites. It's still totally valid to build things using the original web standards principles. It's not a tale of one or the other. It's a tale of both are valid business cases. I think that should be the core take away here.
• donbrae 6y ago
  I've not yet tried Tailwind, but I've found the utility classes in Bootstrap to be really useful. Over the years I've encountered a good number of instances on larger sites using traditional/global CSS where a change to a particular style ends up unintentionally affecting random stuff elsewhere. It's really irritating.
• harrisonjackson 6y ago
  I wanted to try tailwind on a new CRA app but they’re using a version of postcss that just came out and has a bunch of compatibility problems. > As of v2.0, Tailwind CSS depends on PostCSS 8. Because PostCSS 8 is only a few months old, many other tools in the ecosystem haven't updated yet There’s a workaround but it seemed like something I’d have to workaround more than it was worth. https://tailwindcss.com/docs/installation#post-css-7-compatibility-build https://tailwindcss.com/docs/installation#post-css-7-compati... https://tailwindcss.com/docs/guides/create-react-app https://tailwindcss.com/docs/guides/create-react-app
  • Jestar342 6y ago
    Use tailwindcss@compat (instead of tailwindcss) and that's it.
  • leerob 6y ago
    FYI: PostCSS 8 + Tailwind 2.0 is compatible with Next.js. You can run `npx create-next-app --example with-tailwind` to get started.
• AltruisticGapHN 6y ago
  This is why I don’t love Tailwind as much as I’d like: "It gives developers without a deep understanding of design the ability to build visually gorgeous, modern user interfaces." This is flat out a myth i widh people stop regurgitating. Look, unless you do css as your primary skill or really passionate about the more visual side of things (the "front of the frontend") then you don?t magically have the skills to use all kind of css layout te hniques to do precise and elegant UI, given the sketch / figma files. Heck most JS devs I’ve worked with barely understand how flex works. Best scenario they make somthing close to provided design, but not quite ... and crucially the finishing touches , the consistency , understanding of design principles that inform every layout you make is missing, so the end result is never quit3 what the designer provided with all kind of small but noticable imperfections like incorrect font sizes, une en spaces, missing white spaces, inconsistent vertical rhythm, relative sizes between icons and text etc etc. Yes, tailwind is good. As a standard utility framework it?s awesome but please stop prentending it turns JS devs magically into css/html experts.
  • sergiomattei 6y ago
    Yeah, that's a weird point. Tailwind is CSS. Writing Tailwind classes is writing CSS.
  • dmitriid 6y ago
    > stop prentending it turns JS devs magically into css/html experts. It doesn't turn them magically into experts. It gives them the tools to implement complex designs with relative ease, and it helps understand some deeper relationships and concepts in CSS. Speaking from own experience, YMMV and all that :)
    • robertoandred 6y ago
      Not if they don't understand what those tools do or how to use them.
      • aniforprez 6y ago
        I mean what's there to understand with tailwind? It's a bunch of CSS classes. You want to add a shadow to a button and the "shadow-md" class. Same with a ton of other things like border radius, text colour, padding etc
• deltron3030 6y ago
  I've "learned" CSS through Tailwind, was using it for a couple of years and I'm now able to build my own design systems in CSS. The reason I moved on is that I wanted a slightly more opinionated system and a different naming scheme, especially for colors.
• deepanchor 6y ago
  Tailwind is not for me, simply because I don't want to have to learn yet another DSL that may or may not be abandoned in the future. I understand this is a personal decision though, but I've been burned too many times by fads. My ideal CSS solution which doesn't seem to exist yet: - Be able to write plain old CSS in JS/TS directly within a React component's tags, with a JS object literal - Automatically generate atomic classes for each CSS rule (or block of rules) and have the system reuse those rules when the same styles are used elsewhere (no rule duplication means smaller bundle sizes for SSR, plus you get the semantic clarity of using plain CSS rules) - Compiled, with zero or near-zero runtime overhead and critical path extraction, all cacheable by the browser. I don't want a huge runtime just so that I can dynamically apply a background colour. The thing that comes closest to this is probably something like Linaria [1], but it relies on tagged template literals instead of object literals which means I can't use autocompletion. Their API for dynamic styling also relies on HTML data attributes, which is a little clunky. Stiches [2] is another interesting project, however adoption doesn't seem very high and it seems to create superfluous wrapper nodes which can cause performance degradation in large VDOM trees. There's also no mechanism to colocate styles within a component's tags. CSS Blocks [3] looks very promising also, but it doesn't allow co-location of styles with React components (you need to make a separate CSS file for each component). [1] https://github.com/callstack/linaria https://github.com/callstack/linaria [2] https://github.com/modulz/stitches https://github.com/modulz/stitches [3] https://github.com/linkedin/css-blocks https://github.com/linkedin/css-blocks
  • Kiro 6y ago
    Sounds like https://github.com/threepointone/glamor https://github.com/threepointone/glamor
  • city41 6y ago
    Facebook's stylex might also be interesting to you. No idea when (if ever) they will release it, but one thing it does is compile all the css down to atomic classes https://www.infoq.com/news/2020/04/facebook-cssinjs-react-conf-2019/ https://www.infoq.com/news/2020/04/facebook-cssinjs-react-co...
    • 6y ago
• midrus 6y ago
  I like tailwind, but I just used it for small side projects so far. Something I don't understand yet, is how you would use the "purgecss" feature in a large project or in the context of a company with several teams and a design system. For example, let's say we have a shared React components library, which has been built with tailwind. Should this shared library expose an already built and purged css file? Should each of our applications do its own purging? If so, how do I prevent the same m-1 to have two different values, one from the shared component library and another from my own application? If I have to add node_modules/my-library to the purge directories... Wouldn't that still leave styles for components I might not be importing in my application? Should I have a shared tailwind.config.js? These are the things that worry me about using tailwind in a larger context than a small/single project.
  • wishinghand 6y ago
    > Should I have a shared tailwind.config.js? Yes. > If I have to add node_modules/my-library to the purge directories I believe the point of Tailwind is that you don't have these outer libraries anymore. If you need a piece of UI implemented, you copy/paste the markup with the required classes added. There is no `modal` class that completely modifies specific nested HTML. And if it's a complete palette/padding change, then that happens in the config. > ...how do I prevent the same m-1 to have two different values, one from the shared component library and another from my own application? `m-1` should never have different values in different contexts of the same project, unless the set of classes suffixed by `-1` is adjusted as a whole (ie- letting users resize the UI outside of the built-in browser magnification). > how you would use the "purgecss" feature in a large project Purge should happen in deployment, not in development. That way if a class is added that has never been used before, it makes it into the site without issue.
    • midrus 6y ago
      > I believe the point of Tailwind is that you don't have these outer libraries anymore This is a total blocker for this use case then. As a member of one of multiple teams, I won't be able to convince anyone if we cannot have a shared, consistent "Datepicker", "AutocompleteInput", "TagInput", etc... Copy pasting these components is not an option for us.
• pictur 6y ago
  I don't understand why people treat it like a new bootstrap
  • porker 6y ago
    Because people (including me) want something that looks nice without doing any work. Bootstrap met that; Tailwind looks nicer than the Bootstrap output, and is very handy to use to tweak everything. I'm ambivalent about the approach. So far the bigger problem is it moves too fast - with Bootstrap I can work on projects over a couple of years and nothing much changes. With Tailwind, it's new stuff every couple of months :)
• porker 6y ago
  The one criticism it's valid to level at Tailwind is it doesn't play nicely with the CSS cascade. Take their plugin, https://tailwindcss.com/docs/typography-plugin https://tailwindcss.com/docs/typography-plugin. It lets you define text styles for regions (handy when you render Markdown into a div, for example). Imagine that you have HTML inside that div, with TailwindCSS classes applied. The specificity of the text styles for the region override the classes, which isn't what any end-user wants. The guys behind Tailwind acknowledge this, but there isn't a good solution for it. It's not a TailwindCSS-only problem; I've written plenty of CSS by hand which has this issue. But when choosing a framework based around element-level classes, this is a limitation which is important to keep in mind.
• Kiro 6y ago
  Tailwind sounds like a crazy and backwards concept. It looks insane and I used to feel the same way. However, after trying it and it clicked I can't imagine myself going back. It's one of those things you really need to try before you get it. Now I find all of these arguments against it like someone trying to convince me not to use syntax highlighting (http://www.linusakesson.net/programming/syntaxhighlighting/ http://www.linusakesson.net/programming/syntaxhighlighting/). I understand the reasoning but it's not something I would even consider.
• platz 6y ago
  What do you think of Tailwind vs Tachyons ?
  • 1_player 6y ago
    Last time I checked Tachyons (before Tailwind ever existed) there was no easy way of configuring it. The recommended way of, say, changing the stock colours was to do a find&replace in all of its css files. Not great. I moved to Tailwind when they released their first 0.x version because of its configurability.
• el_nahual 6y ago
  It is entirely possible to have a "semantic web" and tailwind at the same time. IMHO the perfect combination is BEM naming that is purely semantic combined with tailwind cruft that is purely visual. So you can end up with: <div class="profile_card a-bunch of-tailwinds classes"> <div class="profile_card__heading more-tailwinds-classes"> <h3 class="even-more-tailwinds-classes>Hello World</h3> </div> </div> I say this as someone who was revolted by the idea of tailwinds that has then seen the productivity of the team at work absolutely skyrocket after using it.
• brunoqc 6y ago
  Any alternative to Tailwind UI? I can't justify that price for hobby projects. I'm also not interested in material-ui which is becoming open-core.
  • stefanfisk 6y ago
    have a look at https://tailwindcomponents.com/ https://tailwindcomponents.com/
  • iKlsR 6y ago
    Checkout awesome tailwind[1], there are lots. tailwind.build, https://mertjf.github.io/tailblocks/ https://mertjf.github.io/tailblocks/ etc. Also hobby or not, the time saved is no joke. [1]: https://github.com/aniftyco/awesome-tailwindcss#ui-libraries-components--templates https://github.com/aniftyco/awesome-tailwindcss#ui-libraries...
• Neputys 6y ago
  A design question if I may. Site states "gives developers without a deep understanding of design the ability to build visually gorgeous, modern user interfaces". I really don't understand this statement. If you are bad/good at design, how does Tailwind change anything? Can anyone please describe what it is/feels like in comparison?
  • aidos 6y ago
    It kinda doesn’t, it’s nonsense really. They’ve got good examples though (see TailwindUI) and you can directly copy html which includes the css classes and you’ll get their design exactly.
  • jeffschofield 6y ago
    Tailwind is a system for design. It constrains what options the designer has to work with. This means both less chances to get things wrong and a smaller domain to wrap your head around. Tailwind is configured out of the box by some very excellent designers. The color palette, fonts, spacing, etc. are all crafted to work together harmoniously. You have to go out of your way to configure it poorly.
    • Neputys 6y ago
      So it's a _designed_ system then ;)
• seanwilson 6y ago
  > The key to Tailwind's popularity is the painstakingly constructed system of design tokens at the core of the framework. The system's carefully selected constraints give developers just the right guardrails. They make it obvious whether a choice is good or bad by offering only discrete steps. Can anyone comment more on this? As far as I see, there's still a big enough range of font sizes, padding/margin sizes, colours etc. that you still have to have an eye for design for the result to look pleasing. I've seen multiple landing pages made in Tailwind for example that don't look good. Bootstrap in comparison will have a really uniform look if you use the built-in components, but you won't be able to build something that looks as good as Tailwind.
• jaredcwhite 6y ago
  Oh my god, it just keeps on getting worse! Sure, let's take long strings of barely-scrutable utility classes and make them transform into CSS-in-JS statements under the hood via an overcomplicated build pipeline—WTAF. What I find so ironic is pure, native, truly-modern CSS with properties/variables, Flexbox, Grid, encapsulation via Shadow DOM if you want it, etc. has gotten so-o-o-o good, you barely even need a framework anymore. Stuff like Tailwind feels like it's solving the problems CSS might have had…er, ten years ago.
  • aidos 6y ago
    You're reading it wrong. Tailwind is pure css.
    • jaredcwhite 6y ago
      Oh really? Then why is markup written with the Tailwind build process in mind fundamentally incompatible with every other CSS framework/no framework? I've switched entire sites from one traditional framework (e.g. Foundation) to another (e.g. Bulma) in a matter of hours. With Tailwind, that'd be nearly impossible (and the @apply trick in external stylesheets actually makes that process worse, not better).
      • aidos 6y ago
        I'm confused by what you're saying. I've made Tailwind sites that did nothing more than include their single css file from a CDN. Zero build process. Do whatever makes you happy, I just don't want people who are passing by misunderstanding what Tailwind actually is.
        • jaredcwhite 6y ago
          OK, let's say you have a "styled box to hold a blurb of content" and in Framework A it's a single class: "callout". But in framework B, it's called "box". You can switch your element from "callout" to "box" and likely move on. But if your element is nothing more than twenty utility classes, good luck with that. Similarly, if you have a custom class in your stylesheet using normal CSS properties you wrote alongside Framework A, you can use that same custom class with Framework B with little to no modification because it's "real" CSS. If instead your custom class is twenty "@apply" statements using utility classes, good luck with that. So again I say: Tailwind is fundamentally incompatible with every other CSS framework/no framework.
• 8lall0 6y ago
  I still think that this kind of approach it's only a "problem moved" from CSS to inline HTML, which makes me mad because i still need to jump from HTML to CSS all the time, plus custom modifications can be painful with tons of overrides and "!important"s. Exactly like bootstrap. BEM (with none-to-few utility classes) was a game changer to me (even if far from perfect) and its most natural conseguence are web components. I'm loving the Bulma approach BTW.