Install daisyUI for Astro

How to install Tailwind CSS and daisyUI in a Astro project

1. Create a new Astro project

Create a new Astro project in the current directory

npm create astro@latest ./

2. Install Tailwind CSS and daisyUI

npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest

Add Tailwind CSS to Astro config

// @ts-check
import { defineConfig } from "astro/config";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
});

Put Tailwind CSS and daisyUI in your CSS file (and remove old styles)

@import "tailwindcss";
@plugin "daisyui";

Import the CSS file on top of your astro Layout file

---
import "../assets/app.css";
---

Now you can use daisyUI class names!

NEXUS
Official daisyUI Dashboard Template

Available on daisyUI store

More details