UnoCSS compatibility

[cloydlau]

Great project. May I ask, I am using UnoCSS but the documentation says that Tailwind must be installed, it would be very unscientific to have to bring in two CSS frameworks from the same domain in order to use this library. Is there any compatibility measures for UnoCSS users?

[rahul-vashishtha]

Hi @cloydlau, One of our discord member found that Inspira UI works well with UnoCSS, as long as the classes from tailwind and UnoCSS have same name and functionality. So far, things works fine with default UnoCSS setup, AFAIK.

I'm personally doing some tests to verify if all components are compatible with UnoCSS. Once I'm done with all the verification, I'll release a documentation to make Inspira UI work with UnoCSS.

[Faudelhadroug]

Hey @cloydlau,

You can start using Inspira-ui with UnoCSS like this:

• (UnoCSS already installed)
• add the vueuse (core & motion), clsx and tailwind-merge dependencies.
• add Inspira as dev dependency (-D @inspira-ui/plugins).
• add the lib/utils.ts file as provided in the documentation.

That's it!

Note: Some components that use Utility Classes, like "Pattern Backgrounds", might not work as expected, but you can manually make them functional by adjusting the Utility Classes. For example, in the DotBackground component, change

"bg-dot-black/[0.2]"

to

"bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px]"

and it will work as expected.

Note2: If you want to use shadcn, I recommend you this preset. If you encounter any issues and need installation details, feel free to ask me.

[llds66]

@Faudelhadroug how to set inspira-ui/plugins and tailwindcss-animate dependencies in UnoCSS+Inspira-ui?

[rahul-vashishtha]

@Faudelhadroug how to set inspira-ui/plugins and tailwindcss-animate dependencies in UnoCSS+Inspira-ui?

inspira-ui/plugins only support tailwindcss at this point of time. For animate, you can use https://www.npmjs.com/package/unocss-preset-animations .