Open zernonia opened 1 year ago
You can extend an UnoCSS preset to solve this issue. I would start with the Tailwind one. It's actually fairly easy! Just a lot of regexp.
I'm not sure if someone wants to update the @unocss/preset-tailwind package but that's where I'd start.
It's a little hard for me because I don't have a ton of edge-case Tailwind understanding. The basics, I got. But some of the weirder syntax is not easy for me to list out.
Thanks for the input @JessicaSachs ! I believe shadcn-vue
would be a good reference point for testing out edge-case which was not included in the preset package, since there's quite many components, and some with weird class 😁
Other than the syntax, there's also some tweak needed to be done when initiating the project. Instead of tailwind.config.js
and tw plugins, it should import unocss.config.ts
.
Uno automatically looks for a tailwind config btw and iirc they merge them
FYI: the fisand/unocss-preset-shadcn preset might be a good starting point. Though I believe its also missing advanced Tailwindcss features
I'm interested in this, but maybe I need more time to do this.
Will be watching eagerly!!! Huge win for Vue ecosystem if we can get compatibility. A lot of Vue uses Uno because of @antfu influence
I wrote up some steps in my Discord for someone looking for something to work on, but I'm not sure if he's got interest or bandwidth to work on it. I figured I'd post it publicly.
The examples inside of the radix-vue documentation don't work because of lack of support for a lot of the more complex TailwindCSS /
for opacity, group-hover-data
or as UnoCSS would do group:hover:data-
.
unocss.config.js
files, not just tailwind.config.js
files, since UnoCSS is basically a more extendable Tailwind compiler.I'd love it if Uno supported this in their main preset.
This can be accomplished by extending the UnoCSS variants using Regexp.
Whoever picks this up can iterate quickly in two ways:
hover:bg-red-500
.
group-data-
variant.hover:group:data-
variant is missing.This will help all users of UnoCSS, which is not limited to Vue users!
Arguable, this issue could be moved into the UnoCSS repository.
Yeah. I am working on unocss-preset-shadcn
to support vue-shadcn. Just test button
& accordion
. It works well.
Check: https://github.com/fisand/unocss-preset-shadcn/blob/main/vue-shadcn/App.vue. And I will test all components in the near future.
现在我已有的项目已经使用了unocss , 再去安装tailwindcss 是不是冗余了? Now that I have an existing project that uses unocss, is it redundant to install tailwindcss?
现在我已有的项目已经使用了unocss , 再去安装tailwindcss 是不是冗余了? Now that I have an existing project that uses unocss, is it redundant to install tailwindcss?
Yeah. Actually unocss-preset-shadcn
has supported vue-shadcn
but not perfect. Just need to add some special variants. Just check quick-start
unocss-preset-shadcn works normal with nuxt + unocss module + shadcn-vue ? is it stable ?
i removed nuxt+tailwind for nuxt+uno with shadcn. i noticed i did not get the reset css or fonts and probably more after installing all the deps.
when adding shadcn to the project it creates a tailwind config that is probably responsible for the missing parts. how do i connect the uno so i don't need the tailwind config file ?
@orenmizr Install @unocss/reset
and then import it to your main js entry or a css file
https://github.com/unocss/unocss/blob/main/packages/reset/tailwind.md
i did. imported first via js, then via style. i saw it loaded in devtools. but the body margin was still there,
i have another project with similar setup but with tailwind+nuxt and there it looks polished- both have the same tailwind code. wondering about the difference. like where the default fonts come from...
update: the tailwind reset fixed it. @import '@unocss/reset/tailwind.css';
If possible I think we could improve the cli
implementation to support selecting unocss/tailwindcss
and do the work of generating the config file. This could simplify the cost of using unocss
unocss-preset-shadcn works normal with nuxt + unocss module + shadcn-vue ? is it stable ?
Absolute yes. I had check it. Just submit issue when you have it.
i am already using it :+1:
btw, once init-ed ,shadch-vue creates a component.json that points to tailwind.config.ts... not sure what to do with it
If possible I think we could improve the
cli
implementation to support selectingunocss/tailwindcss
and do the work of generating the config file. This could simplify the cost of usingunocss
I have thought about this before. I think css engine should be optional in cli
. But unocss
still don’t have enough users compared with tailwind
. But for a unocss
fan like me, manual using is also possible. :)
i tried the accordion and the button as a test with shadcn-vue. the test was successful. i won';t know for sure until i will start using it.
when shadcn-vue inits it creates a component file and points to tailwind.config... does that matter ? can i delete it ? should i point it to unocss.config ?
I think you should remove all packages & config files which are related to tailwindcss
After testing UnoCSS I couldn't configure it to have same style and same behaviour as cva or tailwind-variant
https://stackblitz.com/edit/vitejs-vite-jstrsg
https://github.com/unocss/unocss/issues/2748 https://github.com/unpreset/unocss-transformer-alias
found a Neat UnoCSS Project
https://github.com/pondrax/floeui/blob/master/src/lib/ui/shortcuts/button.js
in this case, we don't need libs like cva
or tailwind-variants
rules
and shortcuts
(simple)import { defineConfig } from 'unocss'
import presetUno from '@unocss/preset-uno'
import presetAttributify from '@unocss/preset-attributify'
import { fonts } from '@unocss/preset-mini/rules'
export default defineConfig({
presets: [
presetUno(),
presetAttributify(),
{
name: 'shadcn-unocss',
rules: [
[/^button-(.*)$/, fonts[1][1] as any]
],
shortcuts: [
[
'button',
[
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2'
].join(' '),
{ layer: 'components button' }
],
]
}
],
})
<script setup lang="ts">
import { Button } from '@/lib/registry/default/ui/button'
</script>
<template>
<Button button="~ 5xl">Button</Button>
<a href="#" button="~">A tag that act like a button</a>
<!-- :x :)))) xdd -->
<button button="~ primary sm">bruh sorry</button>
</template>
interesting link. i am still looking into the best way for using unocss+tailwind(wind preset) to create a shadcn theme config:
.btn: (classA classB.....) .link: (classA classB.....)
found a Neat UnoCSS Project
https://github.com/pondrax/floeui/blob/master/src/lib/ui/shortcuts/button.js
in this case, we don't need libs like
cva
ortailwind-variants
Combine UnoCSS
rules
andshortcuts
(simple)import { defineConfig } from 'unocss' import presetUno from '@unocss/preset-uno' import presetAttributify from '@unocss/preset-attributify' import { fonts } from '@unocss/preset-mini/rules' export default defineConfig({ presets: [ presetUno(), presetAttributify(), { name: 'shadcn-unocss', rules: [ [/^button-(.*)$/, fonts[1][1] as any] ], shortcuts: [ [ 'button', [ 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2' ].join(' '), { layer: 'components button' } ], ] } ], })
<script setup lang="ts"> import { Button } from '@/lib/registry/default/ui/button' </script> <template> <Button button="~ 5xl">Button</Button> <a href="#" button="~">A tag that act like a button</a> <!-- :x :)))) xdd --> <button button="~ primary sm">bruh sorry</button> </template>
but you still need to go over all the components one by one and add them to the theme config. i thought that was shadcn preset was all about. whenever they add css the preset gets updated.
Hello, have we solved this? I run into a situation where I'd want to use shadcn-vue but not quite sure how to configure it with Unocss
I've been using UnoCSS with shad-vue for a while now, I have not found any problem so far, is there a blocker that anyone know of? I'd be happy to help !
@Saeid-Za We are welcomed any help here 💚
Ladies and gentlemen!.....
drum rolls🥁🥁🥁
May I present to you......... Unocss Preset Shadcn.
Your questions have been answered, your savior is here 😁
🙈🤪