unocss-preset-daisy

Yet another daisyUI preset for UnoCSS

Fully (i think so) compatible UnoCSS preset for daisyUI

Variants (hover, focus, breakpoints: sm, md, etc.) supported.

This is a rework of kidonng's unocss-preset-daisy to make it work with UnoCSS variants, kudos to him for the original work.

Checkout the demo!

⚠️ ⚠️ ⚠️ Warning ⚠️ ⚠️ ⚠️

This preset makes heavy usage of shortcuts and rules, so, when using the UnoCSS VSCode extension, editor may become laggy. I recommend disabling the extension's color preview to help with that.

// in your global settings.json or workspace settings.json
{
  "unocss.colorPreview": false
}

Auto-completion suggestions may also take a while to appear, this is due to the amount of shortcuts generated by the preset.

Installation

from version 1.0.0 onwards, daisyui package is no longer required

npm install -D unocss @unscatty/unocss-preset-daisy

Usage

Note: @unocss/reset comes with unocss. If you are using pnpm, install it separately unless you enable hoisting.

Vite

import { defineConfig } from 'vite'
import unocss from 'unocss/vite'
import { presetUno } from 'unocss'
import { presetDaisy } from '@unscatty/unocss-preset-daisy'

export default defineConfig({
  plugins: [
    unocss({
      presets: [presetUno(), presetDaisy()],
    }),
  ],
})

// main.js
import '@unocss/reset/tailwind.css'
import 'uno.css'

Astro

import { defineConfig } from 'astro/config'
import unocss from 'unocss/astro'
import { presetUno } from 'unocss'
import { presetDaisy } from '@unscatty/unocss-preset-daisy'

export default defineConfig({
  integrations: [
    unocss({
      presets: [presetUno(), presetDaisy()],
      injectReset: true,
    }),
  ],
})

Nuxt

To use UnoCSS with Nuxt, @unocss/nuxt must be installed as well.

import { defineNuxtConfig } from 'nuxt/config'
import { presetUno } from 'unocss'
import { presetDaisy } from '@unscatty/unocss-preset-daisy'

export default defineNuxtConfig({
  modules: ['@unocss/nuxt'],
  css: ['@unocss/reset/tailwind.css'],
  unocss: {
    presets: [presetUno(), presetDaisy()],
  },
})

Things to consider

Attributify mode

DaisyUI is developed primarily for TailwindCSS, so, when using daisy's components and Uno's attributify mode, remember to always place components and modifiers inside a class attribute, otherwise, they may not work.

Complex components (like drawer, modal, etc.) that have nested child components, will not work when using attributify mode, as the child components expect to be inside a class attribute.

"Simple" components (like buttons, badges, etc.) may work when using attributify mode, however, some modifiers (btn-active, btn-outline, glass, etc.) are still hardcoded as class selectors, so, they will possibly not work.

Trying to adapt this preset to use attributify mode would be almost impossible as there is no way to know all possible combinations of components and modifiers.

You can still use attributify mode for other utility classes outside of daisy's components.

<!-- This will work -->
<!-- Note you can still use attributify mode for utilities outside daisy -->
<button class="btn btn-primary" hover="normal-case">Primary</button>

<!-- This will also work -->
<button btn btn-primary hover="normal-case">Primary</button>

<!-- This won't work as expected (btn-active is hardcoded as class selector) -->
<button btn btn-active btn-accent>Accent</button>

<!-- This will simply not work -->
<h3 class="font-bold my-1 text-xl">Drawer responsive (attributify)</h3>
<div drawer lg:drawer-open>
  <input id="my-drawer" type="checkbox" drawer-toggle />
  <div drawer-content class="flex flex-col items-center justify-center">
    <!-- Page content here -->
    <label for="my-drawer" btn btn-primary btn-block drawer-button lg:hidden>
      Open drawer
    </label>
  </div>
  <div drawer-side>
    <label for="my-drawer" drawer-overlay></label>
    <ul menu class="p-4 w-80 h-full bg-base-200 text-base-content">
      <!-- Sidebar content here -->
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  </div>
</div>

As a rule of thumb, if using a daisy component, always use class selectors.

Uno's variant group transformer

Same as Attributify

Z-positioning

Some components may appear on top or behind other elements, this is due to the way this preset generates shortcuts and how Uno sorts and applies the CSS code.

This can be easily fixed using the z-* classes to set the z-index of the element.

Config

This preset accepts the same config as daisyUI (except for logs and prefix).

{
	presets: [
		presetUno(),
		presetDaisy({
			styled: false,
			themes: ['light', 'dark'],
		}),
	],
}

Caveats

Unused classes, variable names and keyframes

When generating the shortcuts and rules from daisyUI, some CSS code (animation @keyframes) get generated. Some of them may not be used in your project, but they will still be generated and included in the final CSS. This is due to the way this preset generates the rules and shortcuts, I still need to figure out a way to fix this, but for now, it's not a big deal, as the unused code is not that big (mostly keyframes definitions, variables that hold data-url svg elements and themes configuration).

Other than that, code for components is generated on demand, as expected.

If you are concerned about this, you can use something like PurgeCSS to remove the unused code from the final CSS. If you use Vite to build your project, you can use the Vite plugin for PurgeCSS.

TODO

• Make demo less ugly. Organize components in their own pages, add more components, etc.
• Fix unused code generation (move keyframes to preset config insted of preflights, convert variables to CSS object definition).
• Make it possible to extend components using shortcuts, scoped by theme. Potentially by using the unocss-preset-theme. So, defining a new theme would be way easier.
• Rename functions to make it more clear what they do.
• Add tests
• Remove static daisyUI component files
• Remove unused playground dependencies (move playground dependencies to its own package.json)
• Add prefix option
• Make daisy-untailwind a peer dependency

Credits

• daisyUI
• UnoCSS
• kidonng's unocss-preset-daisy - inspiration and base for this preset

Authors

• Carlos Aguilera (@unscatty) - Creator, maintainer