6 ms·

Ways in which Tailwind CSS is a better choice than Twitter Bootstrap

25 points by rhuru 3y ago

KorematsuFredt 3y ago
I think I like how the article tells you that this comparison is basically like comparing Legos with IKEA furniture. But in reality I think more apt comparison is getting wood and tools from HomeDepot vs buying make your furniture kit from IKEA. Writing plain old CSS would be like go to forest and cut down your own tree. People who are dissing on TailwindCSS come across as more emotional than sensible. Tailwind is a far better fit for any large application that needs to be unique in its design which is basically any major website today. An e-commerce site today does not need 10 different types of buttons but it rather needs 5 buttons and one button that completely stands out. Tailwind has gotten the complexity out of writing CSS to do all the common things yourself but it has not created and opinionated design philosophy either. It is not meant for your weekend project, but I do think nearly every large site will eventually move to a more Tailwind like framework.
kennethh 3y ago
Bootstrap is no longer associated with Twitter. They used to be called Twitter Bootstrap since the people who made it worked at Twitter but it is almost 10 years since the quited and started for themself.
anon7331 3y ago
I gave Tailwind a shot but ultimately settled with Bootstrap. It wasn't because Tailwind was bad-- I thought it provided a lot of value. The issues that ultimately made me switch to Bootstrap were: 1. I don't need a build tool for JS/CSS, so introducing one _just_ for Tailwind was a pain. 2. In order to really take advantage of Tailwind and speed up development, you need the Tailwind vim plugin (which doesn't work in vanilla Vim, only Neovim from what I can tell.. I don't use Neovim). 3. The html gets bloated pretty bad and it does get hard to read.. especially without the extra tooling like the Tailwind plugin to sort class names, auto complete Tailwind class names, etc.
rhuru 3y ago
Based on the comments by other folks here, looks like lot of folks are using Tailwind incorrectly and then blame it for not being the right tool. Tailwind classes might be verbose but you are not supposed to use them directly in the markup. Always create wrapper classes that are specific to your design and simply apply the utility classes in them. In short make your own Bootstrap like framework using Tailwind's primitives. Tailwind has made this trivially simple.
- aleksiy123 3y ago
  This is specifically what they tell you not to do. https://tailwindcss.com/docs/reusing-styles https://tailwindcss.com/docs/reusing-styles Their advice is to use templating (components, partials, loops) to abstract and I agree. It ends up working a lot better than abstracting your CSS.
  - rhuru 3y ago
    I am sorry I should have written it better. This is how I abstract away from tailwinds utility litter. https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply https://tailwindcss.com/docs/reusing-styles#extracting-class...
    - aleksiy123 3y ago
      Further down in the link they do talk about not doing this for everything. Only for small things when templates are too much. "Whatever you do, don’t use @apply just to make things look “cleaner”"
      - rhuru 3y ago
        It is in general good CSS advice not just specific to apply.
- wishinghand 3y ago
  This is just CSS classes with more steps.
PaulHoule 3y ago
If you're going to use Tailwind why not just use the style attribute and just give up on CSS classes?
- jasmataz 3y ago
  To me the biggest reason is selector specificity, especially when it comes to authoring component libraries. Inline styles written with the style attribute are impossible to override without using !important, which only exacerbates the specificity problem.
- 7952 3y ago
  It is easier to find how to do things using tailwind documentation than with native CSS documentation. As someone who is not very good at CSS it makes my life easier.
- mierz00 3y ago
  One reason is that you can’t do media queries in a style attribute.
- 1123581321 3y ago
  Utility classes still encapsulate some complexity and responsive styling. They also generate colors from the global palette. Finally, they’re less verbose without losing much meaningful information.
- Rodeoclash 3y ago
  Tailwind does a better job at enforcing a set of standards in the codebase. Specifically around things like spacing, text sizing etc. This doesn't preclude enforcing it directly in the CSS files, but it does make it a lot easier.
- deprecative 3y ago
  People make a bunch of excuses for Tailwind. If you're going to write CSS just write CSS. Stop coping.
  - 3y ago
