--- title: daisyUI : Magic of Tailwind CSS 💖 | daily.dev description: daisyUI is a plugin for Tailwind CSS that adds component class names for common UI elements, reducing the need for writing utility class names. It also offers... canonical: https://daily.dev/posts/daisyui-magic-of-tailwind-css--4zzntldyu twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: daisyUI : Magic of Tailwind CSS 💖 | daily.dev og:description: daisyUI is a plugin for Tailwind CSS that adds component class names for common UI elements, reducing the need for writing utility class names. It also offers... og:url: https://daily.dev/posts/daisyui-magic-of-tailwind-css--4zzntldyu og:image: https://api.daily.dev/og/posts/4ZZnTLDyU.png og:image:alt: daisyUI : Magic of Tailwind CSS 💖 og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # daisyUI : Magic of Tailwind CSS 💖 **[Dev Squad](https://daily.dev/sources/devsquad)** · [@adityajodhani](https://daily.dev/adityajodhani) · 157 upvotes · 9 comments ## Summary daisyUI is a plugin for Tailwind CSS that adds component class names for common UI elements, reducing the need for writing utility class names. It also offers customizable color names and a theme generator. With daisyUI, developers can create beautiful websites faster and with less code. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@brynb** · 9 upvotes > I don't get the point of DaisyUI. If you're going to switch from Tailwind classes to BEM classes, then why use Tailwind at all? Any half-decent dev environment has some sort of components system that keeps you DRY, so using a long string of TW class names in components is irrelevant to the workflow. > > But if you're fundamentally going to stick to BEM naming across the board and @apply everything from TW, you may as well just use your own set of variables rather than a gigantic CSS framework that needs a build process. Using BEM + TW feels like enjoying neither of their strengths. > > I'm happy to... **@tommy04** · 3 upvotes > I always use this one when I want to quickly build an idea. **@dev321** · 0 upvotes > I got its best alternative: dev-components.vercel.app **@irfanhabib** · 0 upvotes > I prefer NextUI . Best ui lib **@louisjs** · 0 upvotes > We would need something like this in the React Native ecosystem > Using Nativewind ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#tailwind-css](https://daily.dev/tags/tailwind-css) [View this post on daily.dev](https://daily.dev/posts/daisyui-magic-of-tailwind-css--4zzntldyu) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/daisyui-magic-of-tailwind-css--4zzntldyu","headline":"daisyUI : Magic of Tailwind CSS 💖","text":"Shared: daisyUI — Tailwind CSS Components ( version 4 update is here )","url":"https://daily.dev/posts/daisyui-magic-of-tailwind-css--4zzntldyu","datePublished":"2024-07-31T03:47:09.559Z","dateModified":"2024-07-31T03:47:09.564Z","author":{"@type":"Person","name":"Aditya Jodhani","url":"https://daily.dev/adityajodhani","image":"https://lh3.googleusercontent.com/a/ACg8ocId2J3QI8FJ2-zD1eMnXEy74fq6XeoKo7QkUpmiHa7rFOmkKSfU=s96-c","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":1400}},"image":"https://media.daily.dev/image/upload/s--OHB84bZF--/f_auto/v1722860399/public/Placeholder%2010","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":157},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":9}],"sharedContent":{"@type":"WebPage","url":"https://api.daily.dev/r/2iNWZeMtW"},"comment":[{"@type":"Comment","text":"I don’t get the point of DaisyUI. If you’re going to switch from Tailwind classes to BEM classes, then why use Tailwind at all? Any half-decent dev environment has some sort of components system that keeps you DRY, so using a long string of TW class names in components is irrelevant to the workflow.\nBut if you’re fundamentally going to stick to BEM naming across the board and @apply everything from TW, you may as well just use your own set of variables rather than a gigantic CSS framework that needs a build process. Using BEM + TW feels like enjoying neither of their strengths.\nI’m happy to be wrong, but I just don’t see why this would be great.","datePublished":"2024-08-01T10:48:20.749Z","url":"https://daily.dev/posts/4ZZnTLDyU#c-F49Eu05Qv","author":{"@type":"Person","name":"Bryn","url":"https://daily.dev/brynb","image":"https://media.daily.dev/image/upload/s--b_3A2VO4--/f_auto/v1722507673/avatars/avatar_jvBP4TM8FzvUXVqNe1rDZ"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":9}},{"@type":"Comment","text":"I always use this one when I want to quickly build an idea.","datePublished":"2024-08-14T08:14:58.086Z","url":"https://daily.dev/posts/4ZZnTLDyU#c-uqmfZQwNp","author":{"@type":"Person","name":"Thomas","url":"https://daily.dev/tommy04","image":"https://avatars.githubusercontent.com/u/79528278?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"I got its best alternative: dev-components.vercel.app","datePublished":"2024-10-15T19:27:04.647Z","url":"https://daily.dev/posts/4ZZnTLDyU#c-IMx8fwvNC","author":{"@type":"Person","name":"Dev Yadav","url":"https://daily.dev/dev321","image":"https://lh3.googleusercontent.com/a/ALm5wu3hEUHl8KX4sAKtaLQjpoLQ0u2z_nF4cdEX7Vr9=s96-c"}},{"@type":"Comment","text":"I prefer NextUI . Best ui lib","datePublished":"2024-09-15T05:02:55.126Z","url":"https://daily.dev/posts/4ZZnTLDyU#c-IdWOkUZ52","author":{"@type":"Person","name":"Irfan Habib","url":"https://daily.dev/irfanhabib","image":"https://lh3.googleusercontent.com/a/AAcHTtf-i-z9reBBRpFL0AXK9rle1GdD0v79YCfQA_04YgQ1MA=s96-c"}},{"@type":"Comment","text":"We would need something like this in the React Native ecosystem\nUsing Nativewind","datePublished":"2024-10-31T16:58:20.512Z","url":"https://daily.dev/posts/4ZZnTLDyU#c-HLAnm764Q","author":{"@type":"Person","name":"Louis Lcq","url":"https://daily.dev/louisjs","image":"https://avatars.githubusercontent.com/u/6095371?v=4"}}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/squads/devsquad","name":"Dev Squad"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Dev Squad","item":"https://daily.dev/squads/devsquad"},{"@type":"ListItem","position":3,"name":"daisyUI : Magic of Tailwind CSS 💖"}]} ```