10 ms·

The rise and fall of Bootstrap and how Tailwind became the go-to CSS framework

ricardobeat 4y ago
Tailwind is such a terrible option to teach newcomers. It’s basically a vast CSS dialect, at this point it would be much more valuable to learn CSS itself.
- Eric_WVGG 4y ago
  It’s like teaching someone to read with emoji before getting them started on the alphabet.
  - treis 4y ago
    I'm not sure if you think that's a good thing or bad thing.
    - Eric_WVGG 4y ago
      :) bad I'm a hardliner against CSS frameworks. Any time you learn a CSS framework, you're picking up a tool that is going to break or be made obsolete in a couple years. Just learn CSS right the first time and you're good forever.
      - treis 4y ago
        The problem with that is it takes a long time to learn CSS well enough to make something that doesn't suck. That's why CSS frameworks are so popular. I can install bootstrap and make something not terrible pretty quickly. As someone new to programming to do the same in raw HTML and CSS is much much harder.
        Eric_WVGG 4y ago
        I understand how that was the case back in the 2k's before we had flexbox and CSS grid. It got better. Raw CSS is better, more logical, and easier than it's ever been. And raw HTML, of course, is a fundamental skill.
        kaba0 4y ago
        Yes, CSS layouting no longer sucks. But there are still endless foot guns which will cause a completely independent page of yours to change unexpectedly/fail to render correctly, and you won’t catch that for a long time. CSS is like global mutable state — it is too flexible to properly work when multiple people work together on it. Sure, I’m never against learning something from fundamentals, but I am on the opinion that it is increasingly the wrong default.
      - tifadg1 4y ago
        Your comment made me reconsider tailwind and give plain CSS a try - indeed learn once use forever is a good value proposition.
        Eric_WVGG 4y ago
        https://flexboxfroggy.com/ https://flexboxfroggy.com/ https://codepip.com/games/grid-garden/ https://codepip.com/games/grid-garden/ < more in footer
- phphphphp 4y ago
  Tailwind is less dialect, more subset. If someone has zero pre-existing knowledge of HTML/CSS then something like Tailwind is, in my opinion, a much better introduction to styling web pages because it focuses on one dimension: determining which rules you'd like to apply to which elements. With Tailwind, you're not caught up in understanding the relationship between CSS and HTML which includes challenges like inheritance. Another benefit of Tailwind for new learners is the exhaustive documentation which captures all of the rules and their relationship in one place: it's hard to overstate the value of being able to look at a single page to fully understand how you can pad an element. Certainly, there's limits to what you can achieve with Tailwind, but given it does expose a learner to the key principles of styling, it can then lead into an expanded learning of CSS if a user is interested in learning more -- you don't have to unlearn anything from Tailwind. I can absolutely understand why someone would dislike Tailwind, especially those with pre-existing knowledge of CSS for whom this is a totally different way of styling, but to describe it as problematic for newcomers seems ignorant of where the real challenges of learning CSS are.
  - DocSavage 4y ago
    I was trying Tailwind out a few weeks ago for a very simple static web page. I'm close to beginner with slight knowledge of CSS and HTML. It was surprising to me that all the styling disappeared from <a> tags, and it took some Googling just to see how to work around that. I wound up just going with Spectre to get an acceptable solution. The Tailwind docs seem more for its target audience and not pure beginners. Is there some resource to learn Tailwind in the manner you are suggesting?
    - phphphphp 4y ago
      I'm unsure what you mean by "...all the styling disappeared from <a> tags..." so I can't confidently provide insight. My first thought was perhaps you're referring to the special `visited` state of an `a` element. However, a `visited` link should not lose styling that it is applied to the element explicitly, so it's unlikely to be that -- part of the value of Tailwind is that it prevents this class of issue. Can you provide more insight into the specifics of the issue? I am happy to try and diagnose the issue -- even if you've moved on from Tailwind, you might get value out of understanding the issue! A GitHub repository link would be ideal, or some code in a Gist :) My gut feeling is that the issue you're describing has nothing to do with Tailwind. One of the challenges of learning any library or technology: you can experience an issue outside of the bounds of your understanding and misattribute the issue to the tool in question, even after decade(s) of experience, this'll still happen!
- deleted 4y ago
  [deleted]