3cats-in-a-coat 3y ago
If you find yourself at a point in your life where you're selecting between Tailwind and Bootstrap, you need to stop and think hard when did things go so wrong.
- slimebot80 3y ago
  Under Reason 2: "For Tailwind you will often end up writing something like following" - I think they meant "For bootstrap.."?
  - rhuru 3y ago
    No. Tailwind does not give you any button specific css, you are supposed to write it yourself. Where as bootstrap comes with .btn classes. So I think the article is correct.
- Karishma1234 3y ago
  Sometimes I wonder, when did HN went so wrong and is full of comments that do not further the discussion but purely result into flamewar and ridiculous homilies.
  - 3cats-in-a-coat 3y ago
    Most of my comments are serious. But asking me to take Tailwind seriously as a CSS framework is like asking me to take Flat Earth Society seriously in a science forum. Everything has a threshold where you cross from the plausible to the absurd. To me there's a non-zero chance Tailwind is (or at least started as) a parody of bad software design. We just had a submission the other day that "the JavaScript ecosystem has a talent problem". It's a real problem. CSS's very goal is to separate styles into reusable, readable rules, and here comes Tailwind, inlining them into an endless combination of increasingly obscure and indecipherable abbreviations. Are you not entertained? It seems deliberate.
  - ChainOfFools 3y ago
    I've only been here since 2015 so I'm not bringing much more than an early middle-aged viewpoint, in HN years. But I noticed a big uptick of this starting to happen when cryptocurrency people began proselytizing aggressively around 2016, 2017, so much so that I actually made an account to push back on it in some small way (my handle was originally blockchainoffools, but the hn handle limits knocked my block off) having been only a lurker for a couple years prior. Then it seem like the S/N regained some of its old strength for a bit. However the noise (and the halo of meta-noise such as this very comment) surged again to a degree that dwarfs the intensity of the crypto invasion, when first twitter and then reddit announced the end of free 3rd party API access.
jimmychoozyx 3y ago
I love the simplicity of the Bulma CSS framework. And its pretty easy to find SASS/SCSS versions of it.

25 points by rhuru 3y ago

I think I like how the article tells you that this comparison is basically like comparing Legos with IKEA furniture. But in reality I think more apt comparison is getting wood and tools from HomeDepot vs buying make your furniture kit from IKEA. Writing plain old CSS would be like go to forest and cut down your own tree. People who are dissing on TailwindCSS come across as more emotional than sensible. Tailwind is a far better fit for any large application that needs to be unique in its design which is basically any major website today. An e-commerce site today does not need 10 different types of buttons but it rather needs 5 buttons and one button that completely stands out. Tailwind has gotten the complexity out of writing CSS to do all the common things yourself but it has not created and opinionated design philosophy either. It is not meant for your weekend project, but I do think nearly every large site will eventually move to a more Tailwind like framework.

kennethh 3y ago

Bootstrap is no longer associated with Twitter. They used to be called Twitter Bootstrap since the people who made it worked at Twitter but it is almost 10 years since the quited and started for themself.

anon7331 3y ago

I gave Tailwind a shot but ultimately settled with Bootstrap. It wasn't because Tailwind was bad-- I thought it provided a lot of value. The issues that ultimately made me switch to Bootstrap were: 1. I don't need a build tool for JS/CSS, so introducing one _just_ for Tailwind was a pain. 2. In order to really take advantage of Tailwind and speed up development, you need the Tailwind vim plugin (which doesn't work in vanilla Vim, only Neovim from what I can tell.. I don't use Neovim). 3. The html gets bloated pretty bad and it does get hard to read.. especially without the extra tooling like the Tailwind plugin to sort class names, auto complete Tailwind class names, etc.

rhuru 3y ago

Based on the comments by other folks here, looks like lot of folks are using Tailwind incorrectly and then blame it for not being the right tool. Tailwind classes might be verbose but you are not supposed to use them directly in the markup. Always create wrapper classes that are specific to your design and simply apply the utility classes in them. In short make your own Bootstrap like framework using Tailwind's primitives. Tailwind has made this trivially simple.

