All notable changes to this project will be documented in this file. See commit-and-tag-version for commit guidelines.
- selector performance for RTL stat (ad6f291)
- decrease default scrollbar color contrast using color-mix (92d98ed)
- theming function (4c83a88)
- scrollbars now have transparent background and currentColor foreground (f0ea341)
- disable initial button animation for
prefers-reduced-motion(57d470e)
- add
tab-activestyle for tabs witharia-selected="true"attribute (213ee58)
- checkbox/toggle with
checked="true"won't force to show a checked value visually anymore (17585a6), closes #2911
- add
carousel-startutility class
- don't apply menu item styles to
btnis inside menu (ac60762)
- use CSS scrollbar-gutter for drawer. close #2622, close #2483, close #2782, close #2142, closes #2004 (863afaf)
- unwanted background color in
.prose pre>code(5d6daf3)
- input type=date text-align issue in iOS (acf5377)
- drawer and modal backdrop color (0f994e3)
- Fix:
button-activecolor fallback for old browser - Fix:
linkhover color fallback for old browser - Fix:
menuline color fallback for old browser
- missing menu hover bg color (87c5ad7)
- improve default success color contrast vs base color (ef9f542)
- improve neutral color in dim theme (953534c)
- invalid color value in config now shows an error (41ee386)
4.3.0 (2023-11-16)
- fix Commonjs require issues
- divider default color not being visible on dark themes (fffd021)
- footer text opacity (f4be765)
- specificity issue on form inputs
4.0.0 (2023-11-12)
- 🌈 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 tooklch(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
*-focuscolor 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-focussecondary-focusaccent-focusneutral-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%)]
- Removed all
- 🎨 Themes
- there's a change in property names in
daisyui/src/theming/themes.jsfile.
If you're customizing a built-in daisyUI theme like this:change it to:...require("daisyui/src/theming/themes")["[data-theme=light]"],...require("daisyui/src/theming/themes")["light"], - All theme colors adjusted for better contrast, better color harmony and better accessibility.
- there's a change in property names in
- 🧠 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.
- daisyUI 4 components use logical CSS properties instead of directional rules (
- ⬅️ RTL
- Removed
rtldaisyUI config - All components now support LTR/RTL without any config or plugin.
- You don't need
tailwindcss-flipplugin anymore. - You don't need to set
rtl: trueintailwind.config.js - Just add
dir=rtlto<html>tag and everything will be RTL on runtime.
- Removed
- 🗂️ Tab
- No need to repeat modifier classes for each
tabitem. - these modifier classes for
tabare removed:tab-liftedtab-borderedtab-lgtab-mdtab-smtab-xs
- Use the following modifier classes for the parent
tabsclass instead:tabs-liftedtabs-borderedtabs-lgtabs-mdtabs-smtabs-xs
tabsclass is now using grid, instead of flex.- Lifted tab now uses a single pseudo element (
:before) instead of two (:beforeandafter)
- No need to repeat modifier classes for each
- ⏺️ Button
- buttons are not uppercase by default anymore
- Removed
--btn-text-caseCSS variable from themes
- ⚙️ Config
- Removed
rtlconfig because RTL is now automatic
- Removed
- 📦 Dependencies
- Removed
colord,rtlcss,postcss,tailwindcss - Added
culori,picocolors
- Removed
- 💡 Efficiency
- 92% less NPM module dependencies
- 73% smaller install size and node_modules footprint
- ✨ New components:
timelineskeletondifftheme-controller
- ➗ New divider color modifier class names
divider-primarydivider-secondarydivider-accentdivider-neutraldivider-successdivider-warningdivider-infodivider-error
- ➗ New divider position modifier class names
divider-startdivider-end
- 🎨 New themes:
- Dim
- Nord
- Sunset
- ⏺️ Buttons
- Added hover color for the following other buttons:
btn-infobtn-successbtn-warningbtn-error
- Added hover color for the following other buttons:
- 🗂️ Tab
- Empty
tabtag now grows and fills the empty space tabclass can now be a radio input.aria-labelvalue will be shown as the tab title so it's accessible for screen readers and keyboard navigation.- New
tab-contentclass allows you to switch tab content
- Empty
- 🧩
@tailwindcss/forms- Fix compatibility with
@tailwindcss/formsplugin (even though you don't need it alongside daisyUI)
- Fix compatibility with
- ⚙️ Config
- New
themeRootconfig- Now you can define target another element instead of
:rootto receive the color CSS variables. - This is useful for using colors in shadow root.
- Now you can define target another element instead of
- New
- 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
- 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 utility classes
- Update theme generator
- Show browser support for components that are using new CSS rules
3.9.4 (2023-10-27)
3.9.3 (2023-10-17)
3.9.2 (2023-10-05)
- improve logs (379137c)
3.9.0 (2023-10-05)
- increase Tailwind CSS dependency from ^3 to ^3.1 (35e577f)
3.8.3 (2023-10-02)
3.8.1 (2023-09-27)
- add
:focus-withinstyle to.input(#2363) (cac7938) - disable input outline when there's an
<input>tag inside a.inputwrapper (dc1766b)
3.8.0 (2023-09-26)
3.7.7 (2023-09-21)
3.7.6 (2023-09-19)
3.7.3 (2023-09-06)
3.7.2 (2023-09-06)
3.7.0 (2023-09-06)
3.6.5 (2023-09-04)
3.6.4 (2023-08-30)
3.6.3 (2023-08-25)
3.6.2 (2023-08-25)
3.5.1 (2023-08-03)
3.5.0 (2023-07-25)
- improve animation and transition speed for checkbox, collapse, drawer, dropdown, loading, menu, modal, radio, rating, swap, toggle, badge, file-input (561e4e6)
3.4.0 (2023-07-24)
3.3.2 (2023-07-24)
3.3.1 (2023-07-20)
- rename
toolbarclass of browser mockup tomockup-browser-toolbarto avoid future conflicts (23f9e17)
3.3.0 (2023-07-20)
3.2.2 (2023-07-20)
3.2.1 (2023-07-07)
- cleanup dependencies (57d79d3)
3.2.0 (2023-07-07)
- less node dependencies (f5859f7)
3.1.11 (2023-07-07)
3.1.10 (2023-07-06)
3.1.9 (2023-07-05)
3.1.8 (2023-07-05)
3.1.6 (2023-06-23)
3.1.5 (2023-06-20)
3.1.3 (2023-06-20)
3.1.2 (2023-06-20)
3.1.1 (2023-06-16)
- #1980 (a2434d4)
- #1985 (1ceff0c)
- #1995 invalid "for" property in examples (#1996) (e8031e6)
- #2001 (e7a6e6c)
3.1.0 (2023-06-11)
input-bordered,select-bordered,textarea-borderedare now usingbase-200for border coloe instead ofbase-content/20(0f5df66)