- Terretta 4y ago
  > This is same as saying teach everyone how to code in C first. Why stop there? Just teach assembly. See my point? -- lvl102 reply to ricardobeat* I would argue there's something to that. Maybe hello world level Basic or Pascal or beginner Python first, but then assembly before C or Rust or even JavaScript. Something's been lost for the set of devs who don't know what higher languages are doing for them under the hood. I'd similarly agree with ricardobeat that CSS frameworks should come after CSS, and JS frameworks after JS. Rapidly ascending abstractions is great, if you take long enough to understand what they're built with, and some things will always be solved more simply by dropping back down a layer or three. * lvl102's comment was deleted: https://news.ycombinator.com/item?id=34764573 https://news.ycombinator.com/item?id=34764573
  - Dudeman112 4y ago
    Just to add to your point, I would like to say that I was, in fact, taught C and assembly and I wouldn't have had it any other way People that never go low level usually don't feel it in their guts how computers work. Which is OK most of the time, but it bites you back often enough that it's annoying having to explain the actual fundamentals when your colleagues haven't had that experience
    - kaba0 4y ago
      C programmers usually don’t feel it in their guts either how computers work. The amount of code transformations modern compilers do to make C performant is really mind-boggling. Though to add a more relevant point, I read a great saying on HN that a good developer knows their stack. A great one knows a layer beneath as well. (I usually butcher up quotes, sorry. It may have been more layers actually)
- mirthflat83 4y ago
  I do not agree with sentiments like these. It's almost as if saying Rust is a C dialect, so it would be much more valuable to learn C itself.
samwillis 4y ago
Comparing Bootstrap to Tailwind is comparing apples to oranges. They are both css "frameworks", but bootstrap is also a completely pre-made optioned design system. You don't really get that with Tailwind. The point of bootstrap is to get something that's 90% of what you want FAST. And it can easily be customised to build a design system for yourself. With tailwind you have more foundational design work to do up front. Personally I like the direction Bootstrap going, introducing utility classes, however there is more to do. My main wish is that they embrace web components for the JS side so that they are js framework agnostic. As with all these tools you should evaluate what's best for you and your team.
- rozenmd 4y ago
  Tailwind UI is basically that, and paying for it supports framework development.
  - ipaddr 4y ago
    Just use daisyui, prettier and free
    - ghqst 4y ago
      Personally I like the model and style of Tailwind UI better, and I am more productive than I was with Daisy UI. I also am much better at identifying sites made with Daisy UI than I am sites made with Tailwind UI, though there's probably other factors. (however, the button animations are usually a dead giveaway)
  - samwillis 4y ago
    Yes it is, but in a comparison of Bootstrap and Tailwind it's important not to conflate Tailwind and Tailwind UI, it confuses new users into thinking that can achieve the same as quickly with "pure" Tailwind.
- kayson 4y ago
  This is exactly why I use bootstrap for all of my projects (none of which are commercial). I don't really care what it looks like in the sense of layouts and color schemes, just that its consistent and easy to use. I've found that its also fairly easy to make small customizations when I need to.
skilled 4y ago
Tailwind is far from being the go-to framework in templating/themes and general CMS. It is for sure the go-to choice for teams and startups that can afford developers who specialize in app deployment, but other than that - Bootstrap is just fine and way more popular than Tailwind will ever be.
deleted 4y ago
[deleted]
ryaniscool 4y ago
I really dislike posts that attempt to present their opinion as a new sort of dogma. I argue that this is one of those because his intro specifically mentions teaching junior developers as a senior developer and code smells. Bootstrap and Tailwind have completely different strengths. I don't really see them as in competition with each other. His most valid point is how hard is to customize bootstrap theming options. The rest of his points are just a matter of taste. Luckily, if you google for "free bootstrap theme builder", there are several free sites that let you point and click your way to whatever fonts, colors, etc. you want in bootstrap then download a bootstrap.css file that is a drop-in replacement for the one that ships out of the box.
- kugelblitz 4y ago
  I don't even find it that hard to customize. I'm a backend dev at heart, but I develop my own niche side projects. I would use something like Symfony's Webpack Encore (but if I had to start over, I might use something lightweight like Parcel.js, I might migrate though), then let a "yarn watch" run in the background and it would re-compile in 2-3 seconds. While I'm building my product and doing marketing and making sure it is performant and up all the time, I don't have too much time to adjust the details of the menu dropdown in mobile view (or even figure out how to do it). Bootstrap also has utilities now (e.g. "py-md-3" for a large padding in the y axis - top and bottom - in larger screens) and that's good enough for me as a solo-dev for my own side project. Adjusting the border radius and the shadow in the "btn" class in the Sass already gives it a different feel.
- wonnage 4y ago
  "senior vs junior engineer" content always feels really cringeworthy. Particularly because self-proclaimed senior engineers tend to insist theirs is the One True Way. It's even worse when it devolves into "X framework/library sucks" linkbait. Guess what, the only guaranteed worse library is the one you wasted time ripping out perfectly good code to rewrite