aleksiy123 3y ago
This is specifically what they tell you not to do. https://tailwindcss.com/docs/reusing-styles https://tailwindcss.com/docs/reusing-styles Their advice is to use templating (components, partials, loops) to abstract and I agree. It ends up working a lot better than abstracting your CSS.
- rhuru 3y ago
  I am sorry I should have written it better. This is how I abstract away from tailwinds utility litter. https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply https://tailwindcss.com/docs/reusing-styles#extracting-class...
  - aleksiy123 3y ago
    Further down in the link they do talk about not doing this for everything. Only for small things when templates are too much. "Whatever you do, don’t use @apply just to make things look “cleaner”"
    - rhuru 3y ago
      It is in general good CSS advice not just specific to apply.
wishinghand 3y ago
This is just CSS classes with more steps.

PaulHoule 3y ago

If you're going to use Tailwind why not just use the style attribute and just give up on CSS classes?

jasmataz 3y ago
To me the biggest reason is selector specificity, especially when it comes to authoring component libraries. Inline styles written with the style attribute are impossible to override without using !important, which only exacerbates the specificity problem.
7952 3y ago
It is easier to find how to do things using tailwind documentation than with native CSS documentation. As someone who is not very good at CSS it makes my life easier.
mierz00 3y ago
One reason is that you can’t do media queries in a style attribute.
1123581321 3y ago
Utility classes still encapsulate some complexity and responsive styling. They also generate colors from the global palette. Finally, they’re less verbose without losing much meaningful information.
Rodeoclash 3y ago
Tailwind does a better job at enforcing a set of standards in the codebase. Specifically around things like spacing, text sizing etc. This doesn't preclude enforcing it directly in the CSS files, but it does make it a lot easier.
deprecative 3y ago
People make a bunch of excuses for Tailwind. If you're going to write CSS just write CSS. Stop coping.
- 3y ago

3cats-in-a-coat 3y ago

If you find yourself at a point in your life where you're selecting between Tailwind and Bootstrap, you need to stop and think hard when did things go so wrong.

slimebot80 3y ago
Under Reason 2: "For Tailwind you will often end up writing something like following" - I think they meant "For bootstrap.."?
- rhuru 3y ago
  No. Tailwind does not give you any button specific css, you are supposed to write it yourself. Where as bootstrap comes with .btn classes. So I think the article is correct.
Karishma1234 3y ago
Sometimes I wonder, when did HN went so wrong and is full of comments that do not further the discussion but purely result into flamewar and ridiculous homilies.
- 3cats-in-a-coat 3y ago
  Most of my comments are serious. But asking me to take Tailwind seriously as a CSS framework is like asking me to take Flat Earth Society seriously in a science forum. Everything has a threshold where you cross from the plausible to the absurd. To me there's a non-zero chance Tailwind is (or at least started as) a parody of bad software design. We just had a submission the other day that "the JavaScript ecosystem has a talent problem". It's a real problem. CSS's very goal is to separate styles into reusable, readable rules, and here comes Tailwind, inlining them into an endless combination of increasingly obscure and indecipherable abbreviations. Are you not entertained? It seems deliberate.
- ChainOfFools 3y ago
  I've only been here since 2015 so I'm not bringing much more than an early middle-aged viewpoint, in HN years. But I noticed a big uptick of this starting to happen when cryptocurrency people began proselytizing aggressively around 2016, 2017, so much so that I actually made an account to push back on it in some small way (my handle was originally blockchainoffools, but the hn handle limits knocked my block off) having been only a lurker for a couple years prior. Then it seem like the S/N regained some of its old strength for a bit. However the noise (and the halo of meta-noise such as this very comment) surged again to a degree that dwarfs the intensity of the crypto invasion, when first twitter and then reddit announced the end of free 3rd party API access.

jimmychoozyx 3y ago

I love the simplicity of the Bulma CSS framework. And its pretty easy to find SASS/SCSS versions of it.