kidonng / unocss-preset-daisy

UnoCSS preset for daisyUI
https://unocss-preset-daisy.vercel.app
MIT License
220 stars 19 forks source link

Error when using Nuxt3. #10

Closed onpix closed 1 year ago

onpix commented 1 year ago

I have the same problem as [#6 ]; that is, when using Nuxt3 + UnoCSS + daisyUI preset, styles are incorrect in nuxi preview, but everything works well when in nuxi dev.

I also make a small online demo to reproduce this problem:

https://stackblitz.com/edit/nuxt-starter-5h7iuh

and a StackOverflow question for more details:

https://stackoverflow.com/questions/74576221/how-to-correctly-use-unocss-presets-with-nuxt3

onpix commented 1 year ago

In UnoCSS inspector, I found other presets work well and their rules are matched but the rules of this daisyUI preset are "Potentially Unmatched". For example:

Potentially Unmatched
avatar, badge, badge-base, badge-primary
hermesalvesbr commented 1 year ago

Did you get it resolved?

onpix commented 1 year ago

Did you get it resolved?

No... I tried for some days and finally switched back to the vanilla tailwindCSS.

Rednas83 commented 1 year ago

I can't get it even to work with nuxi dev.

nuxt.config.ts

// https://v3.nuxtjs.org/api/configuration/nuxt.config
import { transformerDirectives } from 'unocss'
import presetDaisy from 'unocss-preset-daisy'

export default defineNuxtConfig({
  extends: 'content-wind',
  modules: ['@unocss/nuxt'],
  css: ['@unocss/reset/tailwind.css', '~/style.css'],
  unocss: {
    // presets
    uno: true, // enabled `@unocss/preset-uno`
    icons: true, // enabled `@unocss/preset-icons`
    attributify: true, // enabled `@unocss/preset-attributify`,
    presets: [presetDaisy()],

    // core options
    shortcuts: [],
    transformers: [transformerDirectives()],
    rules: [],
  }
})

plugins/ono-ui.ts

import OnuUI from 'onu-ui'
// import '@unocss/reset/tailwind.css' /* daisyUI assumes Tailwind CSS's Preflight */
import '@kidonng/daisyui/index.css' /* Import daisyUI **BEFORE** UnoCSS */
import 'uno.css'
import 'onu-ui/dist/style.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(OnuUI)
})

Resulting in: image

Any advice?

meixger commented 1 year ago

Related https://github.com/kidonng/unocss-preset-daisy/issues/6

kidonng commented 1 year ago

Please open a new issue if you still experience it with latest dependencies.