• You MUST read the Babiato Rules before making your first post otherwise you may get permanent warning points or a permanent Ban.

    Our resources on Babiato Forum are CLEAN and SAFE. So you can use them for development and testing purposes. If your are on Windows and have an antivirus that alerts you about a possible infection: Know it's a false positive because all scripts are double checked by our experts. We advise you to add Babiato to trusted sites/sources or disable your antivirus momentarily while downloading a resource. "Enjoy your presence on Babiato"

New Tailwind 2.0 UI Components

I must say I'm glad I found this. I was considering getting the full price package, and it's definitely not what I'd have expected from a package at that price ! I'm going to stick to Bootstrap for a while still 🤷‍♂️

Thank you for sharing !
 
  • Like
Reactions: brass9
I must say I'm glad I found this. I was considering getting the full price package, and it's definitely not what I'd have expected from a package at that price ! I'm going to stick to Bootstrap for a while still 🤷‍♂️

Thank you for sharing !
Hi Dude, I've never used Tailwind UI but was considering exploring it.
What do you reproach to Tailwind UI compated to Bootstrap?
 
FEB 3, 2021

New additions


  • Added 1 new Home Screen example to the Application UI package
  • Added 1 new Detail Screen example to the Application UI package
  • Added 2 new Multi-Column Layout examples to the Application UI package
  • Added 1 new Section Heading example to the Application UI package
  • Added 1 new Card Heading example to the Application UI package
  • Added 1 new Stacked List example to the Application UI package
  • Added 1 new Tabs example to the Application UI package
  • Added 1 new Navbar example to the Application UI package
Thank you very much. I can try it out.
 
Hi Dude, I've never used Tailwind UI but was considering exploring it.
What do you reproach to Tailwind UI compated to Bootstrap?

I find the Tailwind provides a lot for flexibility than Bootstrap. It doesn't have a default theme, and there are no build-in UI components. It comes with a menu of predesigned widgets to build your site with, but doesn't impose design decisions that are difficult to undo.
 
What do you reproach to Tailwind UI compated to Bootstrap?

In itself? Nothing. The problem is only about Tailwind being a young project. We've been using bootstrap forever, and you can find in seconds something you'd like to get, easy to adapt, with a quick google search. The only decent option for something reusable I found was TailwindUI.

If you're someone who does frontend a lot, it's good. But for me, it's a PITA. To make the component work, I have to learn Tailwind, and Alpine (or code my own implementation of JS stuff with whatever else I am using). For prototypes, it's a buzz kill because I spend too much time making the prototype shell rather than the actual prototype.

An example would be dropdowns for menu. In bootstrap, you add a class, then you're good to go because Bootstrap has it's own lightweight implementation of javascript interactivity. With TailwinUI, I found that there's one example for the "user profile" menu. But that's it. If you want to replicate it for, say a submenu of your main nav, you have to copy paste and make sure everything is adapted to the submenu you want to make. It's not just a matter of adding a class and be done with it (overly simplified, but you get the point).

But again, it's just time. Give it a couple of years, and given the fact that it's pushed by Laravel, we'll end up getting a lot of what I find is missing.

(And there's the pricing of the whole TailwindUI kit. The cheapest, priced at a 200$ CAD for only styling elements without much interactivity given, it's a no go for me. But I do think they're working on that!)

I find the Tailwind provides a lot for flexibility than Bootstrap. It doesn't have a default theme, and there are no build-in UI components. It comes with a menu of predesigned widgets to build your site with, but doesn't impose design decisions that are difficult to undo.

Yeah, Tailwind is definitly promised to a greater fame than Bootstrap. It's the TailwindUI that I find is still lacking, even for an "early access" price. Like I said up there, the thing is that when I prototype, I want to have a shell fast, and Tailwind UI doesn't give me entirely that... Yet !
 
In itself? Nothing. The problem is only about Tailwind being a young project. We've been using bootstrap forever, and you can find in seconds something you'd like to get, easy to adapt, with a quick google search. The only decent option for something reusable I found was TailwindUI.

If you're someone who does frontend a lot, it's good. But for me, it's a PITA. To make the component work, I have to learn Tailwind, and Alpine (or code my own implementation of JS stuff with whatever else I am using). For prototypes, it's a buzz kill because I spend too much time making the prototype shell rather than the actual prototype.

An example would be dropdowns for menu. In bootstrap, you add a class, then you're good to go because Bootstrap has it's own lightweight implementation of javascript interactivity. With TailwinUI, I found that there's one example for the "user profile" menu. But that's it. If you want to replicate it for, say a submenu of your main nav, you have to copy paste and make sure everything is adapted to the submenu you want to make. It's not just a matter of adding a class and be done with it (overly simplified, but you get the point).

But again, it's just time. Give it a couple of years, and given the fact that it's pushed by Laravel, we'll end up getting a lot of what I find is missing.

(And there's the pricing of the whole TailwindUI kit. The cheapest, priced at a 200$ CAD for only styling elements without much interactivity given, it's a no go for me. But I do think they're working on that!)



Yeah, Tailwind is definitly promised to a greater fame than Bootstrap. It's the TailwindUI that I find is still lacking, even for an "early access" price. Like I said up there, the thing is that when I prototype, I want to have a shell fast, and Tailwind UI doesn't give me entirely that... Yet !

Thx for your thorough reply.
Totally understand your point: So you'd go with Bootstrap when you're in reuse/adapt mode and maybe TailwindUI when you're more like doing from scratch. Would you say it like that?
 
I find the Tailwind provides a lot for flexibility than Bootstrap. It doesn't have a default theme, and there are no build-in UI components. It comes with a menu of predesigned widgets to build your site with, but doesn't impose design decisions that are difficult to undo.
Yes Definitly.
The point of @oengus is that in lot of projects (and especially in prototype mode) you're tempted to just forage around to find components your need and you just adapt them to your needs.
For doing some design from scratch, you're right saying that you would spend more time undoing bootstrap design choices than doing from scracth...
 
Thx for your thorough reply.
Totally understand your point: So you'd go with Bootstrap when you're in reuse/adapt mode and maybe TailwindUI when you're more like doing from scratch. Would you say it like that?

Something like that yeah. I'm just not a front end designer, so building everything from scratch is just a no go for me... That's why TailwindUI is appealing actually.

That being said, I must revise my original comment. Now that I had to dig around the files @locomotii gave us, I discovered that there's a
Code:
components-v2.css
file that's inserted in each one the examples that arranges some visual bug I was seeing. I couldn't figure why I did not get the same result at first, now I do. I just need now to get a grasp of AlpineJS and I might find it perfect after all.


EDIT: yeah, it was a matter of using the first party Tailwind plugins it seems.

I'm curently building myself a private package for my use with Laravel. If I can pull this off with custom blade components, I will probably switch for it for prototyping !
 
Last edited:
Thank you! @locomotii do you have files for figma?

Its INCLUDED.

March 10

New additions

  • Added new Contact Pages to the Marketing package with 4 examples
  • Added 1 new CTA Section example to the Marketing package
  • Added 2 new Header Section examples to the Marketing package
  • Added 2 new Newsletter Section examples to the Marketing package
  • Added 2 new Contact Section examples to the Marketing package

MEGA LINK (MARCH 10)
 
AdBlock Detected

We get it, advertisements are annoying!

However in order to keep our huge array of resources free of charge we need to generate income from ads so to use the site you will need to turn off your adblocker.

If you'd like to have an ad free experience you can become a Babiato Lover by donating as little as $5 per month. Click on the Donate menu tab for more info.

I've Disabled AdBlock