Updates, ideas and resources
An overview of of daisyUI 5 upcoming changes and features
daisyUI 5 is in development and it will be released after Tailwind CSS 4 is released. Here’s what you can expect from daisyUI 5 and how it will be different from the current version.
Tailwind CSS 4 is in development and I can’t wait for it to be released. You can read the official announcement on the Tailwind CSS blog, but here are some of the highlights:
@layer
, @property
, color-mix()
, @starting-style
, anchor positioning, container queries, and moretailwind.config.js
file. Everything will be done directly in the CSS file.Read more at Tailwind CSS blog
Plugins API for Tailwind CSS 4 is still in development. Currently it’s not possible to use daisyUI with the alpha version of Tailwind CSS 4, but as soon as the new API is released, we will update daisyUI to be compatible with it.
Plugins in Tailwind CSS 3 and below were expected to be CSS-in-JS. But it is expected to be pure CSS files in Tailwind CSS 4.
This will make it easier to use daisyUI as a plugin in your Tailwind CSS project, and it will also make it easier for us to maintain and update daisyUI since it will be a pure CSS file, without any build process to convert CSS to CSS-in-JS.
With the current alpha version of Tailwind CSS 4, technically you can import the whole CSS file of daisyUI in your project but it won’t act as a Tailwind CSS plugin.
Which means it will include all unused class names in your production CSS file.
And you won’t be able to use Tailwind CSS responsive prefixes likelg:
with daisyUI class names. Because of this, it’s important to use daisyUI as a Tailwind CSS plugin.
So let’s wait for the new Tailwind CSS 4 plugins API to be released.
If Tailwind CSS 4 is going to allow importing CSS files as plugins, we won’t need a JS config file for daisyUI. Everything will be done in the CSS file.
You will be able to include the daisyUI CSS file as a Tailwind CSS plugin using the CSS @import
rule.
Previously, daisyUI was using a build process to convert the CSS files to CSS-in-JS. But with the upcoming Tailwind CSS 4 plugins API, we will be able to include pure CSS files for each component and each theme in the daisyUI source code.
This will make it possible to use specific components of daisyUI in your project without including the whole CSS file.
Native CSS nesting is now supported in all modern browsers.
Instead of using Post CSS nesting, we will use native CSS nesting in the upcoming version of daisyUI. This will reduce the size of the CSS files dramatically.
Colors in Tailwind CSS 4 will be defined as CSS variables and Tailwind CSS will use CSS color-mix()
function to change the opacity of the colors. This means we won’t need to convert the colors to a specific format to be used in Tailwind CSS.
daisyUI built-in themes will keep using OKLCH color format as it is currently the most ergonomic P3 color format, but you can use any color format for your custom themes and we won’t convert them to OKLCH in the production CSS file just to be compatible with Tailwind CSS opacity utilities.
A challenge for daisyUI 5 will be to generate the optional colors (like *-content
) as before because:
color-contrast()
function is not supported in browsers yetcolor-contrast()
function is not supported in Lightning CSS (The CSS parser used by Tailwind CSS 4) yet.daisyUI currently uses 4 dependencies:
postcss-js
to convert CSS to CSS-in-JS because Tailwind CSS 3 and below only accept CSS-in-JS syntax as pluginsculori
to convert colorspicocolors
for console colorscss-selector-tokenizer
for adding prefixesIf daisyUI package is going to include pure CSS files only, we can safely remove all these dependencies.
I’m not still sure how we can add prefixes to the daisyUI class names if we’re not going to process the styles using Post CSS, But I will find a way.
Container queries are now supported in all modern browsers. We will use them for components that need to be responsive based on their container width by default.
We’ve been using CSS :focus
or <details>
element for dropdowns in daisyUI as they were the best no-JS options we had at the time. The problem with them is, without using JS there’s no way to close a dropdown by both clicking outside OR clicking the button. You had to choose one.
But now we have a new option: Native HTML popover API is now supported in all modern browsers and we will use it for dropdowns in daisyUI. There’s also CSS anchor positioning which can help about the positioning of the dropdowns, preventing them from going out of the viewport.
Most components will have small design improvements. Not going to break your current design, but will make them all look better.
There will be new components in daisyUI 5. I will announce them when they are ready.
daisyUI currently has 32 built-in themes. Probably we will have even more built-in themes in daisyUI 5.
And each of the existing themes will be a simple CSS file that you can include in your project (or you can include them all using one import rule). It feels good when everything is simple a CSS file, right?
This year a lot of new CSS features got available in all modern browsers. And with the new Tailwind CSS 4 changes we will be able to make daisyUI styles simpler and the CSS files smaller.
We will use CSS variables for the size value of component. This will make it easier to customize the size of all components in your project by changing a few CSS variables, instead of adding utility classes to each component.
This feature will give you more control over the size of the components and will make it even easier to have full control over the design of your project.
daisyUI 5 will be compatible with Tailwind CSS 4 and all modern browsers.
daisyUI 4 will still be available for those who can’t upgrade to Tailwind CSS 4 or if they want to support old browsers.
We will make sure that the upgrade process from daisyUI 4 to daisyUI 5 is as smooth as possible, and we will provide a migration guide.
daisyUI 5 will be a major update, it will adapt to the new features of Tailwind CSS 4 and the new CSS features that are now available in all modern browsers. I’m excited for the release of Tailwind CSS 4 and I will make sure that daisyUI 5 is going to be ready as soon as possible after the release of Tailwind CSS 4.
Subscribe to the daisyUI newsletter to get notified about the updates.
Subscribe to daisyUI blog newsletter to get updates on new posts.
You will only receive a single email when a new blog post is published. No spam. No ads.