DEV Community

Cover image for Why make a Bootstrapy Website if there's TailwindCss!
jobpick.in
jobpick.in

Posted on

Why make a Bootstrapy Website if there's TailwindCss!

How Tailwind Is Different From Other Frameworks?

Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that it's not a UI kit.

Most UI frameworks like Bootstrap, Material UI, Bulma etc. have pre-designed UI components like cards, buttons, navbars, alerts. You use those components and create designs on top of those components.

But in Tailwind CSS, you don't get a pre-designed set of components. You get utility-classes. You can combine those to create your layout and components.
Because Tailwind is so low-level, it never encourages you to design the same site twice. Even with the same color palette and sizing scale, it's easy to build the same component with a completely different look in the next project.

It doesn't have a default theme, and there are no built-in UI components.

frameworks

On the flip side, it also has no opinion about how your site should look and doesn't impose design decisions that you have to fight to undo.

If you're looking for a framework that comes with a menu of predesigned widgets to build your site with, Tailwind might not be the right framework for you.

But if you want a huge head start implementing a custom design with its own identity, Tailwind might be just what you're looking for.

Utility-first

Creating a framework for building custom UIs means you can't provide abstractions at the usual level of buttons, forms, cards, navbars, etc.

Instead, Tailwind provides highly composable, low-level utility classes that make it easy to build complex user interfaces without encouraging any two sites to look the same.

Responsive
If you use Tailwind CSS, you don't need to write custom styles for handling responsiveness for different screen sizes. You can use Tailwind's responsive utilities to handle it easily.

Frameworks like Bootstrap have one major disadvantage. Due to increased growth and usage, they became too big and offer less control over their styles. Learning frameworks like Bootstrap has become increasingly challenging because developers have to learn hundreds of classes.

Tailwind and bootstrap both have their place in the development landscape, but you’re better off to learn raw CSS as a fundamental skill first, then try and use both of the frameworks and make your decisions in a position of understanding.

So that was it from this articleπŸ˜‡.Hope you find this article helpful. Please share your thoughts/comments/feedback either in comment section or you can DM us at twiter , jobpick.in

Discussion (33)

Collapse
cenacr007_harsh profile image
KUMAR HARSH

In my opinion beginners are better off learning Bootstrap as it's so easy to get things done and that is precisely what beginners need instead of getting stuck and banging thier heads on the walls reading docs to figure everything out, and later on make the switch to Tailwind.

Collapse
owenmelbz profile image
Owen Melbourne

Yes/No - Beginner whats?

Beginner frontend developers or designers? Beginner backend developers?

If you're a beginner who really wants to understand the fundamentals of the web and get to really excel, then learning CSS first is vastly more helpful in the long run. Learn to walk before you can run :P

Collapse
cenacr007_harsh profile image
KUMAR HARSH

Well CSS first is obvious isn't it, I was picking Bootstrap over Tailwind for beginners and and beginners in Frontend Development obviously.

Thread Thread
owenmelbz profile image
Owen Melbourne

Obviously Frontend? Personally it would be more obvious for a backend developer to use it as it means they don't need to think about CSS at all to achieve their backend goals :P It's not always obvious for everybody, and we have a duty to share accurate and helpful information to others by being clear with our words!

Collapse
jobpick profile image
jobpick.in Author

For beginner's, bootstrap is always great way to start and as developer they should explore the framework world!

Collapse
gukosowa profile image
gukosowa

I learned my wife to build a page with tailwind in one day without background knowledge of html and css. We use bootstrap in work, but still I have no idea how to get things done like in tailwind, as tailwind makes it really easy to guess what you want

Collapse
gomandev profile image
Gomandev

In my opinion, tailwind is easier than bootstrap.

Collapse
cenacr007_harsh profile image
KUMAR HARSH

To each his own.

Collapse
anstroy profile image
Aus G

I get what you are saying, you are talking about beginner frontend devs. I mean, I won't be applying to any frontend jobs, by only knowing bootstrap 😬

Collapse
cenacr007_harsh profile image
KUMAR HARSH

I won't as well πŸ˜‚.

Collapse
0dp profile image
0dp

Genuinely interested in knowing exactly what you are trying to accomplish by this post?

If you want to learn css and html, learn it!
Advicing people to start out with a paradigm is never a good idea imo.

Secondly, bootstrap has utility classes and can be used 'exactly' the same way in conjunction with the grid system. Only importing those dependencies. If you then need some components you just import those.

That said, don't you have to pay money for the tailwind components?

Collapse
itscasey profile image
Casey πŸ’Ž

Great point!

Tailwind is free, components are not.

