Tailwind CSS Components
Adds component classes like btn
, card
and more to Tailwind CSS
- 👉 [ See all components ]
- 📘 Documents: daisyui.com
- 🎲 Try it online: Tailwind Play | Codepen
- 📦 Source: GitHub | NPM | Unpkg | JSdeliver | cdnjs
show / hide
- Tailwind CSS plugin
daisyUI is a Tailwind CSS plugin. Install it and add it to yourtailwind.config.js
file. - Component classes
Adds component classes to Tailwind. Classes likebtn
,card
,… So you will end up with a cleaner HTML. - Semantic color names
Adds color names likeprimary
,secondary
,accent
,…. - Customizable
You can customize the design of components with Tailwind utility classes and CSS variables. - Themeable
Add multiple themes and customize colors. You can even set a theme for a specific section of your page. - RTL supported
Enablertl
config for right to left layouts. - Pure CSS
No script file, no dependencies. Works on all frameworks and environments!
npm i daisyui
Then add daisyUI to your tailwind.config.js
[ Read more ]
module.exports = {
plugins: [
require('daisyui'),
],
}
Or use a CDN
Loading CSS files from CDN is not recommended for production. It's better to install Tailwind and daisyUI as Nodejs dependencies so you can config/customize everything, and purge unused styles.*
<link href="https://cdn.jsdelivr.net/npm/daisyui@1.21.0/dist/full.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
Use component classes to build your UI.
<a class="btn">Hello!</a>
<input type="checkbox" class="checkbox"/>
<input type="checkbox" class="toggle"/>
<div class="alert alert-success">
Message sent successfully
</div>
👉 See all components
🎲 Try it online
See the official site:
[ daisyui.com ↗︎ ]
Read the documents for more info:
[ Read contribution guide ]
show / hide
- Alert
- Artboard
- App bar
- Avatar
- Avatar group
- Badge
- Banner
- Breadcrumb
- Button
- Button group
- Calendar
- Carousel
- Card
- Chat bubble
- Collapse (Accordion)
- Comment
- Countdown
- Cover
- Divider
- Drawer
- Empty placeholder
- Footer
- Form
- Select
- Text input
- Text area
- Checkbox
- Radio
- Range slider
- Rating
- Toggle
- Upload
- Hero
- Indicator
- Kbd
- Link
- Loading
- Menu
- Mockup
- Browser
- Code
- Phone
- Window
- Navbar
- Mask
- Modal
- Pagination
- Progress
- Stack
- Stat
- Steps
- Tag
- Table
- Tabs
- Timeline
- Toast
- Tooltip
- Treeview
show / hide
- Blogs
- Youtube videos
- Supabase & Sveltekit - Build Twitter in 75 minutes
- Setup the Best Frontend JavaScript Stack - Svelte, Vite, TailwindCSS and DaisyUI
- Jamstack powered Image gallery with Cloudinary, Tailwind and DaisyUI
- SvelteKit Crash Course w/ Tailwind CSS and DaisyUI, GraphQL and dynamic routes
- DaisyUI : Worth a try or skip on by?
- How to use daisyUI in SvelteKit?
- DaisyUI Untuk Yang Mau Pindah ke TailwindCSS dari Bootstrap (Indonesian)
- Next.js - Tailwind - DeisyUI Setup
- Courses