Skip to content

ameinhardt/unocss-preset-daisy

 
 

Repository files navigation

unocss-preset-daisy

UnoCSS preset for daisyUI

Checkout the demo!

Installation

npm install unocss daisyui 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 'unocss-preset-daisy'

export default defineConfig({
	plugins: [
		unocss({
			presets: [presetUno(), presetDaisy()],
		}),
	],
})
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 '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 'unocss-preset-daisy'

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

Config

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

{
	presets: [
		presetUno(),
		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:

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.

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 100.0%