nuxt / devtools

Unleash Nuxt Developer Experience
https://devtools.nuxt.com
MIT License
2.85k stars 153 forks source link

`@apply` in ui-kit conflicts with Tailwind #565

Closed alvarosabu closed 5 months ago

alvarosabu commented 8 months ago

🐛 The bug

Hi there, I'm trying to add a NSplitPane to Tres Devtools form @nuxt/devtools-ui-kit and I get this error:

[vite-node] [plugin:vite:css] [CssSyntaxError] ./node_modules/@nuxt/devtools-ui-kit/dist/components/NSplitPane.vue:65:2 : The `border-base` class does not exist. If `border-base` is a custom class, make sure it is defined within a `@layer` directive.

19 |    min-width: 0 !important;
20 |    width: 0 !important;
21 |    @apply border-r border-base;
   |    ^
22 |  }
23 |  .splitpanes--horizontal > .splitpanes__splitter {

If I remove the @nuxt/ui module it works. Maybe the unocss configs are colliding?

🛠ī¸ To reproduce

https://stackblitz.com/edit/nuxt-starter-xhtgcu?file=nuxt.config.ts

🌈 Expected behavior

Being able to use NSplitPane

ℹī¸ Additional context

No response

antfu commented 8 months ago

Yeah I think it conflicts with Tailwind. I'll see what we could do