dav.one

Setting up Astro project with Tailwind CSS V4 and daisyUI V5

Created on January 20, 2025 by Dawid WasowskiUpdated on June 29, 2026

1. Initialize your new Astro project

Initialize new Astro project by running the following command in your terminal.
Command will launch a CLI wizard to setup your project.
Setup a project as you like. Just don’t install dependencies during the setup process. You will do that later.

bunx create-astro@latest

2. Install Dependencies

bun i vite@latest tailwindcss @tailwindcss/vite
bun i -D daisyui

3. Configure Astro

Open project in your favorite editor. If it’s VSCode, you can also install official Astro extension.

Edit the astro.config.mjs file, located in the root of your project. You need to add Tailwind CSS as a Vite plugin.

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

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

4. Add Tailwind CSS and daisyUI to your CSS

To make Tailwind CSS and daisyUI available in your project, you need to add them to your CSS file. You can make it available globally or locally. Everything depends on your needs. In following examples, we will make them available globally.

Assume your global CSS file is in src/styles/global.css

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

Then, import CSS file in the .astro component or layout. Remember to set the proper path to your CSS file.

---
import '../src/styles/global.css';
---

Another way to import the CSS file in the .astro component:

<style is:global>
  @import '../src/styles/global.css';
</style>

If you are not planning to use CSS files at all, you can import them in .astro component like this:

<style is:global>
  @import "tailwindcss";
  @plugin "daisyui";
</style>
YOU DID IT!

At this point, you should be able to use Tailwind CSS and daisyUI in your project.
Run the following command in your terminal to start Development Mode.

bun run dev

If you want, you can take a few additional steps that might be useful to you.

5. Configure Tailwind CSS

If you are not planning to use default color palette, you can disable it.
This will reduce the size of your CSS file by about 3kB (gzipped).

@theme {
  --color-*: initial;
}

6. Configure daisyUI

By default, daisyUI has two themes: light and dark and you don’t need to configure anything to make it work. They adjust according to the user’s settings (browser/system). However, you can customize it as you like. Check Config and Themes pages for more information. In this example, four themes are specified. Cupcake is the default theme. Forest will be used if the user has dark mode enabled. Light and Dark are also available for manual switching.

@plugin "daisyui" {
  themes: light, dark, cupcake --default, forest --prefersdark;
}

7. Add Typography plugin

By default, Tailwind CSS resets all styles. If you’re planning to create a blog or other text-based content, you should consider adding typography plugin.

Tailwind Typography

To make official typography plugin available in your project, first you need to install package.

bun i -D @tailwindcss/typography

Add plugin in your CSS file.

@import "tailwindcss";
@plugin "@tailwindcss/typography";

Finally add the prose class somewhere in your project, for example, to your <article> tag. This will apply the typography styles to all text inside this element.

<article class="prose">
  <slot />
</article>

I recommend reading official documentation and this page of daisyUI to learn more.

Clampography

Clampography is a new alternative to the official typography plugin. It restores typography defaults and scales smoothly between mobile and desktop sizes. To install it in your project, run the following command in your terminal:

bun i clampography

Then, add it to your CSS file. We use the typography option to scope the styles to prevent breaking daisyUI components.

@import "tailwindcss";
@plugin "clampography" {
  typography: ".clampography";
}
@plugin "daisyui";

Finally, to apply the styles, simply add the clampography class to the element that wraps your content.

<article class="clampography">
  <slot />
</article>

For full documentation, check out the usage guide.

8. Add custom fonts

You can use the Astro Fonts API to easily add custom fonts to your project. This allows you to integrate external providers or local files by simply defining their names and configuring the sources.

To get started, configure your fonts in the astro.config.mjs config file.

import { defineConfig, fontProviders } from 'astro/config';

export default defineConfig({
  fonts: [
    {
      name: 'Fira Mono',
      cssVariable: '--font-fira-mono',
      provider: fontProviders.google(),
      weights: [400],
    },
    {
      name: 'Roboto',
      cssVariable: '--font-roboto',
      provider: fontProviders.google(),
      weights: [200, 400, 700],
      subsets: ["latin", "latin-ext"],
    },
  ],
});

Now you can use these fonts in CSS for specific Themes.
Fonts will be loaded and available under the specified CSS variables.

[data-theme="dark"] {
  font-family: var(--font-fira-mono);
}

Or you can use them in classic way.

body {
  font-family: var(--font-roboto);
}

9. Add SVG Icons

Recently Xander Treat created @xtreat/astro-iconify package to make it easy to use SVG icons in your Astro projects.
Comparing to other SVG icon integrations, this one lets you use any icons from Iconify without hassles.
To search for icons, I recommend Icones website, created by Anthony Fu.

To install icons in your project, run the following command in your terminal.

bun i @xtreat/astro-iconify

Then you will be able to use icons in .astro files like:

---
import Icon from "@xtreat/astro-iconify";
---

<Icon class="h-42 w-42" icon="game-icons:balloon-dog" />

Or in MDX files like:

import Icon from '@xtreat/astro-iconify';

<Icon class="h-42 w-42" icon="game-icons:balloon-dog" />

10. Add React

Astro lets you use popular frameworks, such as React, Vue or Svelte (even in the same time!).
To add them, you should follow integration guides and daisyUI guides.

For this tutorial, we will add React framework manually.
To install it in your project, run the following command in your terminal.

bun i @astrojs/react react react-dom @types/react @types/react-dom

Edit the astro.config.mjs configuration file again. Add React to the integrations list.

import { defineConfig } from "astro/config";
import react from "@astrojs/react";

export default defineConfig({
  integrations: [
    react()
  ],
});

If you are using TypeScript in your project, then you need to edit the tsconfig.json file located in the root of your project.
Add the following lines to compilerOptions section.

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react"
  }
}

If you chose Basic, minimal starter at the beginning of this tutorial, then you may also consider the following integrations.
I will not cover them in this tutorial, but I believe you will be able to add them yourself.

12. Finish (required)

Are you having fun writing code in your new project, and is everything working as expected?
Do you have any issues or need some help? Perhaps you want to showcase your project or ask for feedback? Visit the daisyUI Discord server and say hello! 🖐