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.
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
Top comments (29)
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.
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
Well CSS first is obvious isn't it, I was picking Bootstrap over Tailwind for beginners and and beginners in Frontend Development obviously.
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!
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
For beginner's, bootstrap is always great way to start and as developer they should explore the framework world!
In my opinion, tailwind is easier than bootstrap.
To each his own.
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 😬
I won't as well 😂.
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?
Great point!
Tailwind is free, components are not.
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.
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?
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!
Thanks. You gave a much better explanation!
If you want to use CSS, go ahead. I mean who cares. Not sure what you're trying to convey.
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
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.
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.
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?
There's proper installation process. You can refer the official docs.(tailwindcss.com/docs/installation)
Hope this will help you!👍🏻
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.
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.
Keep it up. All the best!
tailwindcss.com/docs/installation#...
test
You have DaisyUI (daisyui.com/) who is a pre-designed Tailwind.
Tailwind is great, but for most cases I think Bulma Css has the best of both worlds.