Skip to main content

DaisyUI Version

DaisyUI v5​

Breaking Changes

  • bordered 为默认，增加 ghost 修饰
    • input-bordered, input-ghost
    • file-input-bordered, file-input-ghost
    • select-bordered, select-ghost
    • textarea-bordered, textarea-ghost
  • card-bordered -> card-border
  • bottom-nav -> dock
  • menu item 修饰符变化
    • disabled -> menu-disabled
    • active -> menu-active
    • focus -> menu-focus
  • tabs-lifted -> tabs-lift
  • table tr hover -> hover:bg-base-300
  • form-control, label-text, label-text-alt
    • 使用 <fieldset> , <legend>
    • fieldset=form-control
  • btn-group , input-group
    • 使用 join
  • 基于 TailwindCSS v4
  • 新增组件 List, Status, Fieldset, Label, Filter, Calendar, Validator, Dock
    • BottomNav -> Dock
    • Calendar 需要依赖实现，目前支持
      • cally web component
      • pika-single Pikaday
      • react-day-picker React DayPicker component
  • CSS 变量名调整为完整的名字，值使用 color
    • --b1 -> --color-base-100
    • 100% 0 0 -> oklch(100% 0 0)
  • 新增 size xl
  • 新增 *-soft, *-dash modifer
  • 新增 --depth, --noise 控制可交互内容视觉效果
  • 统一 btn size 计算 - 统一递增 2×4/0.5rem
    • xs 6 × 4 = 24px
    • sm 8 × 4 = 32px
    • md 12 × 4 = 48px -> 10 × 4 = 40px
    • lg 16 × 4 = 64px -> 12 × 4 = 48px
    • xl N/A -> 14 × 4 = 56px
    • 之前几乎从来不用 btn-md, btn-lg, 统一后 md 和 lg 变得更有意义
  • 统一 checkbox size 计算 - 统一递增 1×4/0.25rem
    • xd 4
    • sm 5
    • md 6
    • md 8 × 4 = 32px -> 7 × 4 = 28px
  • 新增变量用于自定义
    • --size-field base size of fields like input, button, tab, etc.
    • --size-selector base size of selectors like checkbox, radio, toggle, badge, etc.
    • --border border size of components like button, input, tab, etc.
  • 利用新的特性
    • @layer, @property, color-mix(), @starting-style , anchor positioning, container queries
  • 参考

DaisyUI v4​

  • 颜色类型调整 hsl -> oklch
    • hsl(var(--p)) -> oklch(var(--p))
    • Chrome/Edge 111+, Safari 15.4+, Firefox 113+
  • 颜色调整
    • 移除 *-focus - 之前只用于 button
      • bg-[color-mix(in_oklab,oklch(var(--p)),black)]
    • darker 使用 color-mix
  • 默认支持 rlt
  • 组件调整
    • tab 的 item 不需要重复 tab
    • tabs 使用 flex -> grid
    • button
      • 不默认大写
  • 新组件
    • timeline
    • skeleton
    • diff
    • theme-controller
  • 新主题
    • Dim
    • Nord
    • Sunset