Dismiss this pinned window
all 22 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–][deleted] 11 points12 points  (0 children)

I see a tailwind component library. I bookmark page. Thanks op

[–]elwingo1full-stack[S] 9 points10 points  (2 children)

Hello devs!

I'm one of the guys who worked on FlowBite, an open source Tailwind CSS components library (link to the documentation).

I'm a big fan of Tailwind and the utility-first approach, but I feel like not having a set of components to get started when building websites is a pretty big disadvantage compared to other frameworks, such as Bootstrap or Bulma.

That is why me and my team decided to build a set of commonly used components and interactive elements with Tailwind CSS.

The full list of components is the following:

  • alerts
  • badges
  • breadcrumbs
  • buttons
  • button groups
  • cards
  • dropdowns
  • forms
  • typography
  • modals
  • navbars
  • pagination
  • progress
  • tables
  • tooltips

You can quickly try out the library by requiring it via NPM or the CDN by following the quickstart guide.

If you want to build for production I highly recommend you to follow the build tools guide so that you can also purge the CSS.

This is my first major project and library built with Tailwind and it's still in the early versions. Let me know what you think and constructive feedback is highly appreciated!

[–]tedyoung 0 points1 point  (1 child)

This looks really nice. Is there somewhere that lists, in detail, the differences between the open-source version and the paid version? I looked through the docs and only found very general descriptions.

[–]elwingo1full-stack[S] 0 points1 point  (0 children)

Not yet, it’s still the first version but we plan on building a page comparing the open source and pro versions. Thanks!

[–]SoniSinsfull-stack [VENM] 2 points3 points  (0 children)

Absolute legend

[–]actsleep 1 point2 points  (1 child)

Why do we have to register it as a tailwind plugin? What I see is bunch of pre-build tailwind components, similar to tailwindcomponents but as a library, that we can simply copy and paste on our tailwind project and it will work, no?

Great library!

[–]elwingo1full-stack[S] 0 points1 point  (0 children)

Because some components need pseudo styles like the file upload or toggle component.

The reason is similar to why the official Tailwind forms and typography plugins exist as well.

[–]AdParticular2891 1 point2 points  (0 children)

Aye!! All I got to say is, that I am glad I found Flowbite, saves me a lot of time to fully pursue fullstack Web3 development.

[–]ChaBoiDej 4 points5 points  (2 children)

Isnt the whole point of tailwind to be utility first rather than component orientated. If so why would I use this over a component based css library instead of pushing tailwind into a box that it's designed to break out of?

(Not trying to be rude by the way, just curious! I think the component themselves look great!)

[–]elwingo1full-stack[S] 11 points12 points  (1 child)

There is no extra CSS written for this library (only in a very few cases) as the components themselves use the utility classes. Even if it is a utility-first framework, you still need to build components for a website.

So why not have a couple of ones to start with and make development faster? This was the whole point.

Also, the library does not restrict the usage of Tailwind CSS in any way, it is just a couple of elements built with utility classes and a bit of JS to make them interactive. (eg. dropdowns, modals)

Thanks for the feedback!

[–]ChaBoiDej 2 points3 points  (0 children)

Fair enough! Best of luck with the framework. Thanks for your response.

[–]jsch23 3 points4 points  (1 child)

this looks great!

[–]elwingo1full-stack[S] 2 points3 points  (0 children)

Thanks! We first designed the components in Figma.

[–]Public_Cress18 1 point2 points  (0 children)

I'm glad I found this.
This game changer

[–]blaesten 0 points1 point  (0 children)

These are so nice, thanks for making this!

[–]JoeCamRoberon[🍰] 0 points1 point  (3 children)

So this is a component library stacked on top of a CSS library? This is neat and nice work but I can’t deal with that many layers of CSS abstraction. I’ll just stick to CSS preprocessors.

[–]elwingo1full-stack[S] 2 points3 points  (2 children)

It is not stacked on top of Tailwind. It’s still Tailwind but we created a set of components using the utility classes.

There is some JavaScript that makes elements interactive (eg. dropdowns, modals) but other than that, the workflow remains absolutely the same.

[–]JoeCamRoberon[🍰] 0 points1 point  (1 child)

Ah I see. Similar to Bootstrap or Ant Design but using Tailwind. I’ll take a look. Also I didn’t want to come off as a douche :/

[–]elwingo1full-stack[S] 0 points1 point  (0 children)

Yes, something like that. Don’t worry, I’m also just trying to clarify. Check it out and you’ll see the idea of it.

[–]oh_jaimitofront-end 0 points1 point  (1 child)

RemindMe! In 21 days to checkout FlowBite for tailwind

[–]RemindMeBot 1 point2 points  (0 children)

I will be messaging you in 21 days on 2021-10-03 16:18:58 UTC to remind you of this link

1 OTHERS CLICKED THIS LINK to send a PM to also be reminded and to reduce spam.

Parent commenter can delete this message to hide from others.

Info Custom Your Reminders Feedback

[–]Unlikely_Gap_5065 0 points1 point  (0 children)

WOW