duxup 4y ago
I like Bootstrap and I think the writer misinterprets what Bootstrap is for. I use it because: 1. It looks nice and users are familiar with it / it is a mature / proven system. 2. It’s fast. Drop in the CSS and I’m done fussing with CSS for +90% of situations. On with building the app.
brushfoot 4y ago
I appreciate that Tailwind is a force multiplier for certain teams, but let's not get carried away. There hasn't been a "fall" of Bootstrap. It's still very popular, widespread, and well understood. It's still being chosen for new projects. It depends on the team's needs. The article wavers between acknowledging that and only focusing on apps with dedicated designers: > Most of the time, you can tell easily if a website is running with Bootstrap or not, even if you’re not a seasoned developer. From my perspective, it doesn’t always sound like good news! Because when using it, websites tend to look the same. Which is often fine for internal or B2B. For B2C, a unique look may be more important. Many apps are LOB, internal dashboards, B2B SaaS. Often customizing the brand colors is enough. > With Tailwind, however, you can add your custom styles to almost anything. Why is that so important, you ask? First, because it allows you to design the website how you want it, this is great, especially for designers! I'd say it's mainly great for designers, although there'll be overlap with developers for certain use cases. With the kinds of projects I work on, I don't generally find myself needing that. When I do, editing the CSS is easier than bringing in Tailwind. > Look at easy it is! I don’t need to write custom CSS or Sass code. I just need to call the right classes to be able to use it. It’s really, really simple and yet powerful! This is a bit handwavy. It isn't easier to use Tailwind vs. custom CSS per se. Do away with custom CSS and you're now just writing custom Tailwind. That could be good or bad depending on your team and tooling.
city17 4y ago
I recently started using Tailwind and really enjoy how fast it makes building new UIs. However, I wonder how we'll view this in the future, when people have to actually go back into older projects using Tailwind and look at the jungle of classnames. At some point there can be so many classnames on different elements that you basically arrive back at the original problem of complex stylesheets where you don't know what is affecting what. Combine that with the fact that you need to have good knowledge to which CSS styles each classname refers, and I can see a lot of headaches down the line when someone has to fix the styles on a complex component.
gloryjulio 4y ago
Bootstrap is like Rails/Django and it's not leaving anytime soon. This kind of clickbait should be banned on hn
- deleted 4y ago
  [deleted]
irrational 4y ago
I’ve never used Bootstrap (which seems amazing since I’ve been a professional web developer for more than 22 years), but from what I know of it, I don’t think it is the same kind of thing as Tailwind. Is it?
- bdcravens 4y ago
  Not really. Bootstrap is more of a template, Tailwind is more of a DSL.
- ghqst 4y ago
  Bootstrap is a more complete "framework" that has style classes for preconfigured components, with some limited utility classes. Tailwind is all utility classes, with a well-designed system of ratios for things like padding.
rendall 4y ago
> On the contrary, React documentation isn’t great. They didn’t explain how to write efficient tests for a long time. Even with Hooks, I don’t think they give enough information. Most of the time, when I speak to developers about React Hooks, they don’t understand how they work. I'm not a huge React fan, but I cannot agree with this criticism. Its documentation is thorough and complete. It also introduced the frontend community to the idea of Functional Reactive Programming.
- ricardobeat 4y ago
  React is not FRP. It’s not truly reactive, functional components aren’t pure and have state - they are just sugar for OOP with mixins.
  - rendall 4y ago
    "Introduced" is the key word there. React with Redux was a gateway to FRP ideas for me, personally. Not mutating data, event streams, and pure functions in particular.
awb 4y ago
I don’t think we’ve reached a perfect CSS workflow yet. Bootstrap requires learning a new set of class names. Tailwind is like in-line styles with fewer characters. With both you can create an exponential number of similar looking, yet unique styles. It makes editing easy, but there’s no consistency constraints. I think the holy grail will be something that enforces consistency without memorizing a new, unique styling dialect.
TrueSlacker0 4y ago
That for example has to be the most complicated way I've ever seen to change the font on a bootstrap website. All you need to do is include the bootstrap library and then include your custom css file after. In your custom css file you override the font. No need to change it via sass. I don't think this developer understands basic css overrides. As a side note I use bootstrap and have never messed with the sass section. I chose bootstrap over tailwind for my personal projects purely because tailwind looks terrible to read. For example the card example they chose. Div class"card" vs figure class"puke lots of classes I will easily forget" . I think these two frameworks are aimed at entirely different types of people with entirely different goals.
bdcravens 4y ago
There's a disconnect between the title and the article. The article ends with this conclusion: "My impression is that Bootstrap is declining." The article is the author's work with both, which is fine, but the title implies an industry trend, which isn't really supported by the article. The article could have done this by pointing to statistical trends. However, I don't think the conclusion would then be supported. Just looking at NPM, they both are at their high points, suggesting it's not even a matter of competing. (I think Bootstrap has a larger amount of non-npm downloads, so that's not a perfect metric admittedly) https://npmtrends.com/bootstrap-vs-tailwindcss https://npmtrends.com/bootstrap-vs-tailwindcss
lampshades 4y ago
I started a new project a few days ago and, while initially wondering if I should pick up Tailwind, quickly decided to stick with Bootstrap. I'm not a designer, I hate writing front-end, I use Bootstrap for every project I create, so I see no reason to change.
whatever1 4y ago
Tailwinds + HTMX is the heaven of one-liners. Or hell, depending on the size of your team.
awinter-py 4y ago
tailwind card example is 3x as long might as well just use styles directly?
- icedchai 4y ago
  I was going to say this. Tailwind always appeared to be as an alternate way of writing inline styles. I focus mostly on the back end and CSS is always a source of frustration when dabbling in front end, so perhaps I am not the right target anyway.
