如何在 SvelteKit 中使用 daisyUI 组件SvelteKit 是一个用于构建 Web 应用程序的元框架。它

SvelteKit 是一个用于构建 Web 应用程序的元框架。它基于 Svelte，这是一个编译器，可将您的 Svelte 组件转换为快速高效的 JavaScript。

如果您以前没有使用过 Svelte，您会惊讶地发现与其他框架相比，它是多么容易学习。

但这篇文章核心目的并不是聊Svelte，我们的主要目的是了解如何在SvelteKit 中结合Tailwind CSS的同时如何安装使用daisyUI这个轻量组件库。

如何安装 SvelteKit？

若要启动新的 SvelteKit 项目，可以使用以下命令：

npm create svelte@latest my-app

接下来面对交互选项，我们选择：Skeleton project

┌  Welcome to SvelteKit!
│
◆  Which Svelte app template?
│  ○ SvelteKit demo app
│  ● Skeleton project (Barebones scaffolding for your new SvelteKit app)
│  ○ Library project
└

设置完成后，转到项目目录并安装依赖项并启动开发服务器：

cd my-app
npm install
npm run dev -- --open

它会打开一个新的浏览器选项卡，您可以看到消息！http://localhost:5173/ Welcome to SvelteKit

就是这样！你有一个新的 SvelteKit 项目。

如何将 Tailwind CSS 和 daisyUI 添加到 SvelteKit？

安装 Tailwind CSS、PostCSS、Autoprefixer 和 daisyUI，
然后生成tailwind.config.js和postcss.config.js文件：

npm install -D tailwindcss postcss autoprefixer daisyui
npx tailwindcss init -p

编辑文件。添加和添加到其中：tailwind.config.js content plugins

/** @type {import('tailwindcss').Config} */
export default {
 content: [],
 content: ['./src/**/*.{html,svelte,js,ts}'],
 theme: {
   extend: {},
 },
 plugins: [],
 plugins: [require('daisyui')],
}

将以下行添加到文件中：svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
 preprocess: vitePreprocess(),
 kit: {
   // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
   // If your environment is not supported or you settled on a specific environment, switch out the adapter.
   // See https://kit.svelte.dev/docs/adapters for more information about adapters.
   adapter: adapter()
 }
};

export default config;

创建一个新文件并使用此命令导入其中src/routes/+layout.svelte tailwindcss/tailwind.css

echo '
<script>
  import "tailwindcss/tailwind.css";
</script>

<slot />
' > src/routes/+layout.svelte

如何在 SvelteKit 中使用 daisyUI 组件？

将 daisyUI 按钮添加到文件：src/routes/+page.svelte

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<button class="btn btn-primary">Hello daisyUI</button>

运行开发服务器，看到带有 daisyUI 样式的按钮！

npm run dev -- --open