Closed onpix closed 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
Did you get it resolved?
Did you get it resolved?
No... I tried for some days and finally switched back to the vanilla tailwindCSS.
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:
Any advice?
Please open a new issue if you still experience it with latest dependencies.
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 innuxi 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