@ameinhardt/unocss-preset-daisy

UnoCSS preset for daisyUI

This daisyui preset directly uses the styles from your daisyui v4 version without pregeneration, supporting variants.

Demo here

🚀 Installation

npm install unocss daisyui @ameinhardt/unocss-preset-daisy

📱 Usage

📋 Notes

• pseudo classes
  unocss preset-mini uses e.g. "file" as pseudo-class variant to style the button of file inputs while assuming ":" and "-" as variant seperator. to avoid conflicts with e.g. file-input, limit the sperator in your unocss config to ":" only:

  ...
    separators: [':']
  ...

• variable prefixes
  By default, unocss Mini preset uses un- as variable prefix for transformation values. DaisyUI uses Tailwinds tw-. This presets rewrites tw- to un-. You can define a custom prefix with variablePrefix option, which should align with Mini preset.
• Reset css
  @unocss/reset comes with unocss. If you are using pnpm, install it separately unless you enable hoisting.
• Theme colors
  In daisyUI v4, for including theme colors, use

  import colors from 'daisyui/src/theming/index.js';
  ...
    theme: {
      colors
    }

  In daisyUI v5, for including theme colors, use

  import theme from 'daisyui/functions/variables.js';
  ...
    theme: {
      ...theme
    }
  

• Development styles
  If dev environment with virtual:unocss-devtools overlays css rule priority, use safelist to make sure the effected classes are generated. See Edit classes in DevTools.

Vite

vite.config.ts

import { presetDaisy } from '@ameinhardt/unocss-preset-daisy';
import { presetWind4 } from 'unocss';
import unocss from 'unocss/vite';
import { defineConfig } from 'vite';

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

main.ts

import '@unocss/reset/tailwind.css';
import 'virtual:uno.css';

Astro

import { presetDaisy } from '@ameinhardt/unocss-preset-daisy';
import { defineConfig } from 'astro/config';
import { presetWind4 } from 'unocss';
import unocss from 'unocss/astro';

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

Nuxt

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

import { presetDaisy } from '@ameinhardt/unocss-preset-daisy';
import { defineNuxtConfig } from 'nuxt/config';
import { presetWind4 } from 'unocss';

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

🛠️ Config

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

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

⚠️ Limitations

• This is not a full daisyUI port.
  All daisyUI components/utilities should work but they may not work with some UnoCSS features.
• Some unused styles may be imported.
  This is both due to lots of hacks being used and how UnoCSS works. However, the preset will try to figure out the minimum styles needed, thus the cost is trivial most of the time.