Jump to content

Frontend : Bootstrap vs TailwindCSS - Which is your favourite and why ?


Recommended Posts

Hi all,

just another topic over the beer. I started using Bootstrap from the version 3 but really loved it. BS 5 seems really powerful but I cannot ignore flashy trend of  TailwindCSS. I tried to learn it on a new project but I am not able to make any progress so far. Every one saying TailwindCSS is super easy and whatnot.  What are your thoughts on these ?  which one you like and why ? 

Link to comment
Share on other sites

I've been using Bootstrap 4 all the time, but I didn't want to take the step to version 5. I'm making my first, successful steps with Tailwind and I'm currently very satisfied. But you have to learn a lot of new things, because it's still a bit more complicated than Bootstrap, but you also have a lot more freedom.

I also use Htmx and Alpine.JS with TailwindCSS 😉 

many nice new things 😉 

  • Like 2
Link to comment
Share on other sites

I'm with you in that I like the look of Tailwind but I've never quite found the right project to justify using it.

These days I rarely use a framework at all. Support for flexbox and grid has meant that a lot of the advantages of using a framework don't apply any more. Browsers are a lot more consistent these days as well, so there's not as much need for polyfills and resets and vendor specific tweaks that might have been baked in to a framework.

My starting point for a project is a single CSS file that has some minimal styles and utilities in that I'm pretty sure I'll always need. Originally that was based on Wing css but I've tweaked and added to it over the years.

I then have other css files for components that I've used over the years - so if I need an off screen menu for example I have one that I can reuse and adapt.

The same applies to javascript; In the old days (a couple of years ago anyway) I would have just included jQuery by default in a project but now I just have a few native javascript functions I can include when I need to.

Most of the work we do is pretty bespoke stuff so this works better for us. I imagine that if you were doing lots of sites that were fairly similar then a framework might be useful.

One situation we would use a framework for is when we need to do an admin interface (we a did a great project that had a SMS bot the client could manage for example). For that we've used ModularAdmin which is based on Bootstrap 4 (and which hasn't been updated for a few years so probably not that useful a link).

Now I'm essentially a solo dev, so bespoke code is easy to manage. If you're part of a larger team (or looking for a job) then I bet having decent documentation and consistency is much more important so learning a framework is probably a smart move.

  • Like 4
Link to comment
Share on other sites


On 10/6/2021 at 8:17 PM, millipedia said:

These days I rarely use a framework at all.

So with you on that! Took time to actually learn CSS, and while it's constantly changing, decided to to lose the "Sara Lee" approach - layer upon layer upon layer. Spent far too much time overriding framework defaults instead of actually doing stuff. Now I use SCSS to combine global resets, default classes, colours etc then add small per template or component stylesheets. Same for any per template JS.

In the supply-chain world this is referred to as "just in time" vs "just in case"

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...

I've been using Bootstrap since 3.x compiling my own customised version from less with 3.x and then SCSS with 4.x  I'm yet to jump to 5.x

I've taken a look at Tailwind a couple of times, and the good thing is it seems to produce very small CSS, but the process of getting set up to compile a minimised version seems to be more complex and requires more tools than with Bootstrap. That's a one off I guess, and once you're set up then presumably it's straightforward.

I do like Bootstrap's components. I'm a developer, not a designer, and when a client asks me "What can you make my website look like?" it's really handy to be able to say, "Here are a set of components you can pick from. I can change the colour, size and position any way you like."

That's way easier than trying to explain the intricacies of CSS and that technically, I could probably make their website look like just about anything from dog's vomit to the crown jewels.


  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By longtom
      I'm creating this site where a 'motherpage' renders all subpages.  I switched on frontend editing to make editing as easy as possible to end-users. 
      I'm stuck on adding images to the subpages.  The frontend editor suggests to add images to the motherpage (that has no images field on it, nor should it), so it asks for another page to add the images to/from. 
      Is there a way to make the frontend-editor context aware so that it looks for images in the correct subpage? 
      I already tried the 'type C' approach and added <edit field="body" page="id">, but that doesn't seem to do the trick. 
    • By rushy
      Hi all
      Continuing my first project where I am creating and manipulating stuff from the frontend. Till now I've always added things like images from the backend, but in this project I need to add and move images from a frontend control. This is a photo album where images are stored in albums, each album being a page containing a Pageimages array in the usual way. So what I want to know is how do I move an image from one album (page) to another in the frontend? I just need some guidance on how to approach this.  I suppose I need to do a copy and delete - but how do I copy an image or images from one page to another? What function should I use to create a new image on an existing page? I include a code snippet from the server side of my delete image request and it works fine. I'd like to implement something similar for a move and upload new image request. 
      Many thanks for any help. Paul 
      <?php namespace ProcessWire; // sanitize inputs as 1-line text $action = $sanitizer->text($input->post('action')); $instr = $sanitizer->text($input->post('input')); $sel = $input->post('selected'); // Expect JSON for image selected image list $selected = json_decode($sel); $nosel = count($selected); $response = array(); // for building JSON response switch($action) { // delete selected images case 'delete': $out = "<p>Deleted $nosel image(s)</p>"; foreach($selected as $item){ $album = $pages->get($item->album); $album->of(false); $out .= "<p>Image {$item->file} from album {$album->title}</p>"; $album->images->delete($item->file); $album->of(true); } $out .= saveUpdatedAlbums($pages, $selected); // add the response message for the delete $response['message'] = $out; break; ...... // save any album that had an image deleted function saveUpdatedAlbums($pages, $selected) { $cur = ''; $out = ''; foreach($selected as $item){ $album = $pages->get($item->album); if($album->id != $cur) { $album->of(false); $album->save('images'); $album->of(true); $cur = $album->id; $out .= "<p>Updated album {$pages->get($cur)->title}</p>"; } } return $out; }  
    • By hellomoto
      I can't tell what's wrong; my local development version appears just fine, but I copy over the site files and db online and the homepage content is not being contained. This is what it should look like (same site in the same browser, running on my localhost): http://imgur.com/UFZFzrd
      What could be the problem here? Sorry to bring up something so irrelevant to PW here, I just know that you all are a valiant and helpful group, and no one on StackExchange seems to even know what I'm talking about.
      Thanks a lot.
    • By rushy
      Bit of a newbie type question, even though I've been using PW for quite a while, I've not had to manipulate assets from the front end before.  I now have a need to update image properties from the front end and I'm trying to update an image description and tags when clicking on a link. I get the selected image and for example I can delete it with the code below. But I am missing some basic understanding when updating image description field as nothing happens, no errors but the description field remains empty. Any idea what steps I am missing? Many thanks. 
      // how to update image description? $al = $pages->get($album); $pgfile = $al->images->getFile($file); $al->of(false); $pgfile->description = "Test description"; $al->save(); // to delete an image - this works $al->of(false); $al->images->delete($file); $al->save();  
    • By NorbertH
      When saving a page with the "order" template in the backend  IftRunner is nice to me and sends the order via page action into my accounting software. 
      When saving "order" in a frontend page it does nothing.   So i certainly missing something . Any ideas? 
  • Create New...