Live data from Hacker News

Show HN: Flowbite – Tailwind CSS Components Library

flowbite.com

21–30 of 60 posts

Re: Show HN: Flowbite – Tailwind CSS Components Library

#21
What stops me from switching to Tailwind away from Vuetify is the lack of a well rounded library of components. TailwindUI and now Flowbite get us part way there, but it’s still jarringly sparse compared to dropping in a very customizable v-btn or v-alert, not to mention the crazy robust v-data-table.

When I use stuff like Bulma or Bootstrap instead of Vuetify I feel like I’m doing 10x the amount of work for 0x more customization or optimization.

Is there a case to be made for a Tailwind component library for my use-case?

Re: Show HN: Flowbite – Tailwind CSS Components Library

#22
post #8

Earlier quoted context omitted.

Tailwind is just a method in which to style components on a page. Replace "Tailwind CSS" with "StyledComponents" or "SASS" or "BEM".

Tailwind is written in SASS and is not like SASS. I would equate Tailwind to an earlier utility framework like Bourbone[1]. Tailwind can be used to build/write "StyledComponents". And one can write in the style/methodology/philosophy of BEM. All the the above terms are all of different categories. 1. https://www.bourbon.io

Tailwind is not, in fact, written in SASS (also, for what it's worth it's Sass - not SASS) - it's a PostCSS plugin. Additionally, the primary use case of Bourbon was to create composable mixins - not to expose utility classes. It would only be comparable to Tailwind if you were using Tailwind's @apply rules and not composing with the utility classes directly in the DOM.

Re: Show HN: Flowbite – Tailwind CSS Components Library

#23
post #19
post #17

Earlier quoted context omitted.

I didn't say I wouldn't compare them - I said I would put one next to the other, by which I meant Tailwind that is generally a bad idea.

Interesting, I'd ask you why. Anecdotally I've built hundreds of websites, and worked on many product teams building web applications all with varying team/product sizes and in my experience BEM scales very poorly. I have never worked on a BEM codebase without a shocking level amount of tech debt. Adding new UI requires creating new CSS files, refactoring existing UI requires also refactoring the separate CSS files,…

Adding new UI requires creating new CSS files, refactoring existing UI requires also refactoring the separate CSS files, removing UI is the same thing. Due to this disconnect, old code tends to stick around.

To me this says more about the development practices of that team than about BEM. Chiefly you should be able to automatically determine if a given block, element or modifier is still used/needed. How did they wind up in such a situation?

Meanwhile Tailwind is functionally equivalent to this:

https://twitter.com/samthor/status/1402825668061130755

I would say that this is nice for prototypes, but given how it disincentivises reuse, refactors take an amount of time proportional to the number of instances - that's really bad.

Also since there's no composition, just by looking at the codebase it's not clear if a change is something that should propagate to other, similar instances or land only there.

Re: Show HN: Flowbite – Tailwind CSS Components Library

#24
I hope this comment comes across as constructive and not an attempt to argue about licensing, but I find it really confusing to understand what on this website is under what license/what I can do with it.

Under components are some great looking components with copy-pasteable code. Can I just copy-paste that into a website? If I do then do I need to copy in an MIT license attribution too into that source code where I use it? If I can copy-paste from there without issue then what would I be paying for if I purchased "Tailwind CSS code"? Is it like Tailwind UI where these components are available for free but paying unlocks loads more?

Re: Show HN: Flowbite – Tailwind CSS Components Library

#25
post #23
post #19

Earlier quoted context omitted.

Interesting, I'd ask you why. Anecdotally I've built hundreds of websites, and worked on many product teams building web applications all with varying team/product sizes and in my experience BEM scales very poorly. I have never worked on a BEM codebase without a shocking level amount of tech debt. Adding new UI requires creating new CSS files, refactoring existing UI requires also refactoring the separate CSS files,…

Adding new UI requires creating new CSS files, refactoring existing UI requires also refactoring the separate CSS files, removing UI is the same thing. Due to this disconnect, old code tends to stick around. To me this says more about the development practices of that team than about BEM. Chiefly you should be able to automatically determine if a given block, element or modifier is still used/needed. How did they win…

I'm not sure what gives you the impression that there is "no composition". It's been common practice on many large scale Tailwind builds that I've been a part of to use the @apply directive[0] to create reusable components when appropriate.