- acdha 4y ago
  Tailwind always reminds me that there’s this weird respect pitfall where people treat CSS as too hard / primitive to learn and then spend considerably more time trying to avoid writing it than it would have taken to learn the tools of their chosen trade. Especially in the modern era, it’s not that hard – what takes time is building a custom design, and that’s a key point he’s missing in this article. If you want to look different than other Bootstrap sites, you can do the same customization work as in his Tailwind example. It’s also likely the case that thinking about how to name things is going to be better than just spraying utility classes long-term since that gets you to think about where things are and are not the same.
rendall 4y ago
> Let’s take an example. > This is how you write a card component with Bootstrap: <div class="card"...> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> ... > This is how you write a card component with Tailwind: <figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="..." ...> <div class="pt-6 md:p-8 text-center md:text-left space-y-4"> ... Let's be honest. All other considerations aside this does not make the case for Tailwind
- alex_suzuki 4y ago
  That was my exact same feeling after reading the example…
  - KrugerDunnings 4y ago
    I was sceptical about tailwind for a long time for precisely this reason, it does looks verbose, and that was until I used it. The tagline "design without leaving html" is true and where all the productivity comes from.
    - brianwawok 4y ago
      In Vue SFC, my scoped CSS is a few lines below the HTML. And my HTML doesn’t look terrible like this.
    - alex_suzuki 4y ago
      Fair enough, I never tried it. It’s just for someone who might be inclined to give it try (like myself), the example in TFA makes a really bad case.
    - mikeg8 4y ago
      I just watched a talk On why simplicity matters by Rich Hickey from Rails conf 2012, and I think this discussion is a good example of easy vs simple. Tailwind feels easy because it’s proximate, flexible, quick etc. but it makes the markup disgusting looking and, although I haven’t used it, I feel like it could easily lead to an inconsistent global design as each component can have their own styles that are isolated from the cascading/inheritance effects. It doesn’t feel simple to me… there is just something about all these inline styles (that’s exactly what these utility classes become) that really turns me off.
baguettefurnace 4y ago
confession: I still like to use jquery sometimes
gimliapp 4y ago
For anyone using Tailwind CSS, I would recommend Gimli Tailwind. It's a Chrome DevTools extension enabling smart tools for Tailwind CSS developers. https://chrome.google.com/webstore/detail/gimli-tailwind/fojckembkmaoehhmkiomebhkcengcljl https://chrome.google.com/webstore/detail/gimli-tailwind/foj...
eric-burel 4y ago
Rewrite Bootstrap as a Tailwind plugin, bring peace to the javascript and css ecosystem, get nobel prize
hknmtt 4y ago
i always preferred foundation css. nowadays i work with quasar that uses its own grid. never heard of tailwind.
waylandsmithers 4y ago
My own personal opinion is that Tailwind just looks better. Bootstrap is great for developers who want something instantly nicer than unstyled HTML, but Tailwind is more production-worthy.
jmull 4y ago
Meh to the article. Bootstrap and tailwind aren't really trying to do the same thing. e.g.,... One client wanted a dashboard for certain data... we chose a bootstrap template they liked and... we were done with many aspects of the visual design. The template looked good, was appropriate for the purpose, the client was happy, and development proceeded to the parts of the site they really needed to control. Another client wanted a custom design for an outward facing site. Designers and the customer worked together, iterated a bunch, and came up with a design they all loved... I implemented it with tailwind... straightforward for me and the client and designers loved it because it looked just like the design they worked so hard on. It would have been possible to use tailwind on the first site, but it would have taken longer, for no benefit to the client or project. It would have been possible to use bootstrap on the second site, but it would have taken longer (to customize) and/or would look more like bootstrap and less like the custom design in places where it just wasn't worth the effort to customize it.
tlrobinson 4y ago
Tailwind and “utility first” CSS is nice, but IMHO using magic string class names isn’t as nice as typesafe ways of styling like styled-components, Styled System, and Shopify’s Restyle. Full stack type safety, including styling, is where it’s at IMHO. Maybe there’s other ways of making CSS typesafe and supporting editor autocomplete, but why bother using CSS if you’re not even really using the cascade or non-trivial selectors?
miragecraft 4y ago
Tailwind, by itself, is more of a DSL than a framework.
exabrial 4y ago
Bootstrap's purpose is to make the default web pretty. Tailwind does not fit into that niche. Two different goals. Though reading Tailwind's website, people seem to think they're fighting some holy war against Bootstrap.... absolutely bizarre. And as another commenter pointed out, Tailwind is just as complex or more complex.
stefantalpalaru 4y ago
[dead]

