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?
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.
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.
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?
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.
Adding on: I'm still trying to grasp Tailwind myself, and I've found this video by one of Tailwind's creators to be quite useful in explaining the above comment.
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.
Hello, creator of HyperUI here. Thanks for your feedback, however this is not something I have added or can replicate. Could it be an extension you're using that's causing it?
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.
Thanks! I went to shuffle.dev and saw "Start a new project with one million layouts!" That's a big number, but hoo boy, I gotta search through all these? Well, I've got a project for lunch it seems!
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.
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.
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.
I see it's great for building an MVP but may not be a good fit outside of startups. Nevertheless, its the front-end and server side rendering is quite interesting to me.
What are some problems with this setup? Might have a go just for the frontend portion but seems to good to be true in some aspects.
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++).
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
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.
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.
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.
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.
> 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.
Yes I get that, I wanted to illustrate the use case for tailwind (bespoke design) and why it makes sense there and how component libs can still be useful if delivered in raw form. I didn’t want to imply that your use case isn’t valid.
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)
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.
Think about it this way, most developers should have been familiar with CSS, utility classes is a shorthand that make its easy to remember and find user defined class if you have tried Tailwind 3, I found it solve all of my checklists.
Like Bootstrap way, you can still define that with Tailwind classes either in input.css with @apply directive (abstract out utility classes from HTML) or Tailwind configuration. It’s a way to speed up our development.
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.)
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.
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).
If you want to change the style of antd it becomes real mess unless you are already familiar with "less". I found it very hard to change styles of antd(it is my own shortcoming) but despite knowing what to do in css and framework getting in your way to do it is really frustrating.
Has anyone used something like Tailwind-Styled-Component [1] and found it worthwhile?
https://www.npmjs.com/package/tailwind-styled-components