daisyui-skilld

name	daisyui-skilld
description	daisyUI 5 - The Tailwind CSS Component Library. ALWAYS use when writing code importing "daisyui". Consult for debugging, best practices, or modifying daisyui.
metadata	{"version":"5.6.3","generated_by":"cached","generated_at":"2026-06-28T00:00:00.000Z"}

saadeghi/daisyui daisyui@5.6.3

Tags: alpha: 5.6.0-alpha.4, beta: 5.6.0-beta.0, latest: 5.6.3

References: package.json • README • Docs • Issues • Discussions • Releases

Search

Use skilld search "query" -p daisyui instead of grepping .skilld/ directories. Run skilld search --guide -p daisyui for full syntax, filters, and operators.

API Changes

This section documents version-specific API changes — prioritise recent major/minor releases.

Major Breaking Changes (v5.0.0)

• BREAKING: artboard and phone-* classes removed entirely — use Tailwind w-* and h-* classes instead. Classes like artboard phone-1 become w-[320px] h-[568px] source

• BREAKING: avatar online class renamed to avatar avatar-online, offline to avatar-offline, placeholder to avatar-placeholder source

• BREAKING: card-bordered renamed to card-border source

• BREAKING: input-bordered class removed — input now has border by default; use input-ghost to remove border source

• BREAKING: select-bordered class removed — select now has border by default; use select-ghost to remove border source

• BREAKING: textarea-border class removed — textarea now has border by default; use textarea-ghost to remove border source

• BREAKING: file-input-bordered class removed — file-input now has border by default; use file-input-ghost to remove border source

• BREAKING: form-control, label-text, and label-text-alt classes removed entirely — use fieldset, legend, and label elements with Tailwind utilities instead source

• BREAKING: btn-group and input-group components removed — use join component with join-item class instead source

• BREAKING: footer is now vertical by default — use footer-horizontal to make it horizontal source

• BREAKING: table hover class removed — use hover:bg-base-300 (or any Tailwind background color) instead source

• BREAKING: tabs-lifted renamed to tabs-lift source

• BREAKING: Menu item modifier classes renamed: disabled → menu-disabled, active → menu-active, focus → menu-focus; vertical menu no longer w-full by default source

• BREAKING: mockup-phone class names changed: camera → mockup-phone-camera, display → mockup-phone-display source

• BREAKING: bottom-nav component removed — use dock component instead; btm-nav-xs/sm/md/lg → dock-xs/sm/md/lg, btm-nav-active → dock-active source

• BREAKING: btn-ghost hover style changed in v5 — now shows original color on hover instead of forcing a specific style source

• BREAKING: Default button height reduced; customizable via --size-field CSS variable source

• BREAKING: input now has default width of 20rem — no need for w-full max-w-xs source

• BREAKING: select now has default width of 20rem — no need for w-full max-w-xs source

• BREAKING: stack component refactored — set width/height on stack container, not items; added direction variants stack-bottom, stack-top, stack-start, stack-end source

• BREAKING: stats background now transparent — use bg-base-100 if background needed source

• BREAKING: Removed mask-parallelogram, mask-parallelogram-2, mask-parallelogram-3, mask-parallelogram-4 mask styles source

• BREAKING: diff component requires tabindex="0" on main element and each diff-item for iOS/keyboard navigation support source

New Components & Features (v5.x)

• NEW: hover-3d component for 3D card effect source

• NEW: text-rotate component for rotating between multiple words source

• NEW: skeleton-text variant for animated gradient text skeleton source

• NEW: dropdown-close modifier to force close a dropdown source

• NEW: is-drawer-open and is-drawer-close drawer state variants for conditional styling — enables icon-only drawer sidebars source

• NEW: Countdown component enhanced: supports 0–999 range with dynamic width, animate independently the 2 digits of numbers source

• NEW: Styled native HTML <select> element support (Chromium only; other browsers use OS style) source

• NEW: FAB (Floating Action Button) / Speed Dial component source

• NEW: Hover Gallery component source

• NEW: tooltip-content class for HTML content inside tooltips source

• NEW: CSS layers for improved specificity control added in v5.3 source

Also changed: Alert alert-outline, alert-dash, alert-soft variants · Alert alert-vertical, alert-horizontal layout · Badge badge-dash, badge-soft, badge-xl size · Card card-border, card-dash styles, card-xs/sm/md/lg/xl sizes · Card now acts as radio card when checkbox/radio inside · Chat chat-bubble-neutral color · Input/Select/Textarea/Kbd/Button/Badge/Menu/Tab/Table sizes unified with *-xl variants · Loading loading-xl · Radial Progress animation on value change · Select multiple height customization · Modal modal-start, modal-end positioning · Dropdown supports HTML popover attribute and CSS Anchor positioning · Support for prefers-reduced-motion media query · Typography plugin now applies colors only, not padding · Tab tabs-top, tabs-bottom positioning · Step step-icon class for custom icons

Best Practices

• Avoid dynamic class names by using Tailwind CSS safelist configuration — dynamically constructed class names like bg-{{ color }}-500 won't be detected by Tailwind's content scanner and won't appear in production builds, only in development source

• Use semantic colour names (primary, secondary, accent, success, warning, error, info) instead of Tailwind's utility colour shades — allows consistent theming across all components and simplifies dark mode/multi-theme support without per-element overrides source

• Compose custom colour additions with @theme and @plugin "daisyui/theme" blocks rather than using raw CSS or inline styles — ensures custom colours work with all Tailwind utilities and respect theme switching source

• Prefer daisyUI component classes over bare Tailwind utility chains for UI elements — reduces markup verbosity by ~97%, lowers LLM token cost for code generation, and makes intent clearer at a glance source

• Use native HTML <dialog> element with .modal class for modal dialogs — supports Esc key close, focus management, and prevents background interactions without JavaScript complexity source

• Use the Popover API with anchor positioning for dropdowns when targeting modern browsers — avoids z-index management and overflow clipping issues, allowing popovers to escape overflow containers source

• Prefer <details> elements over radio inputs for accordions when content searchability matters — allows browser's native find-in-page to locate collapsed content, and improves accessibility source

• Use <fieldset> with <legend> and <label> elements instead of the removed form-control class for semantic form grouping — matches HTML5 standards and clearly associates labels with field sets source

• Wrap input elements with <label class="input"> to compose icons, prefixes, and suffixes inline — reduces nesting depth and keeps related input content grouped without additional wrapper divs source

• Combine Headless UI (React/Vue) with daisyUI classes for advanced interactive components — Headless UI provides keyboard navigation and accessibility logic while daisyUI provides styling, ideal for complex dropdowns, menus, and popovers source

• Apply theme-controller class to checkbox/radio inputs and use JavaScript to persist theme state in localStorage or cookies — enables CSS-only theme switching without framework coupling while maintaining user preference across page reloads source

• Use unique name attributes for each accordion group when multiple independent accordions exist on the same page — radio inputs with identical names create a single group, preventing multiple items from opening simultaneously across unrelated accordion sets source

• Avoid placing focusable elements that lose focus (like <dialog>) inside CSS-focused dropdowns — the dropdown closes on focus loss, trapping interaction and breaking keyboard navigation source

• Use @plugin "daisyui" with theme declarations instead of legacy configuration methods — the plugin syntax provides better theme inheritance, colour variable scoping, and clearer integration with Tailwind CSS v4's @theme block source