This section documents version-specific API changes — prioritise recent major/minor releases.
-
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: 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
-
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
