Install daisyUI for Astro
How to install Tailwind CSS and daisyUI in a Astro project
1. Create a new Astro project
Terminal
npm create astro@latest2. Install Tailwind CSS and daisyUI
Terminal
npm install tailwindcss@next @tailwindcss/vite@next daisyui@betaAdd Tailwind CSS to Astro config
astro.config.mjs
// @ts-check
import { defineConfig } from "astro/config";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
vite: {
plugins: [tailwindcss()],
},
});Put Tailwind and daisyUI to your CSS file
src/assets/app.css
@import "tailwindcss";
@plugin "daisyui";Import the CSS file on top of your astro Layout file
src/layouts/Layout.astro
---
import "../assets/app.css";
---Now you can use daisyUI class names!
