A quick look at Daisy UI - a UI library built on top of Tailwind CSS. 💬 Topics: - Pros and cons of Tailwind CSS; - Styling modern web apps; - Atomic CSS and utility classes; - Best component libraries; - Working with Daisy UI.
I've used daisy-ui for about a year both professionally and in hobby projects. I've also worked quite a bit with component libraries, and the moment I want to do something custom they tend to fight back. DaisyUI as an abstraction over tailwind is the way to go for my development mindset. Every element has its default styling removed, and I have a blank slate to work with.
I've used tailwind in production and they were a few drawback to keep in mind before jumping on the solution : - If your app need a lot of computed CSS don't go for tailwind, highly limiting if you want to follow the best practices recommended by the doc - If you need really complex CSS, tailwind wont support it and you will end up mixing raw CSS with tailwind syntax - If you are using another component library don't bother using tailwind. You will end up mixing up css and tailwind as they often are not really compaptible. ( Which is what daysyUI is supposed to fix) Overall i think tailwind is great for SSR without component library. Would use for Proof of Concept but not for a fully scaling and maintainable application
Third. More excellent content, I'm totally wedded to Tailwind for any side project - this looks like something really useful for quickly implementing components that can be really annoying to do manually (I'm looking at you carousel!)
Thank you for the feedback! Haha I found the carousel useful as well! I lost so many hours in the past with custom implementations or weird 3rd party libraries on this... 🤦♂️
I personally prefer tailwind with preline and write the component from scratch as i needed or tailwind with library like react aria and build component as i needed if i want animation just install framer motion or motion one and now you have more control over the ui
Looks nice, but is nowhere near replacing antd or mui. This looks more like a replacement for bootstrap or bulma. The benefit of antd and mui is their tight integration with react which makes actions like displaying notification popups, modals, etc... extremely easy. Not to mention that they come bundled with their own icon libraries
I agree. But I find a lot of value in being framework agnostic. I can live with some of the downsides if I can easily use Daisy with Solid or Svelte or whatever other new library that doesn't have a good component library built for it yet.
@@Septumsempra8818 If you use a screen reader or other accessibility tools, you might not be able to interact as expected with DaisyUI components because its interactivity is entirely CSS. For example, you cannot press ESC to close a DaisyUI modal like you might expect
I just like to use headless-ui or radix-ui for creating my own components, its super customizable and fully assessible. I wrap all my logic with CVA to make it super clean and flexible to use. I don't want to use any animation from the component library itself when im starting from scratch. Daisy UI is good when you want to get something out done quick.
@@Sandeep-zu7gdIt stands for Class Variance Authority. With the inclusion of CVA, a user-friendly interface is at your disposal, simplifying the definition of variants. These variants enable the conditional application of class sets, while also offering the means to express default variations.
@Awesome Thanks 😃 As a new dev, I was intimidated by IntelliJ because of its confusing UI, but this new one looks very clean and welcoming. I'll give it another shot!
@@ProLessSkill Sure thing! IntelliJ is by far the best IDE I ever used. Its main issues is the steep pricing. Other than that, it does extremely well with a lot of programming languages and frameworks.
I didn't hear anything after the guy typed class instead of className, I was just waiting for him to fix it to start paying attention, then realized it wasn't even React
Just like the primegen put it tailwind let's you revisit your site 6 weeks later and hit the ground running , also that context switching is worse than long html elements, I've also been sleeping on daisy UI given how poorly the other component libraries play with tailwind
i like it, but when u make side projects u dont want to reinvent components so you need JS.. plain CSS doesnt help you much with speed what about Flowbite or Catalyst UI?
I think the "ugliness" factor of Tailwind can be removed when using with css modules. Simply assign the className={styles.whatever} ...then in the css sheet: .whatever{ @apply w-4 h-8 etc...; }
Good question. I was using IntelliJ Idea for this project, and their default behaviour in TSX projects is to pre-fill JSX attributes with ={""} by default.