Tailwind is such a terrible option to teach newcomers. It’s basically a vast CSS dialect, at this point it would be much more valuable to learn CSS itself.

Eric_WVGG 4y ago
It’s like teaching someone to read with emoji before getting them started on the alphabet.
- treis 4y ago
  I'm not sure if you think that's a good thing or bad thing.
  - Eric_WVGG 4y ago
    :) bad I'm a hardliner against CSS frameworks. Any time you learn a CSS framework, you're picking up a tool that is going to break or be made obsolete in a couple years. Just learn CSS right the first time and you're good forever.
    - treis 4y ago
      The problem with that is it takes a long time to learn CSS well enough to make something that doesn't suck. That's why CSS frameworks are so popular. I can install bootstrap and make something not terrible pretty quickly. As someone new to programming to do the same in raw HTML and CSS is much much harder.
      - Eric_WVGG 4y ago
        I understand how that was the case back in the 2k's before we had flexbox and CSS grid. It got better. Raw CSS is better, more logical, and easier than it's ever been. And raw HTML, of course, is a fundamental skill.
        kaba0 4y ago
        Yes, CSS layouting no longer sucks. But there are still endless foot guns which will cause a completely independent page of yours to change unexpectedly/fail to render correctly, and you won’t catch that for a long time. CSS is like global mutable state — it is too flexible to properly work when multiple people work together on it. Sure, I’m never against learning something from fundamentals, but I am on the opinion that it is increasingly the wrong default.
    - tifadg1 4y ago
      Your comment made me reconsider tailwind and give plain CSS a try - indeed learn once use forever is a good value proposition.
      - Eric_WVGG 4y ago
        https://flexboxfroggy.com/ https://flexboxfroggy.com/ https://codepip.com/games/grid-garden/ https://codepip.com/games/grid-garden/ < more in footer
phphphphp 4y ago
Tailwind is less dialect, more subset. If someone has zero pre-existing knowledge of HTML/CSS then something like Tailwind is, in my opinion, a much better introduction to styling web pages because it focuses on one dimension: determining which rules you'd like to apply to which elements. With Tailwind, you're not caught up in understanding the relationship between CSS and HTML which includes challenges like inheritance. Another benefit of Tailwind for new learners is the exhaustive documentation which captures all of the rules and their relationship in one place: it's hard to overstate the value of being able to look at a single page to fully understand how you can pad an element. Certainly, there's limits to what you can achieve with Tailwind, but given it does expose a learner to the key principles of styling, it can then lead into an expanded learning of CSS if a user is interested in learning more -- you don't have to unlearn anything from Tailwind. I can absolutely understand why someone would dislike Tailwind, especially those with pre-existing knowledge of CSS for whom this is a totally different way of styling, but to describe it as problematic for newcomers seems ignorant of where the real challenges of learning CSS are.
- DocSavage 4y ago
  I was trying Tailwind out a few weeks ago for a very simple static web page. I'm close to beginner with slight knowledge of CSS and HTML. It was surprising to me that all the styling disappeared from <a> tags, and it took some Googling just to see how to work around that. I wound up just going with Spectre to get an acceptable solution. The Tailwind docs seem more for its target audience and not pure beginners. Is there some resource to learn Tailwind in the manner you are suggesting?
  - phphphphp 4y ago
    I'm unsure what you mean by "...all the styling disappeared from <a> tags..." so I can't confidently provide insight. My first thought was perhaps you're referring to the special `visited` state of an `a` element. However, a `visited` link should not lose styling that it is applied to the element explicitly, so it's unlikely to be that -- part of the value of Tailwind is that it prevents this class of issue. Can you provide more insight into the specifics of the issue? I am happy to try and diagnose the issue -- even if you've moved on from Tailwind, you might get value out of understanding the issue! A GitHub repository link would be ideal, or some code in a Gist :) My gut feeling is that the issue you're describing has nothing to do with Tailwind. One of the challenges of learning any library or technology: you can experience an issue outside of the bounds of your understanding and misattribute the issue to the tool in question, even after decade(s) of experience, this'll still happen!
