svelte 分为两类程序模板：

• sveltekit 相当于 next.js，在服务器端运行
• svelte 相当于 react，在客户端运行

如果创建 SvelteKit 程序使用

npx sv create my-app
cd my-app
pnpm install

如果创建 Svelte 程序使用 vite 模版

npm create vite@latest myapp -- --template svelte
cd myapp
pnpm install

安装 Tailwind CSS

npx sv add tailwindcss
pnpm install

安装 Flowbite Svelte

pnpm i -D flowbite-svelte flowbite

可选

pnpm i -D flowbite-svelte-icons

配置

更新您的主文件以支持 Tailwindcss 和 Flowbite 插件。您也可以通过修改适当的颜色值来自定义原色。css

如果您使用 SvelteKit，则主 css 文件是 .src/app.css

@import 'tailwindcss';

@plugin 'flowbite/plugin';

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-primary-50: #fff5f2;
  --color-primary-100: #fff1ee;
  --color-primary-200: #ffe4de;
  --color-primary-300: #ffd5cc;
  --color-primary-400: #ffbcad;
  --color-primary-500: #fe795d;
  --color-primary-600: #ef562f;
  --color-primary-700: #eb4f27;
  --color-primary-800: #cc4522;
  --color-primary-900: #a5371b;
}

@source "../node_modules/flowbite-svelte/dist";

现在，您应该能够使用 Flowbite Svelte 库并导入组件，例如导航栏、下拉列表、模态框等。