Setting up Astro project with TailwindCSS V4 and daisyUI V5
Created on January 20, 2025 by Dawid Wasowski https://dav.one/setting-up-astro-project-with-tailwindcss-and-daisyui/
Warning: This article is based on beta version of daisyUI. It will be updated once the stable version is released
1. Initialize your new Astro project
Initialize new 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.
2. Install Dependencies
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 TailwindCSS as a Vite plugin.
import { defineConfig } from "astro/config";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
vite: {
plugins: [tailwindcss()],
},
});
4. Add TailwindCSS and daisyUI to your CSS
To make TailwindCSS 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.
src/styles/global.css
@import "tailwindcss";
@plugin "daisyui";
Then, import CSS file in the .astro component like this:
---
import '../proper/path/to/styles/global.css';
---
Another way to import the CSS file in the .astro component:
<style is:global>
@import '../proper/path/to/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>
At this point, you should be able to use TailwindCSS and daisyUI in your project.
Run the following command in your terminal to start Development Mode.
If you want, you can take a few additional steps that might be useful to you.
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;
}
By default, daisyUI has two themes: light and dark and you don’t need to configure anything to make it work.
However, you can customize it as you like. Check Config and Themes pages for more information.
@plugin "daisyui" {
themes: dark --default, light, forest, dracula;
};
7. Add Typography plugin (optional)
By default, TailwindCSS resets all styles. If you’re planning to create a blog or other text-based content, you should consider adding this package.
To make Typography available in your project, first you need to install package.
Add plugin in your CSS file.
@plugin "@tailwindcss/typography";
Finally add the prose class somewhere in your project, for example, to your body tag.
Everything inside the body tag will be affected by TailwindCSS Typography.
<body class="prose">
I recommend reading official documentation and this page of daisyUI to learn more.
Also, be aware that using @apply with class prose may cause issues.
8. Add custom fonts (optional)
You can use UnoCSS and its web-fonts preset to add custom fonts to your project.
This will let you use web fonts from Google Fonts, Bunny, and FontShare by simply providing the font names.
Add UnoCSS to integrations list in your astro.config.mjs config file and configure it.
You can also keep your UnoCSS configuration in a dedicated file to keep Astro config file cleaner.
import { defineConfig } from 'astro/config';
import UnoCSS from 'unocss/astro'
export default defineConfig({
integrations: [UnoCSS({
presets: [
presetWebFonts({
provider: 'google',
fonts: {
firamono: 'Fira Mono:400',
roboto: 'Roboto:200,400,700',
},
})
]
})],
});
Now you can use fonts in CSS for specific Themes.
Fonts will be loaded in moments when you switch between themes.
[data-theme="dark"] {
font-family: 'Fira Mono';
}
Or you can use them in classic way.
body {
font-family: 'Roboto';
}
9. Add SVG Icons (optional)
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.
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 (optional)
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.
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"
}
}
11. Recommended Integrations (optional)
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! 🖐