Does DaisyUI Support Responsive Design?

[Macktireh]

I'm currently exploring DaisyUI and I've noticed that the components don't seem to be responsive. For instance, I've tested a navbar component and it doesn't appear to adapt based on screen size. How can I make or find components that are responsive?

Thanks in advance!

[saadeghi]

Tailwind CSS provides responsive class name prefixes like sm:, lg:, etc.
Depending on your content, you can use them to apply a class name for a specific screen size, or you can show and hide parts for a specific screen size.

There's an example here:
https://daisyui.com/components/navbar/#responsive-dropdown-menu-on-small-screen-center-menu-on-large-screen
In this example, You can see how lg:hidden hides the hamburger icon on large screens and how hidden lg:flex shows the horizontal menu only on large screens.

This way, you can make everything responsive based on how you want them to look like on each size or if you want to show/hide parts on some screens.
Read more: https://tailwindcss.com/docs/responsive-design

Let me know if you have a question.

[Macktireh]

@saadeghi Thank you for your quick response. I'm not very skilled with Tailwind CSS, but I'll try to follow your suggestion.

May I ask why DaisyUI doesn't support responsiveness, at least for components like the navbar, etc.? Based on the DaisyUI documentation, I thought the aim was to avoid writing too many Tailwind utility classes.

[saadeghi]

DaisyUI doesn't support responsiveness

That's not true!!
daisyUI adds class names to Tailwind CSS, and those class names can be used with any responsive prefix to become responsive. So daisyUI is responsive and supports responsive styles completely.

The decision on which part of content to be hidden/visible on which screen size, depends on your content.
For example, you can put 2 links on a navbar and they will fit on any screen, no need for responsive class names. But if you want to put 10 links on a navbar, they won't fit on mobile of course, so you should hide them on mobile and show a dropdown menu instead (like this)

No component library can guess the size of your content and dynamically replace them with other components or change the layout based on the width of your content. Even without daisyUI, if you have 5 columns of images on a page, you need to show 5 columns only on large screens, maybe 2 or 3 columns on smaller screens and maybe 1 column on mobile size. It depends on the width of your content and you should decide about it. It's not something any component library could do for you automatically.