I know it's crazy, maybe `UnoCSS` support?

[zernonia]

🙈🤪

[JessicaSachs]

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.

[zernonia]

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.

[JessicaSachs]

Uno automatically looks for a tailwind config btw and iirc they merge them

[miguelrk]

FYI: the fisand/unocss-preset-shadcn preset might be a good starting point. Though I believe its also missing advanced Tailwindcss features

[Dunqing]

I'm interested in this, but maybe I need more time to do this.

[JessicaSachs]

Will be watching eagerly!!! Huge win for Vue ecosystem if we can get compatibility. A lot of Vue uses Uno because of @antfu influence

[JessicaSachs]

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.

Actual

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-.

1. There's examples in the Accordion that I want to work with unocss.config.js files, not just tailwind.config.js files, since UnoCSS is basically a more extendable Tailwind compiler.
2. In the radix-vue docs, they assume you're using Tailwind and give you the correct tailwind config to make it happen.

I'd love it if Uno supported this in their main preset.

Issue

1. When you plug these examples into UnoCSS, they don't style correctly. UnoCSS's default preset attempts to be a superset of Tailwind, so it seems like fixing these issues is in-scope.
   1. The default preset attempts to be compatible with Tailwind always, but it seems they're a little behind!
   2. Whoever picks this up should look at the more complex rules inside of the radix-vue link I linked above and make sure that all of the more advanced syntax used is supported.

Solution

This can be accomplished by extending the UnoCSS variants using Regexp.

Development Approach

Whoever picks this up can iterate quickly in two ways:

1. Without downloading any packages by writing code inline in the Playground
   1. Playground link
   2. Here's how to extend variants. This is how they supported hover:bg-red-500.
      1. For an example: here is the PR in which they began supporting group-data- variant.
   3. However UnoCSS's preset is missing some more variants that are present inside of the radix-vue package. For example, the hover:group:data- variant is missing.

Scope + Benefit

This will help all users of UnoCSS, which is not limited to Vue users!

Issue Tracking

Arguable, this issue could be moved into the UnoCSS repository.

[zouhangwithsweet]

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.

[a982246809]

现在我已有的项目已经使用了unocss , 再去安装tailwindcss 是不是冗余了? Now that I have an existing project that uses unocss, is it redundant to install tailwindcss?

[zouhangwithsweet]

现在我已有的项目已经使用了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

[orenmizr]

unocss-preset-shadcn works normal with nuxt + unocss module + shadcn-vue ? is it stable ?

[orenmizr]

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 ?

[sadeghbarati]

@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

[orenmizr]

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';

[Dunqing]

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

[zouhangwithsweet]

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.

[orenmizr]

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

[zouhangwithsweet]

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

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. :)

[orenmizr]

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 ?

[zouhangwithsweet]

I think you should remove all packages & config files which are related to tailwindcss

[sadeghbarati]

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

Combine UnoCSS 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>

[orenmizr]

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.....)

[orenmizr]

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

Combine UnoCSS 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>

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.

[buditanrim]

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

[Saeid-Za]

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 !

[sadeghbarati]

@Saeid-Za We are welcomed any help here 💚

[therealokoro]

Ladies and gentlemen!.....

drum rolls🥁🥁🥁

May I present to you......... Unocss Preset Shadcn.

Your questions have been answered, your savior is here 😁