New Tailwind 2.0 UI Components

oengus · Mar 2, 2021

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 !

rachidjunk · Mar 3, 2021

oengus said:
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?

1nf0t3ch · Mar 3, 2021

locomotii said:
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

FEB 3 UPDATE

Thank you very much. I can try it out.

locomotii · Mar 3, 2021

rachidjunk said:
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.

oengus · Mar 4, 2021

rachidjunk said:
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!)

locomotii said:
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 !

rachidjunk · Mar 4, 2021

oengus said:
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?

rachidjunk · Mar 4, 2021

locomotii said:
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...

oengus · Mar 6, 2021

rachidjunk said:
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 !

filip1139 · Mar 8, 2021

Thank you! @locomotii do you have files for figma?

locomotii · Mar 11, 2021

filip1139 said:
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)

1nf0t3ch · Mar 12, 2021

locomotii said:
Its INCLUDED.

MEGA LINK (MARCH 10)

Thank you!

jntbx · Mar 21, 2021

Thank you!

locomotii · Mar 31, 2021

For March 29 update, I created a new resource for this. Hold on and wait till the mods approve.

EDIT: https://babiato.tech/resources/tailwind-ui-application-ui-marketing.11754/

1nf0t3ch · Apr 1, 2021

Thank you very much l

locomotii said:
For March 29 update, I created a new resource for this. Hold on and wait till the mods approve.

EDIT: https://babiato.tech/resources/tailwind-ui-application-ui-marketing.11754/

Thank you very much!

andersonlkbr · Apr 2, 2021

thank you!

pandersdzn · Apr 14, 2021

locomotii said:
For March 29 update, I created a new resource for this. Hold on and wait till the mods approve.

EDIT: https://babiato.tech/resources/tailwind-ui-application-ui-marketing.11754/

Hi! Do you have the new React components that were released today? If you do could you upload it for us? Thank you!

rrr01091986 · Apr 26, 2021

pandersdzn said:
Hi! Do you have the new React components that were released today? If you do could you upload it for us? Thank you!

+1

paynezhuang · May 29, 2021

locomotii said:
For March 29 update, I created a new resource for this. Hold on and wait till the mods approve.

EDIT: https://babiato.tech/resources/tailwind-ui-application-ui-marketing.11754/

Can I update to the latest version, thanks

Ondreas · Nov 11, 2022

locomotii said:
No worries. Because you apologize, here's the updated 18Oct Ver.
TWUI OCT

Have fun with those.

Thanks for the share.
Really appreciated.
Great resource for learning and inspiration.

New Tailwind 2.0 UI Components

Welcome to Original Babiato! All Resource are Free and No downloading Limit.. Join Our Official Telegram Channel For updates Bypass All the resource restrictions/Password/Key? Read here! Read Before submitting Resource Read here!Support Our Work By Donating Click here!

Join Our Official Telegram Channel For updates Bypass All the resource restrictions/Password/Key? Read here! Read Before submitting Resource Read here!

Support Our Work By Donating Click here!

New member

Active member

Active member

Well-known member

New member

Active member

Active member

New member

New member

Well-known member

Active member

New member

Well-known member

Active member

Member

New member

New member

New member

New member

Similar threads

Forum statistics

Share this page

Welcome to Original Babiato! All Resource are Free and No downloading Limit..
Join Our Official Telegram Channel For updates
Bypass All the resource restrictions/Password/Key? Read here!
Read Before submitting Resource Read here!
Support Our Work By Donating Click here!

Join Our Official Telegram Channel For updates
Bypass All the resource restrictions/Password/Key? Read here!
Read Before submitting Resource Read here!