deleted 4y ago
[deleted]
Terretta 4y ago
> This is same as saying teach everyone how to code in C first. Why stop there? Just teach assembly. See my point? -- lvl102 reply to ricardobeat* I would argue there's something to that. Maybe hello world level Basic or Pascal or beginner Python first, but then assembly before C or Rust or even JavaScript. Something's been lost for the set of devs who don't know what higher languages are doing for them under the hood. I'd similarly agree with ricardobeat that CSS frameworks should come after CSS, and JS frameworks after JS. Rapidly ascending abstractions is great, if you take long enough to understand what they're built with, and some things will always be solved more simply by dropping back down a layer or three. * lvl102's comment was deleted: https://news.ycombinator.com/item?id=34764573 https://news.ycombinator.com/item?id=34764573
- Dudeman112 4y ago
  Just to add to your point, I would like to say that I was, in fact, taught C and assembly and I wouldn't have had it any other way People that never go low level usually don't feel it in their guts how computers work. Which is OK most of the time, but it bites you back often enough that it's annoying having to explain the actual fundamentals when your colleagues haven't had that experience
  - kaba0 4y ago
    C programmers usually don’t feel it in their guts either how computers work. The amount of code transformations modern compilers do to make C performant is really mind-boggling. Though to add a more relevant point, I read a great saying on HN that a good developer knows their stack. A great one knows a layer beneath as well. (I usually butcher up quotes, sorry. It may have been more layers actually)
mirthflat83 4y ago
I do not agree with sentiments like these. It's almost as if saying Rust is a C dialect, so it would be much more valuable to learn C itself.

samwillis 4y ago

Comparing Bootstrap to Tailwind is comparing apples to oranges. They are both css "frameworks", but bootstrap is also a completely pre-made optioned design system. You don't really get that with Tailwind. The point of bootstrap is to get something that's 90% of what you want FAST. And it can easily be customised to build a design system for yourself. With tailwind you have more foundational design work to do up front. Personally I like the direction Bootstrap going, introducing utility classes, however there is more to do. My main wish is that they embrace web components for the JS side so that they are js framework agnostic. As with all these tools you should evaluate what's best for you and your team.

rozenmd 4y ago
Tailwind UI is basically that, and paying for it supports framework development.
- ipaddr 4y ago
  Just use daisyui, prettier and free
  - ghqst 4y ago
    Personally I like the model and style of Tailwind UI better, and I am more productive than I was with Daisy UI. I also am much better at identifying sites made with Daisy UI than I am sites made with Tailwind UI, though there's probably other factors. (however, the button animations are usually a dead giveaway)
- samwillis 4y ago
  Yes it is, but in a comparison of Bootstrap and Tailwind it's important not to conflate Tailwind and Tailwind UI, it confuses new users into thinking that can achieve the same as quickly with "pure" Tailwind.
kayson 4y ago
This is exactly why I use bootstrap for all of my projects (none of which are commercial). I don't really care what it looks like in the sense of layouts and color schemes, just that its consistent and easy to use. I've found that its also fairly easy to make small customizations when I need to.

skilled 4y ago

Tailwind is far from being the go-to framework in templating/themes and general CMS. It is for sure the go-to choice for teams and startups that can afford developers who specialize in app deployment, but other than that - Bootstrap is just fine and way more popular than Tailwind will ever be.

deleted 4y ago

[deleted]

ryaniscool 4y ago

I really dislike posts that attempt to present their opinion as a new sort of dogma. I argue that this is one of those because his intro specifically mentions teaching junior developers as a senior developer and code smells. Bootstrap and Tailwind have completely different strengths. I don't really see them as in competition with each other. His most valid point is how hard is to customize bootstrap theming options. The rest of his points are just a matter of taste. Luckily, if you google for "free bootstrap theme builder", there are several free sites that let you point and click your way to whatever fonts, colors, etc. you want in bootstrap then download a bootstrap.css file that is a drop-in replacement for the one that ships out of the box.

kugelblitz 4y ago
I don't even find it that hard to customize. I'm a backend dev at heart, but I develop my own niche side projects. I would use something like Symfony's Webpack Encore (but if I had to start over, I might use something lightweight like Parcel.js, I might migrate though), then let a "yarn watch" run in the background and it would re-compile in 2-3 seconds. While I'm building my product and doing marketing and making sure it is performant and up all the time, I don't have too much time to adjust the details of the menu dropdown in mobile view (or even figure out how to do it). Bootstrap also has utilities now (e.g. "py-md-3" for a large padding in the y axis - top and bottom - in larger screens) and that's good enough for me as a solo-dev for my own side project. Adjusting the border radius and the shadow in the "btn" class in the Sass already gives it a different feel.
wonnage 4y ago
"senior vs junior engineer" content always feels really cringeworthy. Particularly because self-proclaimed senior engineers tend to insist theirs is the One True Way. It's even worse when it devolves into "X framework/library sucks" linkbait. Guess what, the only guaranteed worse library is the one you wasted time ripping out perfectly good code to rewrite

duxup 4y ago

I like Bootstrap and I think the writer misinterprets what Bootstrap is for. I use it because: 1. It looks nice and users are familiar with it / it is a mature / proven system. 2. It’s fast. Drop in the CSS and I’m done fussing with CSS for +90% of situations. On with building the app.

brushfoot 4y ago

