How to get shadcn working with astro starlight?

[HuakunShen]

I built some custom components from shadcn (react, vue, svelte) and want to display them as demo with astro starlight as astro can render components from different frameworks.

But got blocked when trying to integrate shadcn into starlight.

css imported from my component library messes up astro's theme.

Astro's theme also messes up the component library, e.g. wrong spacing.

I guess this is due to taliwind style conflict.

What is the proper way to display components from tailwind libraries like Shadcn?

[HuakunShen]

Problem solved.

Adding customCss like this could mess up starlight theme

customCss: ["@kksh/vue/css"]

Instead I add this to tailwind.config.mjs

content: [
    "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
    "node_modules/@kksh/vue/dist/**/*.{js,jsx,svelte,ts,tsx,vue,css}",
  ],

In .mdx files, use not-content to prevent starlight styles from overriding component library.

import Demo from '../../../components/demo/demo.astro'

<div class="not-content">
    <Demo />
</div>