为 Astro 安装 daisyUI
如何在 Astro 项目中安装 Tailwind CSS 和 daisyUI
1. 创建一个新的 Astro 项目
在当前目录下创建一个新的 Astro 项目
终端
npm create astro@latest ./2. 安装 Tailwind CSS 和 daisyUI
终端
npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest将 Tailwind CSS 添加到 Astro 配置
astro.config.mjs
// @ts-check
import { defineConfig } from "astro/config";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
vite: {
plugins: [tailwindcss()],
},
});将 Tailwind CSS 和 daisyUI 放入你的 CSS 文件中 (并移除旧样式)
src/assets/app.css
@import "tailwindcss";
@plugin "daisyui";在你的 astro 布局文件的顶部导入 CSS 文件
src/layouts/Layout.astro
---
import "../assets/app.css";
---现在你可以使用 daisyUI 类名了！
