Releases: saadeghi/daisyui
Releases · saadeghi/daisyui
daisyUI 4.0
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 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
*-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)]
- Removed all
- 🎨 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.
- daisyUI 4 components use logical CSS properties instead of directional rules (
- ⬅️ 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
intailwind.config.js
- Just add
dir=rtl
to<html>
tag and everything will be RTL on runtime.
- Removed
- 🗂️ 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
andafter
)
- No need to repeat modifier classes for each
- ⏺️ 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
- Removed
- 📦 Dependencies
- Removed
colord
,rtlcss
,postcss
,tailwindcss
- Added
culori
,picocolors
- Removed
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
- Added hover color for the following other buttons:
- 🗂️ 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
- Empty
- 🧩
@tailwindcss/forms
- Fix compatibility with
@tailwindcss/forms
plugin (even though you don't need it alongside daisyUI)
- Fix compatibility with
- ⚙️ 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.
- Now you can define target another element instead of
- New
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