[Feature Request] UnoCSS

[Sandros94]

Just wondering, how much complex would it be to create a UnoCSS based version?

Why?

The main reason it could be useful is because, when self-hosting, I've noticed that UnoCSS is easier to handle on really small vps/containers (like .25 vCPU).

[jbreuil]

+1 It would increase the customisation possibility But I don't see how the theming would work because ui is using nuxt app config to make changes at runtime while unocss is used at build time. Maybe this is something that could be change on unocss side by giving access to some css var that would be changed on the fly by the app config.

[Sandros94]

But I don't see how the theming would work because ui is using nuxt app config to make changes at runtime while unocss is used at build time.

That was one of my concerns too, but more importantly is that not all unocss configs are available within nuxt.config.ts (like transforms iirc). So this probably requires some work on uno side before we could have it.

[acidjazz]

I would LOVE this feature!

[cesswhite]

Agree, UnoCSS is better to handle

[joseehilton147]

https://unocss.dev/integrations/runtime

this dont work? using as cdn instead package?

example pen: https://codepen.io/antfu/pen/eYGNXGo?editors=1111

[phojie]

yea i agree to this one unocss > tailwindcss, a million times. uno offers a lot customization

[phojie]

+1 It would increase the customisation possibility But I don't see how the theming would work because ui is using nuxt app config to make changes at runtime while unocss is used at build time. Maybe this is something that could be change on unocss side by giving access to some css var that would be changed on the fly by the app config.

Unocss can handle theming itself

[phojie]

only @antfu can answer this one 😃

[acidjazz]

I did some reading up on supporting uno, I'm not sure it's quite possible to support both unless the module part of this UI was extracted into its own package, and maybe we can have @nuxthq/ui-tw and @nuxthq/ui-uno, and then both share a package that is the actual UI.

I spent some time trying to get a clone version going - I have it working locally but when installed as a production module I get errors with sourcemapping:

https://github.com/fumeapp/unoui

Feel free to help out and PR any fixes/etc, I think what I might need which uno lacks as a module, but tailwind provides, is a hook to extend instead of just making all the configuration at runtime, so i created this:

https://github.com/unocss/unocss/issues/2786

If we can get this working I'll be happy to maintain it as a clone until/if the uno team or nuxt team want to make their own official one. I can put more work into the migration scripts so that updates to this package will be easy to copy/port over.

[texastoland]

I'm just watching the issue but @kidonng could have useful experience from https://github.com/kidonng/unocss-preset-daisy! @antfu might even be willing to offer his suggestion considering how prominent this package is?

[kidonng]

That preset is a bunch of hacks with known issues, and this is given daisyUI is pure CSS and much more simpler than NuxtLabs UI.

I'm not saying it's impossible, but it would be hard to avoid PostCSS completely or losing some UnoCSS features/advantages.

That said, I may give it a try if I have time. I would not expect a third-party solution to be perfect 😅

[antfu]

I did take a look into the codebase. But unfortunately, I think the current approach is coupled too deeply with Tailwind's API, so I guess there may not be a straightforward way to support UnoCSS.

I guess doing a fork rewrite (as @acidjazz is doing) might be a more reasonable approach.

[acidjazz]

I did take a look into the codebase. But unfortunately, I think the current approach is coupled too deeply with Tailwind's API, so I guess there may not be a straightforward way to support UnoCSS.

I guess doing a fork rewrite (as @acidjazz is doing) might be a more reasonable approach.

Glad to hear my approach is a good one , feel free to 👀 at https://github.com/unocss/unocss/issues/2786 so I can continue :)

[rashidpathiyil]

Hey @acidjazz, is unoui ready to use in production https://github.com/fumeapp/unoui

[zanfee]

Does this mean you cannot use Nuxt UI when using UnoCSS or is there a way to disable Tailwind or use them together? Tailwind doesn't know Uno classes and crashes.

[jimmzexe]

Does this mean you cannot use Nuxt UI when using UnoCSS or is there a way to disable Tailwind or use them together? Tailwind doesn't know Uno classes and crashes.

You can disable default UnoCSS preset and preflight

modules: [
  '@unocss/nuxt'
],
unocss: {
  uno: false,
  preflight: false,
  icons: true
}

[acidjazz]

Hey @acidjazz, is unoui ready to use in production https://github.com/fumeapp/unoui

No, not even close

[phojie]

Not yet ready for the production nor for announcement but maybe you can check this out 😃

https://unaui.com/

[nilsso]

Not yet ready for the production nor for announcement but maybe you can check this out 😃

https://unaui.com/

Very much looking forward to this.

[reslear]

Would like to use css agnostic instead of only tailwind or various forks including unocss official support

[itpropro]

Will this be reiterated at some point @benjamincanac ?

[benjamincanac]

Not really as explained above. What's blocking you with Tailwind CSS?

[texastoland]

Not a blocker per se but Uno "feels" more fun. Choosing Nuxt UI forces you to either choose or Frankenstein them together. Totally reasonable but it'd be "nice" if it were flexible given their similarities.

[benjamincanac]

I don't know UnoCSS that well but even if we supported both I guess it wouldn't work as we use latest utilities from Tailwind CSS: https://tailwindcss.com/blog/tailwindcss-v3-4.

[kleinpetr]

Not really as explained above. What's blocking you with Tailwind CSS?

currently the Attributify mode since we have most of our codebase written with it. https://github.com/nuxt-modules/tailwindcss/issues/823

[husayt]

Not really as explained above. What's blocking you with Tailwind CSS?

currently the Attributify mode since we have most of our codebase written with it. nuxt-modules/tailwindcss#823

Is not this the same attributify mode from UnoCss? I thought uno can be made fully comaptible with tailwindcss through presets.

https://unocss.dev/presets/attributify

[kleinpetr]

Not really as explained above. What's blocking you with Tailwind CSS?

currently the Attributify mode since we have most of our codebase written with it. nuxt-modules/tailwindcss#823

Is not this the same attributify mode from UnoCss? I thought uno can be made fully comaptible with tailwindcss through presets.

https://unocss.dev/presets/attributify

So wrap-up, we currently use UnoCSS with attributify mode, once we would like to use Nuxt UI (also with Pro) we will have to switch from UnoCSS to Nuxt tailwind module which doesn't support Attributify mode, so we would have to rewrite all HTML from the attributify mode to standard classes, that's the issue.

[husayt]

I know this issue is closed, and it is not straightforward. But this is not impossible either. Unocss is very popular in Vue community and interest to this issue shows how much this would be appreciated. For now I have a dilemma for some of my apps either to switch from unocss to tailwind, or to pick a different ui library. The latter is much easier