Collapse
hasnaindev profile image
Muhammad Hasnain

Because Bootstrap is much better suited for prototypes or backend engineers. I mean TailwindCSS is just a utility based frameworks. We're adding and removing margins, changing layouts, colors etc. That's is a much better choice if I'm a designer.

Collapse
darkwiiplayer profile image
DarkWiiPlayer

But at that point, why not just use CSS? The main appeal of these frameworks is usually "I'm a programmer, I don't want to learn design", so if you remove that part, what's left?

Collapse
owenmelbz profile image
Owen Melbourne

Because using tailwind is much faster than just using CSS (once you've learnt it) - I've been using Tailwind since before it was called Tailwind (KiteTail) - But still use Bootstrap to scaffold out things that design doesn't matter, we need a form set - we need some cards etc. The moment we need to "design it" we go to Tailwind as it gives us zero opinions around design and lets us create exactly what we need at speed!

Thread Thread
hasnaindev profile image
Muhammad Hasnain

Thanks. You gave a much better explanation!

Collapse
hasnaindev profile image
Muhammad Hasnain

If you want to use CSS, go ahead. I mean who cares. Not sure what you're trying to convey.

Collapse
gilbertoalbino profile image
Gilberto Albino

Bootstrap is totally controllable and customizable via SCSS files.
I won't leave bootstrap since it cares about usability and accessibility.
The problem is about people using it with no CSS/Design skills, that end up using the built-in styles.

Collapse
istealersn profile image
Stanley J Nadar

Leaning on any frameworks makes you less comfortable with the fundamentals. People tend to get a lot of things done by not knowing what happens under the hood. While you can use frameworks (like Bootstrap/Tailwind) its equally important to learn fundamentals especially when it comes to CSS, gives you more flexibility with customisations

Collapse
kleninb profile image
Prathap Karumanchi

All I can say is, you can do good things and build great websites without losing your sole with pure CSS || SCSS.

Bootstrap also has and the first one to implement Utility classes in a CSS framework.

Tailwind is good, but again the learning curve will be big because the utility classes will be an abstract over pure css properties.

As the JS & CSS progress adding new features, dev's will always come up with something new every day 3-6 months.

Collapse
standelethan profile image
Ethan Standel

I'm on my first project with Tailwind and am pretty disappointed.

Honestly, I don't think anything it does around sizes of things makes much of any consistent sense. 1, 2, 3, 4; but of what? I'd rather just use units, and now we're back to CSS.

The main issue is the lack of variability. We're using twin-macro + emotion with it, so all styles are in interpolated strings, but be careful not to actually use values in those strings because the styles get tree-shaken out of prod builds. But you know what languages features come built right into the browser, and you don't have to worry about what they do to your bundle? All possible CSS properties and values.

Imo Tailwind is saving lines of code but it's not really saving developers time or complexity, only adding to those elements of development.

Collapse
andreidascalu profile image
Andrei Dascalu

Well, if I have a quick site to put up I want a framework that comes with some kind of look. Bootstrap ain't great but does the job. I can also drop-in compatible themes. Pretty great if I'm no designer.
What's "learning" all the hundreds of bootstrap classes? The grid system is pretty clear and the vast majority of classes follow simple logic. Opposite that you have the legion of utility classes of tailwind.
With tailwind your html tags become repositories of a long list of utility classes that quickly become unreadable and need some care to be kept in the same order. It's just one level removed from going back to inline styles.
Probably doing inline CSS would be a better fit step though because then the goal of either tailwind or bootstrap becomes a bit clearer and you can choose accordingly.

Collapse
gomandev profile image
Gomandev

Listen, everyone, tailwind is the best no matter who you are a beginner or professional. Why do things old school way when they are an advanced and easier way?

Collapse
jobpick profile image
jobpick.in Author • Edited on

There's proper installation process. You can refer the official docs.(tailwindcss.com/docs/installation)
Hope this will help you!πŸ‘πŸ»

Collapse
swampone profile image
Shawn Sonnier

I love tailwindcss, but it greatly slows down development. But if you are the type that wants to build something the likes of no one has ever seen, me, tailwindcss is the way to go.

jobpick profile image
jobpick.in Author

Keep it up. All the best!

Collapse
xqxs profile image
小η₯Ίε…ˆη”Ÿ

test

Collapse
0dp profile image
0dp
Collapse
devalnor profile image
maxime.io

You have DaisyUI (daisyui.com/) who is a pre-designed Tailwind.

Collapse
climentea profile image
Alin Climente

Tailwind is great, but for most cases I think Bulma Css has the best of both worlds.