Show HN: React and Tailwind CSS UI Components | Hacker News Reader

Show HN: React and Tailwind CSS UI Components

codesnaps.io

32 pointsRedAmbi17 comments

CodeSnaps is a React and Tailwind CSS UI component library with dark mode support. It helps developers to design faster and better with copy-and-paste code snippets without building their MVPs and apps from scratch.

Open articleView on HN

Personally I found tailwind fast enough that I write all my CSS from scratch with it (e.g. no component libraries, other than one I make for myself). It seems like a pain to mix and match components from different libs.

Just come here and share my real thoughts as a potential customer.

Bought the tailwind components before, The reason that drives me to buy it is because they can really help me build landing page, and pricing page really fast.

The components in code snaps is limited and not too much fancy and complete templates, which I can hardly find reason for purchasing.

Component libraries are the new business model

Components are the new shovels

Are they that new though? Component libraries were being sold in the 1990s for Delphi already.

if you already use a high level component model, why does it matter that it's implemented in Tailwind? What is the benefit of Tailwind anyway? You should think in terms of props and variants, not some alias indirection to css properties.

Layout

have components for layout? Use css grid which is much more flexible?

I mean, isn't that what this is? Components for layout?

Personally I prefer MUI over Tailwind (there is layout overlap there, but MUI is much more than layout). But either one is much nicer to use than raw CSS when you are composing complex pages and dashboards. It's like you said, working with higher level components, just with layout also mostly finished out (but both frameworks let you adjust things in-situ like padding, margins, font sizes, colors and such in a clean and maintainable way)

I would also say it does not really matter that it's implemented in Tailwind. But they propose these components as "copy-and-paste code snippets" and of course it makes a difference when you copy and paste components with styles written in Tailwind, because you also have to setup Tailwind.

>What is the benefit of Tailwind anyway?

I'm prototyping design systems using Tailwind which saves me some minutes of work every day. It also uses just a CDN script that I directly load in the browser, no bundling required. I have an empty "tailwind.config.js" in the root directory in order to use the Tailwind language service.

One of the biggest benefits to tailwind is in it's simplicity. Code shared doesn't need a framework (like Bootstrap or one of those), and is just a static stylesheet. Components using other frameworks tend to need at least two stylesheets -- the base framework and then a customizations one applied separately. They also generally need to be compiled with scss or something so that you can customize the colors. In essence, Tailwind just needs a single stylesheet and no pipeline.

It also isn't just inline CSS, which has issues being bundled separately and dealing with media queries.

There are a number of benefits, but Tailwind's verbosity is it's biggest downside. Unfourtanetly, if you just want a single style sheet, the verbosity is just a tradeoff you have to make.

If you're going to downvote an opinion, at least say why.

Once you are into tailwind for a bit, you sort of get it.

They have kind of reduced the CSS landscape from very complex to a concise subset that does most of the stuff you want for a modern looking site. It gets to the point where the amount of stuff fits into working memory. It is convenient.

Then if you copy-paste components from different places like for example this submission and others, they can play well together. You can go in an edit them and manipulate them in predictable ways. You can componentise them in say React if you wish.

Imagine mixing up Bootstrap and Bulma - it would be quite hard to do. But if they are both based on Tailwind it is a lot easier. The components wont fight each other. The reality is none of the frameworks provide everything you need so you need to mix and match to get stuff done (or invent your own, which is OK too).

Hope this makes sense. It is hard to explain because you have to do it to feel it.

Related alternative also based on react, tailwind and is open source => https://tremor.so

https://news.ycombinator.com/item?id=36244886

Tagline says it's focused on dashboards, but I guess these contain so many kinds of common components that it might be generally useful

The website looks super clean. Loved its design. Do you also offer pure CSS components?

thanks, unfortunately, it has only tailwind i plan to add vanilla css later

Reply on news.ycombinator.com