Changelog

All notable changes to this project will be documented in this file. See commit-and-tag-version for commit guidelines.

4.10.2 (2024-04-16)

Bug Fixes

4.10.1 (2024-04-04)

Bug Fixes

4.10.0 (2024-04-04)

Features

4.9.0 (2024-03-26)

Features

  • support OKLCH colors on Safari iOS 15 (56175e0), closes #2703

4.8.0 (2024-03-24)

Features

  • checkbox/toggle with checked="true" won’t force to show a checked value visually anymore (17585a6), closes #2911

4.7.3 (2024-03-09)

Features

  • add carousel-start utility class

4.7.2 (2024-02-13)

Bug Fixes

  • input element inside wrapper with input class background color. closes #2846 (938829d)

4.7.1 (2024-02-13)

Bug Fixes

  • don’t apply menu item styles to btn is inside menu (ac60762)

4.7.0 (2024-02-12)

Features

4.6.3 (2024-02-12)

Bug Fixes

  • incompatibility of Astro Islands injected style and script tags. closes: #2835 (8b1cfed)

4.6.2 (2024-02-07)

Bug Fixes

4.6.1 (2024-01-29)

Bug Fixes

4.6.0 (2024-01-11)

Bug Fixes

4.5.0 (2024-01-02)

Features

Bug Fixes

  • prose code fallback color for old browsers. closes: #2715 (0471a04)

4.4.24 (2023-12-24)

Bug Fixes

  • unwanted background color in .prose pre>code (5d6daf3)

4.4.23 (2023-12-20)

Bug Fixes

4.4.22 (2023-12-20)

Bug Fixes

4.4.21 (2023-12-20)

Bug Fixes

4.4.20 (2023-12-14)

Bug Fixes

4.4.19 (2023-12-04)

Bug Fixes

  • input type=date text-align issue in iOS (acf5377)

4.4.18 (2023-12-03)

4.4.17 (2023-11-30)

Bug Fixes

  • drawer-content overflow when there’s a table. closes: #2262 closes: #1914 (206b207)

4.4.16 (2023-11-30)

Bug Fixes

  • drawer and modal backdrop color (0f994e3)

4.4.15 (2023-11-30)

Bug Fixes

4.4.14 (2023-11-28)

Bug Fixes

4.4.12 (2023-11-28)

Bug Fixes

4.4.11 (2023-11-28)

Bug Fixes

4.4.10 (2023-11-27)

Bug Fixes

4.4.9 (2023-11-26)

Bug Fixes

  • missing responsive dropdown modifiers. closes #2490 (ac3266a)

4.4.8 (2023-11-26)

Bug Fixes

  • Fix: button-active color fallback for old browser
  • Fix: link hover color fallback for old browser
  • Fix: menu line color fallback for old browser

4.4.7 (2023-11-25)

Bug Fixes

4.4.6 (2023-11-23)

Bug Fixes

  • radio tab visual issue on iOS safari. Closes #2568 (e38abad)

4.4.5 (2023-11-23)

Bug Fixes

  • missing menu hover bg color (87c5ad7)

4.4.4 (2023-11-23)

Bug Fixes

4.4.3 (2023-11-23)

Bug Fixes

4.4.2 (2023-11-18)

Bug Fixes

  • improve default success color contrast vs base color (ef9f542)

4.4.1 (2023-11-18)

Bug Fixes

  • improve neutral color in dim theme (953534c)

4.4.0 (2023-11-17)

Features

  • invalid color value in config now shows an error (41ee386)

4.3.0 (2023-11-16)

  • fix Commonjs require issues

Bug Fixes

4.0.9 (2023-11-16)

Bug Fixes

  • divider default color not being visible on dark themes (fffd021)

4.0.8 (2023-11-16)

Bug Fixes

4.0.6 (2023-11-14)

Bug Fixes

4.0.5 (2023-11-14)

Bug Fixes

4.0.4 (2023-11-14)

Bug Fixes

4.0.3 (2023-11-13)

Bug Fixes

  • specificity issue on form inputs

4.0.2 (2023-11-13)

Bug Fixes

4.0.0 (2023-11-12)

daisyUI 4

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 by 7%, you can use this class name:
      bg-[color-mix(in_oklab,oklch(var(--p)),black_7%)]
  • 🎨 Themes
    • there’s a change in property names in daisyui/src/theming/themes.js file.
      If you’re customizing a built-in daisyUI theme like this:
       ...require("daisyui/src/theming/themes")["[data-theme=light]"],
      change it to:
      ...require("daisyui/src/theming/themes")["light"],
    • 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

3.9.4 (2023-10-27)

Bug Fixes

  • docs: Remove bottom padding from dropdown example (#2437) (09d91c7)

3.9.3 (2023-10-17)

Bug Fixes

3.9.2 (2023-10-05)

Features

3.9.0 (2023-10-05)

Features

  • increase Tailwind CSS dependency from ^3 to ^3.1 (35e577f)

3.8.3 (2023-10-02)

Bug Fixes

3.8.1 (2023-09-27)

Features

  • add :focus-within style to .input (#2363) (cac7938)
  • disable input outline when there’s an <input> tag inside a .input wrapper (dc1766b)

Bug Fixes

3.8.0 (2023-09-26)

Features

  • tooltip color variants now can be extended using apply (11fb1b1), closes #2371

3.7.7 (2023-09-21)

3.7.6 (2023-09-19)

Bug Fixes

3.7.3 (2023-09-06)

Bug Fixes

3.7.2 (2023-09-06)

Bug Fixes

  • dropdown button border radius inside join (7e36bb0), closes #2115

3.7.0 (2023-09-06)

Features

3.6.5 (2023-09-04)

Bug Fixes

  • #2311 <select> font weight is not semibold anymore because it causes a bug in Safari (c773cdf)

3.6.4 (2023-08-30)

Bug Fixes

3.6.3 (2023-08-25)

Bug Fixes

3.6.2 (2023-08-25)

Bug Fixes

3.5.1 (2023-08-03)

Bug Fixes

3.5.0 (2023-07-25)

Features

  • improve animation and transition speed for checkbox, collapse, drawer, dropdown, loading, menu, modal, radio, rating, swap, toggle, badge, file-input (561e4e6)

Bug Fixes

3.4.0 (2023-07-24)

Features

3.3.2 (2023-07-24)

Bug Fixes

3.3.1 (2023-07-20)

Bug Fixes

  • rename toolbar class of browser mockup to mockup-browser-toolbar to avoid future conflicts (23f9e17)

3.3.0 (2023-07-20)

Features

  • add the browser mockup component from README.md list (#2147) (b58282e)

3.2.2 (2023-07-20)

Bug Fixes

3.2.1 (2023-07-07)

Bug Fixes

3.2.0 (2023-07-07)

Features

3.1.11 (2023-07-07)

Bug Fixes

3.1.10 (2023-07-06)

Bug Fixes

3.1.9 (2023-07-05)

Bug Fixes

3.1.8 (2023-07-05)

Bug Fixes

3.1.6 (2023-06-23)

Bug Fixes

3.1.5 (2023-06-20)

Bug Fixes

3.1.3 (2023-06-20)

Bug Fixes

3.1.2 (2023-06-20)

Bug Fixes

3.1.1 (2023-06-16)

Bug Fixes

3.1.0 (2023-06-11)

Features

  • input-bordered, select-bordered, textarea-bordered are now using base-200 for border coloe instead of base-content/20 (0f5df66)

Bug Fixes

daisyUI store

New template: SaaS Landing page

Available on daisyUI store

More details
Please upgrade your browser