why daisyui add base classes not utility classes to the component?

[yaman3bd]

I was wondering why would daisyui use a base parent class like btn btn-{color} etc...
not used utility classes directly to the element, even Tailwind says not to use such base classes because the compiled .css file would increase in size.

for example, the btn class has display: flex and I want to add flex class to another element the display: flex property will be added to btn and flex classes instead of only one class and that will result in the compiled .css file to increase in size.
also, I asked in the Tailwind discord community everyone said they would use utility classes.

I am working on React component library for internal use, but I am really confused about what to use base parent classes or utility classes, and I spent a long time searching on what is the best approach to follow but I came across the issue of increasing in size of the compiled .css file or conflict with tailwind classes
so I am really curious to understand how daisyui solved this issue.

[saadeghi]

Apologies for long answer but you asked a general question and there's a lot to talk about here so I'm going to slice it to smaller questions:

Utility, Component... What's the difference?

There is no "best approach". It's just a different level of abstraction.

• If you write inline CSS, it's the lowest level of abstraction
• If you write only utility classes, it's a little bit higher
• If you write component classes like Bootstrap, it's a higher level of abstraction
• If you import a big JS component which has a lot of HTML elements and styles included (for example <DatasetTable tabledata={obj}>) it's the highest level

As you can see:

• Lower levels give you more customizability and you can control everything but you have to write more and lowers your development speed.
• Higher levels give you faster development speed but you have less control on little details

So how is daisyUI helping?

daisyUI is not a replacement for Tailwind CSS. It's an addition because with Tailwind CSS + daisyUI you can create pages faster and you can still customize the details using utility classes.

But how about smaller CSS size?

I can confirm using daisyUI increases the CSS file size (about 5% to 15% depending on the project) but of course it lowers the markup size about the same amount.
Let's say we used 100 utility classes total with utility-only approach, our CSS will have 100 class names, each one for a CSS rule. However, we use these class names in the HTML multiple times. So with using Tailwind CSS (no daisyUI) we lowered the size of CSS in cost of increasing the size of HTML.

Speed of development?

Tailwind CSS is suggesting a utility-first approach to maximize the customizability but that's not the fastest way to develop apps. You can try using Tailwind CSS (with no component library) to create a few websites, after a while you will ask yourself "why should I create the same toggle style for all my projects again and again?" because there is a high chance all your projects need a standard set of common styles for most of the elements anyway. You need the styles for button, checkbox, menu, etc. again and again. The only difference is probably colors or border-radius. So it's not efficient to copy/paste 60 utility classes through all your projects again and again to re-create the same button style.

In my experience if you want to develop faster, you would need a higher level of abstraction so instead of writing 60 utility classes for a button, you can just quickly write btn and you get pre-designed button with hover effect, focus effect, sizes and colors. Then you can add a btn-primary to modify the role of your button or btn-lg to modify the size (these are the standard design tokens you will need in your design system anyway) And thanks to Tailwind CSS' utility classes you can customize them even more if you need.

But is daisyUI against the utility-first approach?

And I should mention that daisyUI or any component library on top of Tailwind CSS is not "against the utility-first approach" A daisyUI project is still utility-first but there are additional components for faster development because we don't want to re-invent the wheel for all the common elements.
Having components in Tailwind CSS is a feature from Tailwind CSS itself. As you can see here there is API for adding component classes and you can even see a .btn example. Also there are "component library" plugins created and recommended by Tailwind CSS itself like tailwindcss-forms

But we already experienced Bootstrap... are we going full circle?

Bootstrap's idea of having class names for elements was not bad at all. The problem with bootstrap was lack of customizability. That's why all Bootstrap websites look like each other and the only way to build something different was to write lots of custom CSS to override the default theme.
It's not the same with daisyUI because daisyUI itself is on top of Tailwind CSS so we have the power to customize everything using CSS classes. Also, with daisyUI's theme engine you can be sure your project has a unique look comparing to all other websites built with daisyUI.

But is it a big commitment to use daisyUI instead of utility classes?

It's not a big commitment. You don't have to use daisyUI for everything. For example you can use 2 or 3 components and keep using Tailwind CSS utility classes for everything else. Unused styles will be purged by Tailwind anyway.

I'm not sure yet...

If you're not sure if you need daisyUI or not, I would suggest keep using utility classes only for 5~6 projects. That would be the point you will come to the conclusion that you need a faster way.