What about the components on Blendful[0]? I agree that everything themed with Tailwind looks the same—but I think it's because the starter templates that are popularly used basically have the same look and feel, which is what this site is trying to escape from. Tailwind also has it's predefined color schemes, which enhance the stylistic lock-in.
Of course it's possible to break from the fray with Tailwind, but—I think generally speaking, it's fairly easy to build something that looks decently good, decently easy with Tailwind; and that's why people like it.
This is a rebuild of the antithesis of Tailwind on Tailwind. Bootstrap had this for decades (Daisy even copies the same semantic class names in some cases). Tailwind was supposed to break away from this, to specific actual styles directly, but looks like we're coming back full circle again. Why not just use Bootstrap?
I don’t know, it’s like you ask me to use CSS as it meant to be used all along, I don’t understand why I would need tailwind with daisy on top if I could just write CSS with the added benefit of no extra JS.
Or use Bootstrap for eye candy. Has been there for years and looks good enough.
In any case, it feels like we have come full circle, Red Queen race-style. Yay web development!
So my question is: Why build components on top of something like Tailwind instead of just regular CSS? Or are you able to customize and use Tailwind mixed in with the components? Then sure why not I guess.
I used DaisyUI for a recent project and really enjoyed it. It definitely isn't "Bootstrap for Tailwind". While it does have some semantic class names like bootstrap, it's very few comparatively. It does have a semantic palette (customizable), but this is integrated with tailwind, so all your tailwind utility classes share the palette.
It also has some unstyled or lightly-styled components (modal, dropdown, etc). These are just like using headless UI, but with less JavaScript. These also work well with the Tailwind utility classes to let you customize the actual display.
I'm surprised that a lot of the comments seem to be missing the reason that this project exists.
In many tailwind projects, you inevitably end up wanting to standardize how a button looks, how a field looks, etc., rather than copy+paste the same 20+ tailwind classes that you need to implement a nice looking button in tailwind.
Can you just apply it to `button { @apply flex items-center blahblahblah; }` in app.css? Of course you can. Or you can use the btn from DaisyUI.
I think DaisyUI is just a shortcut for many common UI components that you will inevitably want to build out and that you will necessarily eventually standardize in any app that grows large enough.
How does it differ from bootstrap? Well, you can continue to use tailwind for everything else that DaisyUI has not implemented. It's just an additive layer to tailwind. The project is at its core just a shortcut for common UI components.
As a user, my criticism is that many of the DaisyUI components seem to be lacking good contrast, so some just don't seem to be usable. The theming situation is really interesting and quite cool to use, but if you look at the example page, it just feels hard to read. I can't really find a light and dark default theme that look good to me (re: contrast and brightness). I think the color hooks might just not be there but I didn't dig far enough in.
For me, I've found a lot of value in being able to easily copy+paste parts of DaisyUI source code, e.g., a particular widget and modifying it to fit my design system, rather than use it in its entirety.
> In many tailwind projects, you inevitably end up wanting to standardize how a button looks, how a field looks, etc.
You should be using components for this, in whatever backend or frontend framework you have.
And if you say "well this button needs to have this specific piece of data or text but other buttons don't" - great, extract that from the component. There's no reason to create 12 different buttons.
And abstraction of an abstraction of an abstraction of an abstraction... Man, I'm never going to use it, but sometimes it's amazing to see what people can find worth their time.
Not entirely convinced about their graphs where they "improve" over tailwind with just HTML size and "number of class names". Why do these matter exactly? You're basically removing the number of classes in the HTML and adding the CSS anyways so how much are you really saving here?
I don't mind the existence of this library obviously but condensing into tiny abbreviated classes seems like the antithesis of tailwind but maybe it's for folks who can't or don't want to define a base button component every time and want a jumping off point. In that case I'd much rather use shadcn or something based on react-aria that gives me solid primitives that I can extend with tailwind classes passed to it in specific instances
I've been using daisyUI for a couple of years and really love it - it's a quick, reliable way to rig up a nice looking/functioning UI with minimal work, while making things appear reasonably uniform across pages/workflows.
The combination of Tailwind and daisyUI made it possible for me - a backend developer - to pretentd to be somewhat competent in frontendland, which has been incredibly handy, work-wise.
The fact is that without using component-based HTML, Tailwind _is_ a mess and Daisy is probably useful. It's an amusing full-circle moment, where Daisy UI is a spiritual successor to Bootstrap, which did the same thing but with CSS as the underpinning.
Inside of a system that splits the HTML into components, Tailwind classes are not a problem...You just end up with <x-button.primary> instead of <button class="primary">.
Bootstrap is a good practice in old time, tailwind is modern css, daisy ui is a battery included components in pure css based on tw. I use daisy ui in every project I work on, by using daisy ui, I don't need shadcn, I prefer <button> instead of wrap my own <Button>, and menu, dialog etc. With baseui components I have a very powerful toolset that let me build thing's fast and good enough.
I don't like the way how Daisy UI looks. But, I do like the way how Bootstrap or Semantic-UI CSS frameworks look. Has anyone tried to recreate the components of Bootstrap or Semantic UI using Tailwind CSS (including the looks)?
The biggest advantage is I can have great looking components with simple bootstrap syntax (add a primary or secondary class). When I need to I can write full tailwind syntax if I need something different. Great timesaver and while giving you all of your powertools.
After 20 years, my little company still uses just HTML, CSS and JavaScript for everything including two sites I'd bet money most of you visit at least a couple of times a month.
I agree with others that this is not how Tailwind is meant to be used. For example, the approach shadcn (https://ui.shadcn.com/) takes is much better IMO.
Creating helpers like `btn` makes it very difficult to understand how it works and is not very customizable. Shadcn creates an actual component for you in your codebase and is just trivial Tailwind styles to modify.
I tried shadcn and didn't like it. I don't want a new component in my source tree that I have to maintain.
For nearly everything, I won't need to customize it (and if I do have to customize often, it probably means that particular component library wasn't a good choice).
And for the rare cases where I do need to customize something, I can always go into the source of the component library, copy what I want out into my project, and edit it.
> this is not how Tailwind is meant to be used
Who cares? If it works, and makes the development process easier, and doesn't cause problems, then that's a good thing.
65 comments
[ 2.6 ms ] story [ 67.9 ms ] threadOf course it's possible to break from the fray with Tailwind, but—I think generally speaking, it's fairly easy to build something that looks decently good, decently easy with Tailwind; and that's why people like it.
[0]: https://www.blendful.com
Or use Bootstrap for eye candy. Has been there for years and looks good enough.
In any case, it feels like we have come full circle, Red Queen race-style. Yay web development!
I took a look at https://daisyui.com/components/button/ and immediately I see classes that look similar to Bootstrap.
So my question is: Why build components on top of something like Tailwind instead of just regular CSS? Or are you able to customize and use Tailwind mixed in with the components? Then sure why not I guess.
Otherwise it feels like going full circle here.
It also has some unstyled or lightly-styled components (modal, dropdown, etc). These are just like using headless UI, but with less JavaScript. These also work well with the Tailwind utility classes to let you customize the actual display.
In many tailwind projects, you inevitably end up wanting to standardize how a button looks, how a field looks, etc., rather than copy+paste the same 20+ tailwind classes that you need to implement a nice looking button in tailwind.
Can you just apply it to `button { @apply flex items-center blahblahblah; }` in app.css? Of course you can. Or you can use the btn from DaisyUI.
I think DaisyUI is just a shortcut for many common UI components that you will inevitably want to build out and that you will necessarily eventually standardize in any app that grows large enough.
How does it differ from bootstrap? Well, you can continue to use tailwind for everything else that DaisyUI has not implemented. It's just an additive layer to tailwind. The project is at its core just a shortcut for common UI components.
As a user, my criticism is that many of the DaisyUI components seem to be lacking good contrast, so some just don't seem to be usable. The theming situation is really interesting and quite cool to use, but if you look at the example page, it just feels hard to read. I can't really find a light and dark default theme that look good to me (re: contrast and brightness). I think the color hooks might just not be there but I didn't dig far enough in.
For me, I've found a lot of value in being able to easily copy+paste parts of DaisyUI source code, e.g., a particular widget and modifying it to fit my design system, rather than use it in its entirety.
No sane developer does this. Where does the Tailwind team or documentation encourage this?
You should be using components for this, in whatever backend or frontend framework you have.
And if you say "well this button needs to have this specific piece of data or text but other buttons don't" - great, extract that from the component. There's no reason to create 12 different buttons.
I don't mind the existence of this library obviously but condensing into tiny abbreviated classes seems like the antithesis of tailwind but maybe it's for folks who can't or don't want to define a base button component every time and want a jumping off point. In that case I'd much rather use shadcn or something based on react-aria that gives me solid primitives that I can extend with tailwind classes passed to it in specific instances
The combination of Tailwind and daisyUI made it possible for me - a backend developer - to pretentd to be somewhat competent in frontendland, which has been incredibly handy, work-wise.
Inside of a system that splits the HTML into components, Tailwind classes are not a problem...You just end up with <x-button.primary> instead of <button class="primary">.
- Is super useful, and keeps adding value over time.
- It doesn't get in the way when you don't need it.
Gives you prebuilt standards and semantics, (e.g https://daisyui.com/docs/colors) and you can extend it like tailwind easily.
Bonus: The way it implements themes, it makes sense to me, super easy. Love it!
See they have actually updated Bootstrap =)
then, inside your Button, you get a small bit of markup and your class names. makes it easy to see which markup gets which styles
that's also why the other discourage use of @apply, and why "ugly HTML" is rarely am issue. at least not in my experience
---
that said, if you're using Tailwind in an environment where there's no components, fragments, partials, whatever - then this might make sense
Creating helpers like `btn` makes it very difficult to understand how it works and is not very customizable. Shadcn creates an actual component for you in your codebase and is just trivial Tailwind styles to modify.
For nearly everything, I won't need to customize it (and if I do have to customize often, it probably means that particular component library wasn't a good choice).
And for the rare cases where I do need to customize something, I can always go into the source of the component library, copy what I want out into my project, and edit it.
> this is not how Tailwind is meant to be used
Who cares? If it works, and makes the development process easier, and doesn't cause problems, then that's a good thing.