Live data from Hacker News

DaisyUI: Tailwind CSS Components

daisyui.com

141–150 of 181 posts

Re: DaisyUI: Tailwind CSS Components

#141
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

Re: DaisyUI: Tailwind CSS Components

#143
post #36
post #27

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…

> 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. CSS classes already support this natively. The whole point of CSS was move up a level of abstraction, so you could collect related styles into a class and reference that class everywhere…

The original motivation of CSS was the cascading aspect of it. During its development, the web was largely seen as a web of documents. Style sheets tried mimicking how traditional publishers style their documents, books, etc. There is also a need to reconcile document styling applied by the user agent, the site author, and possibly other sources. This is where cascading comes into play.

Problems start to occur when using a system designed around traditional publishing to declare the layout of a web application. This is why CSS eventually gained layout-related functionality (flex, grid, container queries, etc.), among other features.

Tailwind provides two things out-of-the-box that make it convenient for building web applications: (1) it comes with a ready-to-use style system; (2) it allows styles to be colocated with markup. The second point is mostly useful for building UI components. Everything strictly related to presentation can be stored within a single file.

Before using Tailwind, I was a strong advocate of CSS modules (and I still strongly advocate for CSS modules if one wants to avoid Tailwind). With either approach, one can achieve isolated styling between components. Repeated styling or markup is a strong indicator that you should extract something into a component.

Re: DaisyUI: Tailwind CSS Components

#145
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.

Re: DaisyUI: Tailwind CSS Components

#146
post #53

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

Why not use Bootstrap or Semantic-UI? See they have actually updated Bootstrap =)

I would like to use tailwind css for styling but i also like components provided by these CSS frameworks.

Basically a DaisyUI, but with looks of Bootstrap or Semantic-UI

Re: DaisyUI: Tailwind CSS Components

#147
post #94

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?

I mean, that's certainly a valid set of users to target: people already using Tailwind that want some off-the-shelf components.

Re: DaisyUI: Tailwind CSS Components

#148

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: 1…

Yeah it's odd, CSS is pretty horrible to use and Tailwind eliminates some of its biggest problems (cascading, naming, organisation). DaisyUI isn't some sort of return to traditional CSS, it's a way to componentize your markup if you aren't using a system that has components built in, like React et al. This isn't some sort of full-circle reinvention of the wheel.

Re: DaisyUI: Tailwind CSS Components

#149
post #36

Earlier quoted context omitted.

> 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. CSS classes already support this natively. The whole point of CSS was move up a level of abstraction, so you could collect related styles into a class and reference that class everywhere…

I've been complaining about this for years, even writing an article on it. When the article initially made it's rounds on HN it was divisive. People seem to have cooled off a bit on tailwind since then, which is good, but you still see it being dumped into new projects, or originating things like this that attempt to build a facsimile of what we get "for free" in the browser https://pdx.su/blog/2023-07-26-tailwind-an…

Yes to all you have written here. That helps me feel less insane.

If React had scoped styles like Vue has, I don't think tailwind would have gained such traction. Lack of scoped styles in native CSS has always been a fundamental shortcoming (always, except for the brief moment in like 2013 when @scope was spec'd and implemented, only to be snuffed out shortly thereafter). But it's coming for real now, maybe...

Re: DaisyUI: Tailwind CSS Components

#150
post #5

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

>Doesn't this miss the point with Tailwind and why we have Tailwind in the first place? Not for me. Say I have a new app and I want it to have a left nav. I could write my own styles with tailwind or...I could just put a .menu on there and gets all the sensible defaults for padding, spacing, font size, background colors, etc. But having done that, I'll still want to edit the specific padding, spacing, fonts, and back…

You can just use Bootstrap then, there's no need for the extra abstraction of Tailwind and DaisyUI.
Post reply on HN