[0] https://tailwindcss.com/docs/functions-and-directives#apply

Re: Show HN: Flowbite – Tailwind CSS Components Library

#26
post #16

From a design perspective this looks really good, I like the components, the typography, the generated pages from Figma etc. Also the documentation seems to be clean and user-friendly. It's way better than most of the docs. From the development perspective and from other comments that are here, and also from many articles like: https://dev.to/jaredcwhite/why-tailwind-isn-t-for-me-5c90 or https://dev.to/neophen/tailwi…

Thanks for the feedback! 1. We used HUGO as a static site generator and Webpack to put things together using markdown files. (it's open-source: https://github.com/themesberg/flowbite including the HUGO source files) 2. We're now working on the application UI code (pro version) but we will also add new components and external styled plugins (datepicker, charts) to the open-source library. We have a roadmap on the land…

Are the blue bullet points and the balck ones TODOs?

Re: Show HN: Flowbite – Tailwind CSS Components Library

#28

I hope this comment comes across as constructive and not an attempt to argue about licensing, but I find it really confusing to understand what on this website is under what license/what I can do with it. Under components are some great looking components with copy-pasteable code. Can I just copy-paste that into a website? If I do then do I need to copy in an MIT license attribution too into that source code where I…

The components are open source and you can use them any way you see fit under the MIT license terms.

The pro version includes fully coded pages and layouts (ie. dashboard layout, landing pages, e-commerce pages) that can accelerate your development even more. We also work based on a Figma file that is based exclusively on the default Tailwind utility classes and you can get that too in the pro version (although there is also a free one posted on the Figma community with the base components).

I think we should create a page comparing licenses and making it clearer.

Re: Show HN: Flowbite – Tailwind CSS Components Library

#29
post #23
post #19

Earlier quoted context omitted.

Interesting, I'd ask you why. Anecdotally I've built hundreds of websites, and worked on many product teams building web applications all with varying team/product sizes and in my experience BEM scales very poorly. I have never worked on a BEM codebase without a shocking level amount of tech debt. Adding new UI requires creating new CSS files, refactoring existing UI requires also refactoring the separate CSS files,…

Adding new UI requires creating new CSS files, refactoring existing UI requires also refactoring the separate CSS files, removing UI is the same thing. Due to this disconnect, old code tends to stick around. To me this says more about the development practices of that team than about BEM. Chiefly you should be able to automatically determine if a given block, element or modifier is still used/needed. How did they win…

> To me this says more about the development practices of that team than about BEM

Well you could say that BEM requires strict development practices to work well. This is could be a downside for many teams, seeing as this comes at a cost which grows as your team/product do. Organizational overhead is a significant factor when considering a technical solution.

> Meanwhile Tailwind is functionally equivalent to this:

It's a funny platitude, similar to the argument that "Tailwind is just like inlining CSS" but it's of course overly simplified. Variable support, hover/active/other states, and of course breakpoint-specific variants for all of the classes making responsive styles possible.

> Also since there's no composition, just by looking at the codebase it's not clear if a change is something that should propagate to other, similar instances or land only there.

Even with BEM, you usually store components in partials/templates to keep everything contained and to reduce duplication. So in this regard the composition is the same. You import a button in your code, you aren't writing out this every time:

Blah

The composition happens within the templates themselves.

EDIT: I'll follow up and say that the "composition" for Tailwind components works very similar to CSS Modules (CSS is scoped to a component, and delivered with the component itself), or StyledComponents (similar to CSS Modules, but built into the React component itself). But with a few more benefits:

  1. Does not rely on a build system to bundle/deliver styles
  2. Less abstraction; no need to create scoped classes even (in the case of CSS Modules)
  3. Works outside of the JS/React ecosystem

Re: Show HN: Flowbite – Tailwind CSS Components Library

#30
post #26

Earlier quoted context omitted.

Thanks for the feedback! 1. We used HUGO as a static site generator and Webpack to put things together using markdown files. (it's open-source: https://github.com/themesberg/flowbite including the HUGO source files) 2. We're now working on the application UI code (pro version) but we will also add new components and external styled plugins (datepicker, charts) to the open-source library. We have a roadmap on the land…

Are the blue bullet points and the balck ones TODOs?

Yes, you are correct.
Post reply on HN