https://github.com/kidonng/unocss-preset-daisy

UnoCSS preset for daisyUI
https://github.com/kidonng/unocss-preset-daisy

Last synced: 3 days ago
JSON representation

UnoCSS preset for daisyUI

• Host: GitHub
• URL: https://github.com/kidonng/unocss-preset-daisy
• Owner: kidonng
• License: mit
• Created: 2022-08-05T10:16:42.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-07T11:19:27.000Z (9 months ago)
• Last Synced: 2025-02-01T09:08:25.068Z (10 days ago)
• Language: TypeScript
• Homepage: https://unocss-preset-daisy.vercel.app
• Size: 727 KB
• Stars: 233
• Watchers: 5
• Forks: 20
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-unocss - unocss-preset-daisy - daisyUI Preset. (Presets)
• awesome-unocss - unocss-preset-daisy - daisyUI Preset. (Presets)

README

        
# unocss-preset-daisy

> [UnoCSS](https://github.com/unocss/unocss) preset for [daisyUI](https://github.com/saadeghi/daisyui)

[Checkout the demo!](https://unocss-preset-daisy.vercel.app/)

## Installation

```sh

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

```js

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()],

		}),

	],

})

```

```js

import '@unocss/reset/tailwind.css'

import 'uno.css'

```

### Astro

```js

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.

```js

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](https://daisyui.com/docs/config/) (except for `logs` and `prefix`).

```js

{

	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:

- [#14](https://github.com/kidonng/unocss-preset-daisy/issues/14): [variants](https://windicss.org/utilities/general/variants.html) do not work

**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.