Histoire's Vue 3 tailwind design system example

[danielduckworth]

Hi, I've been using this boilerplate for a project, and I love it. Histoire is also an excellent project and a joy to work with.

The Histoire website hosts an example Vue 3 + Tailwind project with a "Design System" section that uses a Tailwind configuration file to import and generate design tokens.

I'm trying to get this to work but with UnoCSS which does not use a local Tailwind configuration file.

Any thoughts on how I could get this feature to work with UnoCSS?

I'll post this on the Histoire repo too.

Thanks,
Daniel.

[gurvancampion]

Hi @danielduckworth , sorry for the late reply I didn't see your message!
I think it's a feature only available with TailwindCSS. The best would be to ask directly on histoire repository, it seems you could write a specific design token for unocss as well looking at the code: https://github.com/histoire-dev/histoire/tree/main/packages/histoire/src/node/builtin-plugins

[danielduckworth]

Thanks @gurvan-guss. I've got it working with Tailwindcss installed. But I'm using your Vuetify + UnoCSS branch so now I've got three different vendor styles going and it's a bit messy. I'm hoping I can unify them with unocss.

[gurvancampion]

@danielduckworth I would suggest you to go only with TailwindCSS as they both do the same things if you want to have this design page