Skip to content

daisyUI 4.0
Compare
Choose a tag to compare
@saadeghi saadeghi released this 12 Nov 22:49
· 605 commits to master since this release
v4.0.0
790e7c6

Breaking changes

  • 🌈 OKLCH colors
    • daisyUI 4 uses wide-gamut OKLCH colors internally instead of HSL now.
    • The new OKLCH color model unlock access to 30% more colors comparing to RGB/HSL.
    • All internal color variables (--p, --s, etc) now contain OKLCH values instead of HSL.
    • If you're using those CSS variables directly inside your project like hsl(var(--p)) you have to change it to oklch(var(--p))
    • OKLCH colors are supported in Chrome/Edge 111+, Safari 15.4+, Firefox 113+
    • For old browsers, daisyUI provides HEX fallback colors only for the default dark/light themes.
    • Read more about OKLCH colors here.
  • 🌈 Color names
    • Removed all *-focus color names. They where being used only for buttons.
    • Darker colors are now generated using CSS color-mix() under the hood.
    • The following class names are removed now:
      • primary-focus
      • secondary-focus
      • accent-focus
      • neutral-focus
    • You can also make a color darker or lighter using CSS color-mix(). For example to make primary (--p) color darker, you can use this class name:
      bg-[color-mix(in_oklab,oklch(var(--p)),black)]
  • 🎨 Themes
    • All theme colors adjusted for better contrast, better color harmony and better accessibility.
  • 🧠 Logical CSS properties
    • daisyUI 4 components use logical CSS properties instead of directional rules (mr-*, pl-*, etc)
    • If you are using directional CSS rules (right/left) to modify daisyUI styles, it still works fine in LTR mode but you may want to double check.
  • ⬅️ RTL
    • Removed rtl daisyUI config
    • All components now support LTR/RTL without any config or plugin.
    • You don't need tailwindcss-flip plugin anymore.
    • You don't need to set rtl: true in tailwind.config.js
    • Just add dir=rtl to <html> tag and everything will be RTL on runtime.
  • 🗂️ Tab
    • No need to repeat modifier classes for each tab item.
    • these modifier classes for tab are removed:
      • tab-lifted
      • tab-bordered
      • tab-lg
      • tab-md
      • tab-sm
      • tab-xs
    • Use the following modifier classes for the parent tabs class instead:
      • tabs-lifted
      • tabs-bordered
      • tabs-lg
      • tabs-md
      • tabs-sm
      • tabs-xs
    • tabs class is now using grid, instead of flex.
    • Lifted tab now uses a single pseudo element (:before) instead of two (:before and after)
  • ⏺️ Button
    • buttons are not uppercase by default anymore
    • Removed --btn-text-case CSS variable from themes
  • ⚙️ Config
    • Removed rtl config because RTL is now automatic
  • 📦 Dependencies
    • Removed colord, rtlcss, postcss, tailwindcss
    • Added culori, picocolors

Features

  • 💡 Efficiency
    • 92% less NPM module dependencies
    • 73% smaller install size and node_modules footprint
  • ✨ New components:
    • timeline
    • skeleton
    • diff
    • theme-controller
  • ➗ New divider color modifier class names
    • divider-primary
    • divider-secondary
    • divider-accent
    • divider-neutral
    • divider-success
    • divider-warning
    • divider-info
    • divider-error
  • ➗ New divider position modifier class names
    • divider-start
    • divider-end
  • 🎨 New themes:
    • Dim
    • Nord
    • Sunset
  • ⏺️ Buttons
    • Added hover color for the following other buttons:
      • btn-info
      • btn-success
      • btn-warning
      • btn-error
  • 🗂️ Tab
    • Empty tab tag now grows and fills the empty space
    • tab class can now be a radio input. aria-label value will be shown as the tab title so it's accessible for screen readers and keyboard navigation.
    • New tab-content class allows you to switch tab content
  • 🧩 @tailwindcss/forms
    • Fix compatibility with @tailwindcss/forms plugin (even though you don't need it alongside daisyUI)
  • ⚙️ Config
    • New themeRoot config
      • Now you can define target another element instead of :root to receive the color CSS variables.
      • This is useful for using colors in shadow root.

Bug Fixes

  • Text color for disabled input #1622
  • Fix tab radius
  • Fix missing utility classes
  • Docs: Prefix not work on responsive classes #2445
  • Hover animations for state buttons #1790
  • Skeleton component #186
  • Uppercase buttons #2187

Docs

  • New translations for docs
    • Arabic
    • Farsi
  • daisyUI official store – Get professional templates made by daisyUI
  • daisyUI resources – A handpicked collection of community videos, articles and courses about daisyUI
  • Add roadmap page
  • Add docs for utiltiy classes
  • Update theme generator
  • Show browser support for components that are using new CSS rules
Assets 2
Loading