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.

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 really use Tailwind. I enjoy my (S)CSS.

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.

For those interested in how to use this with HTMX, read on. DaisyJS supports HTMX as it can work with just plain HTML without needing a fancy JS framework like Vue or React.

You start by setting up something that can serve HTML and with a template engine. My favorite is Django. You also need daisyui, tailwindcss etc in a local NodeJS dir. Those parts aren't too hard, I'll skip over it.

Now you make sure you build a solid base.html with HTMX bits added. HTMX will fetch content from the Django views.

Now if you were using plain Tailwind you'd probably need to use something like django_components to basically make reusable components instead of using HTML. Not with DaisyJS as it simplifies Tailwind vastly; now you can just use <div class="chat-bubble"> and so on, and you get great looking components.

Also use template inheritance and includes, which are basic concepts in Django.

All in all this is a really clean solution that builds future proof apps without a messy JS framework and and SPA that you most likely don't need.

Anyway I'm a big fan of this approach. I get that people have issues with Tailwind itself but one should rather just consider it as a layer of abstraction that we're now skipping.

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">.

The evolution of the tailwind enthusiast is almost complete. Soon they’ll rejoin the old heads who never liked tailwind.

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.

"instead of writing 100 class names For every element, every page, every project, again and again…

use semantic class names sunglasses emoji It's descriptive, faster, cleaner and easier to maintain."

Semantic class names!? Brilliant. Does it seem like the web is reinventing itself to anyone else?

It is a shame that https://smacss.com never caught on and, instead, Tailwind won. DaisyUI is almost there, but it's just one of few projects that follow this architectural guideline.

Tailwind has the Bootstrap problem, in that I can tell straight away that a website uses Tailwind, and for some reason that is off putting.

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.

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.

I've worked with and without tailwind, with and without n other opinionated styling solutions. It honestly doesn't matter. Use whatever you want. Your project gets big enough you're going to make a mess of it anyway.

Moving to Scoped CSS in Vue components was a pleasure though at the time.

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)?

this isn't how Tailwind is supposed to be used. you abstract at the level of components, not class names. <Button /> instead of <button class="btn">

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

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.

Fiddling with the theme builder, [0] wow I really like how well done it is! Like a few other comments have said, you can tell when a website uses bootstrap/a tailwind theme you've seen before. The customization options do actually give just enough leeway to make something "not daisyUI like" while not looking garish. The colour themes to pick from are a nice touch too, many theme-rollers just give you a single theme and 100s of colours to configure individually yourself.

I don't use tailwind myself but I might try it with a this as a theme.

[0] https://daisyui.com/theme-generator

I didn't like Tailwind initially, but after using it for a week, it's hard to go back to regular CSS or even SCSS. I have a project that uses SCSS, and sometimes I wish I was using Tailwind instead, it makes the workflow so much easier.

I'd highly recommend people try out Tailwind for a week on their projects before giving up on it.

That said, I haven't tried DaisyUI so no opinions on that.

Related:

DaisyUI: The most popular component library for Tailwind CSS - https://news.ycombinator.com/item?id=38978290 - Jan 2024 (1 comment)

My Journey to build daisyUI: Why Tailwind CSS was not enough? - https://news.ycombinator.com/item?id=38727252 - Dec 2023 (16 comments)

DaisyUI – Tailwind CSS Components - https://news.ycombinator.com/item?id=28004515 - July 2021 (166 comments)

Or use a better atomic CSS in JS tool like Panda CSS and just make a mixin however you want (or use their batteries included library if you don’t want to). It’s too bad Tailwind is so popular despite it being so bad at composition and unreadable.

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

Only tangentially related but does anyone know if it's possible to override tailwind locally (in some component) with regular css, perhaps scoped to that component?

For example, tailwind typography is really nice but once that prose class is assigned to an element it seems hard to override things inside of that element.

> instead of writing 100 class names for every element, every page, every project, again and again…

I'm turned off from daisyUI with marketing like this. The alternative to daisyUI certainly isn't this.

I use Tailwind in a similar way that daisyUI does: by putting my utility classes in components and reusing the components.

daisyUI's value prop is that not everyone wants to do this for their custom design system. They should just stick to that instead of making false claims.

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.

At that point, why not just write CSS?

My experience with DaisyUI has been great, is the type of library that:

- 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!

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.

Currently using Daisy for https://skatevideosite.com and love it!

Just switched from Flowbite to Daisy.

It’s far simpler, and I don’t have to mess around as much with defining my own button styles etc.

As with all tech, Tis all a long road to the middle

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.

DaisyUI is like Bootstrap, it's great for me, I'm not a front-end developer. I'm using Rails and DaisyUI to build apps.

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!

Any website that hijacks scrolling can get in the sea.

```html <button class="btn"> ```

Congratulations! You've invented Bootstrap.

Are there any cool UI libraries for Svelte or Vue? Similar to Baseweb or Grommet?I am planning to move away from ReactJS some day

Q: Has anyone used claude working with DaisyUI? Don't like claude's default ui choices.

i dont get it, this is a wrapper on top of tailwind that is a wrapper on top of css?

This is like "Bootstrap for Tailwind?"

Sooo... Just like using componenets with Tailwind, as intended?

Doesn't this miss the point with Tailwind and why we have Tailwind in the first place?

Any of you that bitch about this actually used it?

DaisyUI is the best. so easy to _just start_ something.

A bit baffled by all the "Why not just use CSS?" comments here.

Did we forget how much of a pain CSS still is?

For example, I recently made a UI with a series of numbered steps. To the left of each step is a number with a circle around it as a highlight.

The CSS I came up with looked like this:

.step-number { align-items: center; background-color: #0074cc; border-radius: 50%; color: white; display: flex; font-size: 14px; font-weight: bold; height: 24px; justify-content: center; line-height: 24px; margin-right: 10px; width: 24px; }

Did it produce a circle? Of course not. It produced a squished egg shape.

What did I have to do? I had to add "min-width: 24px;" to the class. Why? Hell if I know. "width: 24px;" should've done the job.

Bootstrap (and now Tailwind) exist for a reason: CSS still sucks.

I really don't understand why you use Tailwind for a CSS component library.

To use your component library now people have to use Tailwind, while if you'd used regular CSS both sites with and without Tailwind could use the library (Tailwind is additive on top of CSS after all).

Maybe it appeals to people in the Tailwind bubble, and gain momentum that way?

Tailwind gives me the same feeling of impotent nerdrage that Helm does. In both cases, as soon as I figured it what it was really doing, I was like, no. This is just…wrong.

(I’m sure people find it useful in some way, despite that.)

This is just themed Bootstrap.

Is it just me or the tailwind users actually learned what is a semantic css?

Wrapper of a wrapper. Front end dev is a mess lol

[dead]

[dead]