I appreciate that Tailwind is a force multiplier for certain teams, but let's not get carried away. There hasn't been a "fall" of Bootstrap. It's still very popular, widespread, and well understood. It's still being chosen for new projects. It depends on the team's needs. The article wavers between acknowledging that and only focusing on apps with dedicated designers: > Most of the time, you can tell easily if a website is running with Bootstrap or not, even if you’re not a seasoned developer. From my perspective, it doesn’t always sound like good news! Because when using it, websites tend to look the same. Which is often fine for internal or B2B. For B2C, a unique look may be more important. Many apps are LOB, internal dashboards, B2B SaaS. Often customizing the brand colors is enough. > With Tailwind, however, you can add your custom styles to almost anything. Why is that so important, you ask? First, because it allows you to design the website how you want it, this is great, especially for designers! I'd say it's mainly great for designers, although there'll be overlap with developers for certain use cases. With the kinds of projects I work on, I don't generally find myself needing that. When I do, editing the CSS is easier than bringing in Tailwind. > Look at easy it is! I don’t need to write custom CSS or Sass code. I just need to call the right classes to be able to use it. It’s really, really simple and yet powerful! This is a bit handwavy. It isn't easier to use Tailwind vs. custom CSS per se. Do away with custom CSS and you're now just writing custom Tailwind. That could be good or bad depending on your team and tooling.

city17 4y ago

I recently started using Tailwind and really enjoy how fast it makes building new UIs. However, I wonder how we'll view this in the future, when people have to actually go back into older projects using Tailwind and look at the jungle of classnames. At some point there can be so many classnames on different elements that you basically arrive back at the original problem of complex stylesheets where you don't know what is affecting what. Combine that with the fact that you need to have good knowledge to which CSS styles each classname refers, and I can see a lot of headaches down the line when someone has to fix the styles on a complex component.

gloryjulio 4y ago

Bootstrap is like Rails/Django and it's not leaving anytime soon. This kind of clickbait should be banned on hn

deleted 4y ago
[deleted]

irrational 4y ago

I’ve never used Bootstrap (which seems amazing since I’ve been a professional web developer for more than 22 years), but from what I know of it, I don’t think it is the same kind of thing as Tailwind. Is it?

bdcravens 4y ago
Not really. Bootstrap is more of a template, Tailwind is more of a DSL.
ghqst 4y ago
Bootstrap is a more complete "framework" that has style classes for preconfigured components, with some limited utility classes. Tailwind is all utility classes, with a well-designed system of ratios for things like padding.

rendall 4y ago

> On the contrary, React documentation isn’t great. They didn’t explain how to write efficient tests for a long time. Even with Hooks, I don’t think they give enough information. Most of the time, when I speak to developers about React Hooks, they don’t understand how they work. I'm not a huge React fan, but I cannot agree with this criticism. Its documentation is thorough and complete. It also introduced the frontend community to the idea of Functional Reactive Programming.

ricardobeat 4y ago
React is not FRP. It’s not truly reactive, functional components aren’t pure and have state - they are just sugar for OOP with mixins.
- rendall 4y ago
  "Introduced" is the key word there. React with Redux was a gateway to FRP ideas for me, personally. Not mutating data, event streams, and pure functions in particular.

awb 4y ago

I don’t think we’ve reached a perfect CSS workflow yet. Bootstrap requires learning a new set of class names. Tailwind is like in-line styles with fewer characters. With both you can create an exponential number of similar looking, yet unique styles. It makes editing easy, but there’s no consistency constraints. I think the holy grail will be something that enforces consistency without memorizing a new, unique styling dialect.

TrueSlacker0 4y ago

That for example has to be the most complicated way I've ever seen to change the font on a bootstrap website. All you need to do is include the bootstrap library and then include your custom css file after. In your custom css file you override the font. No need to change it via sass. I don't think this developer understands basic css overrides. As a side note I use bootstrap and have never messed with the sass section. I chose bootstrap over tailwind for my personal projects purely because tailwind looks terrible to read. For example the card example they chose. Div class"card" vs figure class"puke lots of classes I will easily forget" . I think these two frameworks are aimed at entirely different types of people with entirely different goals.

bdcravens 4y ago

There's a disconnect between the title and the article. The article ends with this conclusion: "My impression is that Bootstrap is declining." The article is the author's work with both, which is fine, but the title implies an industry trend, which isn't really supported by the article. The article could have done this by pointing to statistical trends. However, I don't think the conclusion would then be supported. Just looking at NPM, they both are at their high points, suggesting it's not even a matter of competing. (I think Bootstrap has a larger amount of non-npm downloads, so that's not a perfect metric admittedly) https://npmtrends.com/bootstrap-vs-tailwindcss https://npmtrends.com/bootstrap-vs-tailwindcss

lampshades 4y ago

I started a new project a few days ago and, while initially wondering if I should pick up Tailwind, quickly decided to stick with Bootstrap. I'm not a designer, I hate writing front-end, I use Bootstrap for every project I create, so I see no reason to change.

whatever1 4y ago

Tailwinds + HTMX is the heaven of one-liners. Or hell, depending on the size of your team.

