All new Registrations are manually reviewed and approved, so a short delay after registration may occur before your account becomes active.
Bootstrap or Tailwind CSS?
raindog308
Administrator, Veteran
I'm working on a web site which I think our community will be interested in. Backend is my darling Laravel.
I'm an appalling designer who can barely spell CSS. I have never used Bootstrap but figured it was high time I learned if the site is to look like it was coded by an adult.
But then I read that Tailwind CSS is the new hotness.
The site is pretty simple (only a half-dozen pages) and does not need fancy CSS tricks or exotic designs, just something clean and responsive. It's just presenting data in a useful/searchable form and there are no graphics per se.
My perception is that Tailwind is a bit more complex to setup and use but more flexible overall, whereas Bootstrap is easy to use but can leave sites looking like other Bootstrap sites.
So...
Tailwind is Linux and Bootstrap is macOS.
Tailwind is a kit car and Bootstrap is a Toyota.
Tailwind is an AR-15 and Bootstrap is a Glock.
Which do you recommend given my needs?
Comments
bootstrap if looks arent important, it looks a bit outdated but much easier to setup a site compared to tailwind if you arent a frontend person
tailwind isnt the same as bootstrap where you can copy paste components, it just makes css easier, you wont have to write css seperate as you can just use class
basically with tailwind
becomes
but you can use stuff like daisyui, flowbite etc to get good looking components with tailwind too
btw tailwind isnt hard either (especially with its component libraries), you should go for it if you want to try it
Tailwind ofcourse, and it may look complex but that's just your first couple hours playing with it. After your first day it's super easy.
Tailwind + daisyui is my current go to, using npm with tailwind cli in watch mode makes the whole thing fairly simple to setup imo. Obviously not as simple as bootstrap but it's not as bad as crazy webpack configs either.
Tailwind looks much nicer and it's quite easy to use...
+1 for daisyui
if want to improve your css skill then learn tailwind .it's just like vanilla css
but if you want to make web as fast as soon possible ,then bootstrap
+1 for Tailwind; It is better in my opinion have used it for all my hobby projects.
How does it make a difference? It all becomes CSS at the end.
If you want to improve your CSS skills, write CSS!
Edit: just realised you mean "if you want to build your site quicker, go with Bootstrap" which I guess is fair if you no nothing about tailwind
bootstrap by default provides much more components like navbar, dropdown menu etc .So beginners use thats components for their shortcut instead of utilities class . but tailwind is utilitie based framework and class name is like regular css syntax .So developer have must knowledge about css . And tailwind make it easier
I've used Tailwind couple of times and I didn't like it.
It scales nicely only if you work in teams and on different projects at the same time.
For personal projects it completely destroys readability of the code and limits you a lot, especially if you like to play with CSS pseudoelements.
If you are not designer but you want good UI take a look at UI component library. I'm in Vue ecosystem and the best component library for Vue is https://primevue.org/
For React this looks quite nice https://nextui.org/
If you are interested in Tailwind CSS this video explains a lot about it
Ah right yeah, that's why tailwind with daisyui is so great
Reading your OP, I think both Tailwind and Bootstrap are WAY overkill for half-dozen pages as you describe them!
Just use one of the many minimalistic, elegant CSS frameworks out there... for example, Pico CSS is mentioned in the video above from @AXYZE -- if you watch that video from The Code Report, they mention it, it's great, I've used it and love its simplicity. https://picocss.com/
But there are others like Pico CSS, just search for "minimal CSS framework alternatives to Tailwind" and a bunch will pop up for you.
Don't over-complicate your life if you don't need to. Just stick with something simple, clean, and elegant, and focus on your back-end.
BTW, for something really simple, I also like Pure CSS - https://purecss.io/ and Picnic CSS - https://picnicss.com/ -- for the kinds of things you are describing, but there are plenty more options out there.
Good luck!
Bootstrap is nice, feels simple, pragmatic, sane defaults, the components are free while tailwind 1st party components are behind a paywall https://tailwindui.com/all-access
Bootstrap : For faster and quick results with lesser flexibility
Tailwind : Not that fast, still good result and greater flexibility.
For tailwind, add daisyui and you have something like bootstrap available yet you will still have flexibility of tailwind.
Both have learning curve to get good at them but tailwind will take little more to make it useful for you.
I have used Tailwind. It’s OK, as long as you remember Tailwind has a mobile first approach, not the other way around!
I really like Tailwind CSS. Haven't used in a while but DaisyUI and others make it easy to get a good looking website going. Really liked the workflow
Throwing in https://headlessui.com/ and https://merakiui.com/components
Both allow you to easily build/make use of some pretty nice components.
When I played a bit around with Tailwind CSS years ago:
https://nicolasloew.github.io/freetemplates/photographer-1/
aka
https://lowendtalk.com/discussion/173857/free-photographer-blogger-website-template-by-ympker
You can use Tailwind components from anywhere, or a UI kit, so it shouldn't be the deciding factor
Truth is, they're quite different
+1 for pico css, for any site of a only a few pages.