Astro with DaisyUI Starter Kit: Basics
Tailwind v4 + Astrojs + DaisyUI
Screenshot
🚀 Project Structure
Inside of your Astro project, you'll see the following folders and files:
/
├── public/
│ └── favicon.svg
├── src
│ ├── assets
│ │ └── astro.svg
│ ├── components
│ │ └── Welcome.astro
│ ├── layouts
│ │ └── Layout.astro
│ └── pages
│ └── index.astro
└── package.json
🧞 Themes
To change themes
// global.css
@plugin "daisyui";
@plugin "daisyui" {
themes: light --default, dark --prefersdark, corporate;
}
// in html tag
<html data-theme="corporate" lang="en"></html>
🧞 Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:4321 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run astro ... |
Run CLI commands like astro add, astro check |
npm run astro -- --help |
Get help using the Astro CLI |
Install Notes
npm create astro@latest
npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest
npm install --save-dev --save-exact prettier prettier-plugin-astro
npx astro add react