awinter-py 4y ago

tailwind card example is 3x as long might as well just use styles directly?

icedchai 4y ago
I was going to say this. Tailwind always appeared to be as an alternate way of writing inline styles. I focus mostly on the back end and CSS is always a source of frustration when dabbling in front end, so perhaps I am not the right target anyway.
acdha 4y ago
Tailwind always reminds me that there’s this weird respect pitfall where people treat CSS as too hard / primitive to learn and then spend considerably more time trying to avoid writing it than it would have taken to learn the tools of their chosen trade. Especially in the modern era, it’s not that hard – what takes time is building a custom design, and that’s a key point he’s missing in this article. If you want to look different than other Bootstrap sites, you can do the same customization work as in his Tailwind example. It’s also likely the case that thinking about how to name things is going to be better than just spraying utility classes long-term since that gets you to think about where things are and are not the same.

rendall 4y ago

> Let’s take an example. > This is how you write a card component with Bootstrap: <div class="card"...> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> ... > This is how you write a card component with Tailwind: <figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="..." ...> <div class="pt-6 md:p-8 text-center md:text-left space-y-4"> ... Let's be honest. All other considerations aside this does not make the case for Tailwind

alex_suzuki 4y ago
That was my exact same feeling after reading the example…
- KrugerDunnings 4y ago
  I was sceptical about tailwind for a long time for precisely this reason, it does looks verbose, and that was until I used it. The tagline "design without leaving html" is true and where all the productivity comes from.
  - brianwawok 4y ago
    In Vue SFC, my scoped CSS is a few lines below the HTML. And my HTML doesn’t look terrible like this.
  - alex_suzuki 4y ago
    Fair enough, I never tried it. It’s just for someone who might be inclined to give it try (like myself), the example in TFA makes a really bad case.
  - mikeg8 4y ago
    I just watched a talk On why simplicity matters by Rich Hickey from Rails conf 2012, and I think this discussion is a good example of easy vs simple. Tailwind feels easy because it’s proximate, flexible, quick etc. but it makes the markup disgusting looking and, although I haven’t used it, I feel like it could easily lead to an inconsistent global design as each component can have their own styles that are isolated from the cascading/inheritance effects. It doesn’t feel simple to me… there is just something about all these inline styles (that’s exactly what these utility classes become) that really turns me off.

baguettefurnace 4y ago

confession: I still like to use jquery sometimes

gimliapp 4y ago

For anyone using Tailwind CSS, I would recommend Gimli Tailwind. It's a Chrome DevTools extension enabling smart tools for Tailwind CSS developers. https://chrome.google.com/webstore/detail/gimli-tailwind/fojckembkmaoehhmkiomebhkcengcljl https://chrome.google.com/webstore/detail/gimli-tailwind/foj...

eric-burel 4y ago

Rewrite Bootstrap as a Tailwind plugin, bring peace to the javascript and css ecosystem, get nobel prize

hknmtt 4y ago

i always preferred foundation css. nowadays i work with quasar that uses its own grid. never heard of tailwind.

waylandsmithers 4y ago

My own personal opinion is that Tailwind just looks better. Bootstrap is great for developers who want something instantly nicer than unstyled HTML, but Tailwind is more production-worthy.

jmull 4y ago

Meh to the article. Bootstrap and tailwind aren't really trying to do the same thing. e.g.,... One client wanted a dashboard for certain data... we chose a bootstrap template they liked and... we were done with many aspects of the visual design. The template looked good, was appropriate for the purpose, the client was happy, and development proceeded to the parts of the site they really needed to control. Another client wanted a custom design for an outward facing site. Designers and the customer worked together, iterated a bunch, and came up with a design they all loved... I implemented it with tailwind... straightforward for me and the client and designers loved it because it looked just like the design they worked so hard on. It would have been possible to use tailwind on the first site, but it would have taken longer, for no benefit to the client or project. It would have been possible to use bootstrap on the second site, but it would have taken longer (to customize) and/or would look more like bootstrap and less like the custom design in places where it just wasn't worth the effort to customize it.

tlrobinson 4y ago

Tailwind and “utility first” CSS is nice, but IMHO using magic string class names isn’t as nice as typesafe ways of styling like styled-components, Styled System, and Shopify’s Restyle. Full stack type safety, including styling, is where it’s at IMHO. Maybe there’s other ways of making CSS typesafe and supporting editor autocomplete, but why bother using CSS if you’re not even really using the cascade or non-trivial selectors?

miragecraft 4y ago

Tailwind, by itself, is more of a DSL than a framework.

exabrial 4y ago

Bootstrap's purpose is to make the default web pretty. Tailwind does not fit into that niche. Two different goals. Though reading Tailwind's website, people seem to think they're fighting some holy war against Bootstrap.... absolutely bizarre. And as another commenter pointed out, Tailwind is just as complex or more complex.

stefantalpalaru 4y ago

[dead]