[HN Gopher] Free Open Source Tailwind CSS Components
___________________________________________________________________
Free Open Source Tailwind CSS Components
Author : njaaazi
Score : 199 points
Date : 2022-04-25 16:04 UTC (6 hours ago)
(HTM) web link (www.hyperui.dev)
(TXT) w3m dump (www.hyperui.dev)
| kiru_io wrote:
| Pretty cool!
|
| How does it compare to TailwindUI?
| pirate787 wrote:
| I have a TailwindUI license but there's no vanilla javascript
| or alpine support. So the open source options are better on a
| couple levels!
| [deleted]
| ensignavenger wrote:
| For me, more important than it being free of cost, is that it
| is Free and Open Source. I want to support the Tailwind Devs
| and Tailwind UI is nice and a fair price and all, but I don't
| want the headache of dealing with licensing. I don't want to
| have to think about if my license covers a particular new
| project or use case. I don't want to worry if I open source my
| project having closed source CSS in it and having to take it
| out. I don't want to worry about investing time learning
| Tailwind UI to have them make major licensing changes down the
| road or get bought out and abandoning it or whatever.
|
| So I can't use Tailwind UI, I can use this.
|
| (If one of my Tailwind-using side projects gets popular enough
| and starts making me money, I will probably buy a Tailwind UI
| license just to support Tailwind, though! Even though I won't
| use it. Or maybe I'll find another way to support them.)
| vosper wrote:
| I don't think the licensing is very complicated, myself.
|
| https://tailwindui.com/license
| ensignavenger wrote:
| More complicated than what I want to deal with, and more
| restrictive than I want to invest the time into.
| [deleted]
| iippola wrote:
| It is free
| BasilPH wrote:
| I'm a paying customer of TailwindUI. TailwindUI is more
| advanced in my opinion:
|
| - There are more components.
|
| - One thing I love are the fully styled landing pages. They are
| made up of components as well, but I like seeing them put
| together in a coherent fashion.
|
| - You get not only pure HTML code, but also Vue and React code
| to copy/paste.
|
| - IMHO it's nicer looking and feels more polished.
|
| However, all of this comes at a price, I think I paid $250 for
| it. I also find the designs to be nicer, but sometimes they are
| a pain to change because somewhere in the nested `div`'s
| there's some magic happening that I'm not dealing with
| properly.
|
| I do think there is a place for such free, simpler and clean
| component libraries and I appreciate their creator for making
| it available.
| vmception wrote:
| Informal poll: is bootstrap over?
| conradfr wrote:
| I use it and still like it...
|
| Except 5.1 that broke my homemade dark theme implementation
| with their use of css variables ;)
| erokar wrote:
| Not for me. Bootstrap is very mature, has sane UX, is
| adaptable, has a good balance between general styles and
| utility classes. I find that Tailwind clutters your HTML and I
| fail to see the benefit over writing pure CSS in isolated
| components in a framework like e.g. Svelte. The reason I would
| use a CSS framework in the first place is to avoid having to
| write everything from scratch myself. All (the free parts of)
| Tailwind affords is an indirect way of writing styles using
| classes. In that case you might as well bite the bullet and
| learn CSS properly.
| spiffytech wrote:
| I expect Bootstrap will live on for a long time, but the era of
| it being either the trendy or obvious choice is over.
|
| When Bootstrap debuted, its big strength was that it gave you a
| decent UI for little effort, at a time when the popular
| alternative was `vim styles.css`.
|
| Needs and tools have shifted. Fewer projects get their UI from
| a programmer with no design sense. More projects need more
| widgets that aren't available off-the-shelf. Component-based
| web frameworks make it easier to build reusable widgets in-
| house.
|
| (I think in didn't help that it took Bootstrap forever to stop
| depending on jQuery, and SPAs got popular and didn't need
| jQuery but _did_ need to reduce page weight)
| gotaquestion wrote:
| Nope. Some people don't want fuss over UI to the extent that
| tailwind forces you. Some of us want an opinionated Sass-based
| framework out of the box. The only advantage I've found using
| Tailwind is anal-level control over details when bootstrap
| already has a uniform ecosystem with far, far fewer classes.
| The former requires way more upfront cost to get running, where
| the latter is done at day one. Only downside is the tree-
| shaking in bootstrap, it would be nice if it could be made
| smaller during a Next/Nuxt/webpack build.
| dgb23 wrote:
| These tailwind component libraries make little sense if you
| compare them directly to bootstrap without wanting to work
| with tailwind.
|
| Tailwind is in every way superior when you are implementing a
| bespoke design, you develop faster, your CSS is small and
| less complex, the output is performant, you have a uniform
| mini-language, if you apply some up front analysis of a
| design/-system you can generate 90% of your CSS from a
| normalized configuration.
|
| Now compare that to fighting default styles and complected
| component styles, applying overrides, extending via SCSS
| variables and generating your own CSS utilities with SCSS.
| It's pretty night and day for this use-case.
|
| Component libs for tailwind that compress the classes are a
| bit funny and IMO you don't get much benefit from them other
| than playing nice with tailwind. You might have a reason to
| use tailwind but want predefined component classes? But then
| you get the same disadvantage that component based libraries
| like bootstrap have, so the choice is arbitrary here.
|
| What makes _much_ more sense is what tailwindui does, they
| give you the raw source, so you get to write out of the box
| components quickly but can pull them apart without friction.
| gotaquestion wrote:
| I don't think you listened to me, because you said this:
|
| > Now compare that to fighting default styles and
| complected component styles
|
| As I said, I am NOT fighting default styles. I want them.
|
| I don't WANT to write my own components, just change colors
| with Sass (and maybe some affordances).
|
| I'm an engineer, not a UX designer, and I don't have budget
| to hire a UX designer (nor do I pretend to be good at UX
| like most programmers). Bootstrap is ideal for my
| situation, and many others in my position.
|
| Also, what are you talking about? Tailwind absolutely does
| NOT give you out of the box components. Only third-parties,
| like DaisyUI and OP's link are fully formed components (or
| the links off of the tailwind page), which are at best like
| bootstrap and at worse an inconsistent mess.
| mimsee wrote:
| > Also, what are you talking about? Tailwind absolutely
| does NOT give you out of the box components.
|
| Well, no. And that's by design. Should you want
| components, there's an official Tailwind UI[0] that the
| dgb23 also mentioned. Not to mention the uncountable
| amount of open-source component libraries.
|
| [0]: https://tailwindui.com/
| swyx wrote:
| this is pretty comprehensive and i like the responsive displays.
| upvoted!!
|
| i keep a list of these libraries here https://github.com/sw-
| yx/spark-joy/blob/master/README.md#tai... and just gave it a
| little star to demonstrate quality
| vnglst wrote:
| Looks great, thanks for sharing this for free!
|
| Quick feedback on the website: The left side of the components
| preview pages falls off the left side of my screen (Chrome, 13''
| Mac).
| [deleted]
| lvl102 wrote:
| I like tailwind but I wish we had a Figma plug-in and be done
| with it.
|
| Edit: nvm there is a plug-in.
| no_wizard wrote:
| I don't know that its current to the latest version of Tailwind
| however
| infogulch wrote:
| Nice collection. The site is annoying to navigate with the back
| button on mobile, I have to hit back multiple times to get to the
| component categories page. I guess it's using pushState so you
| can easily link directly to a particular component by copying the
| URL, which is a neat feature, but I think it should use
| replaceState instead to not mess with the back button.
| marginalia_nu wrote:
| Yeah, the back button is broken on desktop as well.
| spicybright wrote:
| You would think web developers writing a CSS library would
| know how much web devs hate things like this.
| mftb wrote:
| It's not just web developers. The back button is the
| single, most-used, UI element in the browser.
| ksubedi wrote:
| Looks great! Another Tailwind based component library I love is
| DaisyUI: https://daisyui.com/
| gotaquestion wrote:
| They've gone full circle: this is bootstrap implemented in
| tailwind. How funny.
|
| EDIT: It is funny because I've been looking for something
| opinionated like Bootstrap, but that can be tree-shaken to a
| smaller package, like Tailwind, but I don't want have to
| redesign every dang component.
| bpicolo wrote:
| Daisy/Tailwind + Vue3 is my favorite front end toolset to date.
| vmception wrote:
| That could be true for me too, do you ever concern yourself
| about convincing recruiters/employers of your skillset
| though?
|
| Of the SPAs, companies want React and people to "hit the
| ground running"
|
| They dont recognize Vue as that
| bpicolo wrote:
| Hah, I'm a bad person to ask because I'm managing now. I've
| used much more React professionally, but I still find
| myself much more productive in the Vue ecosystem.
|
| I don't often collide with company cultures that require
| specific language/tool experience in my network these days,
| though I realize they exist out there. I haven't ever hit
| an issue launching into a job in unfamiliar languages, and
| I've made that leap with all of Ruby/Java/Golang/PHP/Python
| - minimal pre-exposure in every case (school was C++).
| vmception wrote:
| Right, yeah a new programming language is like driving a
| new car, you check for how it does all the primary
| concepts and learn about the one or two new concepts
|
| Lots of recruiters and hiring managers dont see it that
| way
| ksubedi wrote:
| Similar for me, Next.js / Daisy + Tailwind / Firebase means I
| can whip out a MVP or prototype in weeks instead of months.
| Love the increase in productivity first tooling in web
| development ecosystem.
| tomatowurst wrote:
| interesting...in what ways do each of those boost your
| productivity? And what is the amount of effort to take that
| MVP to a production state?
|
| I guess the only missing piece there is a backend API.
|
| I bought Chakra and now kind of regretting, seeing all the
| free stuff, Daisy for instance is something that I never
| heard of until I saw the comments here.
| ksubedi wrote:
| Next.js creates a good setup to create a React frontend
| application with server side rendering support out of the
| box. Pair that with Vercel and you get an amazing
| deployment environment with CDN, cloud functions, edge
| functions (middleware) server side rendering and more
| without much hassle.
|
| Tailwind let me quickly create any UI I want, and Daisy
| helps me reduce the amount of time needed to style basic
| elements like inputs and all.
|
| Firebase lets me get a low latency real time data source
| for my application, that can scale infinitely. It also
| handles some other parts of building an application that
| normally take a lot of time: authentication, storage
| management etc. And the pricing is really really cheap
| once you consider how much it costs to create an
| infrastructure that scales as well as firebase does,
| unless you model your data wrong and end up using a lot
| of db read/write cycles unnecessarily.
|
| The backend API piece is not missing, you can use either
| Next.js API or firebase functions for backend piece, I
| use those for things like stripe billing backend etc.
|
| This stack is enough for most projects out there, and
| when its not enough its flexible enough that you can
| integrate it with other things. And that timeline I
| mentioned was for a production ready MVP.
| lvl102 wrote:
| Wow! I don't know how I missed this (not a front end dev).
| vsroy wrote:
| I have been using tailwind. One thing I've noticed is that it can
| become unmaintainable compared to styled-components since you
| just have divs with classes (and it's hard to read 50 nested
| divs).
|
| Has anyone used something like Tailwind-Styled-Component [1] and
| found it worthwhile?
|
| https://www.npmjs.com/package/tailwind-styled-components
| vilos1611 wrote:
| I've been using twin.macro on a side-project of mine, and have
| really enjoyed it: https://github.com/ben-rogerson/twin.macro
|
| I especially like how easy it is to fall back onto ordinary
| Styled Components if I'm trying to implement things more
| specific than what tailwind can handle.
|
| Here's a sample of what I've implemented with twin.macro:
| https://grueplan.com
| bryanrasmussen wrote:
| hmm, maybe HN related problems? Application error: a client-
| side exception has occurred (see the browser console for more
| information), some nextJS issue, so maybe server side?
| chrischen wrote:
| From what I gather from the docs is that tailwind and atomic
| css is designed for you to colocate the styling in the html so
| you can avoid having to create a CSS version of a component
| along with an HTML version of a component.
|
| For example, in CSS you could create a class for a card called
| ".card", but this by itself does not create a card component as
| you may need card-title within it and card-wrapper on the
| outside, and various other styles that may seem like they are
| reusable subcomponents but are not. And it's a misnomer because
| it may require a more complicated HTML structure and you cannot
| just create a div and apply a class "card" and get back the
| component.
|
| Instead in a real app your component has an HTML structure, a
| css structure, and the reusable package you put it in may be
| the react component, and not style called "card" that you can
| use.
|
| Tailwind advocates for making your components reusable on this
| framework level (whether vue or react), rather than at the CSS
| level. Because even if your make your CSS reusable you still
| have to recreate the HTML structure. And if you put your HTML
| in a reusable component and also have a set of reusable styles
| then you have a Card component concept and a Card style concept
| that becomes redundant.
|
| To address your specific problem, if your code is unreadable
| due to inline tailwind styles then it's a sign you should be
| breaking the HTML into reusable sub components instead.
| danielvaughn wrote:
| Curious what counts as unmaintainable for you. The HTML is
| certainly uglier, but cost-of-copy-paste is very low compared
| to cost of maintaining abstractions. That for me is the primary
| value add for Tailwind.
| vsroy wrote:
| With styled components my react might look like this:
|
| ``` <Question> {...} <Footer> < button> { ... } </button>
| <QuestionBadge> </QuestionBadge> </Footer> </Question> ```
|
| That's easier than
|
| ``` <div className = " ... "> { ...} <div> <div> </div> ```
| lights0123 wrote:
| Tailwind specifically recommends creating components with a
| JS framework that look like the former.
| danielvaughn wrote:
| A side project I've been trying to find time to work on - a
| Tailwind/Styled components fusion. So imagine just being
| able to do this: <Question mt0
| textCenter p8={extraPadding}
| p2={!extraPadding} />
|
| Or you could have another variation, but optimization is
| more difficult: <Question mt={0}
| text="center" p={extraPadding ? 8 : 2} />
| babyshake wrote:
| You can always create static components that render a bunch
| of divs - for a badge, or a footer, as shown in your
| example.
| punyearthling wrote:
| Alpine support! Woohoo!!!
|
| Love this so much - good job
| theyknowitsxmas wrote:
| There's also this: https://tailblocks.cc
| craigkerstiens wrote:
| Excited to see more re-usable components based on tailwind, but
| have also really come to appreciate the tailwind ui model for
| helping support open source. The core of tailwind is still there
| and free to use, but tailwind ui gives a premium option for a lot
| of off the shelf components that I have issue at all paying for.
|
| I know some have pointed out in other threads they wish tailwind
| ui components were more of a complete working example with Alpine
| examples included, it's a fair complaint and area of improvement.
| But overall I don't have any issue with the model for tailwind
| ui.
| [deleted]
| iamjbn wrote:
| Great work.
| george_ciobanu wrote:
| Forgive me if this is a dumb question: why would I use Tailwind
| over say ant design when the latter is free and has hundreds of
| components?
| tomlagier wrote:
| Not a dumb question!
|
| They cover different needs - Tailwind is a low-level CSS
| library that provides a different (and some claim better) way
| of styling HTML. It doesn't provide markup, interactivity, etc.
|
| AntD is a high-level component library that provides components
| with pre-built markup, JS interactivity, accessibility, etc.
| Any of the component libraries in this thread are a good point
| of comparison.
|
| You might use Tailwind if you're building out your own
| components, or styling a page that doesn't need much
| interactivity. It is fast, lightweight, and easy to integrate.
| You can compare it to any CSS-in-JS tool, SASS, and other
| styling solutions.
|
| You'd typically turn towards a component library (like
| MaterialUI, Ant Design, or Tailwind UI) if you're looking to
| quickly build a webapp that needs a lot of interactivity out of
| the gate. These solutions are larger and heavier, but provide a
| lot more functionality (interactivity, accessibility).
___________________________________________________________________
(page generated 2022-04-25 23:01 UTC)