How to setup TailwindCSS and DaisyUI with an ASP.NET Core 9 Razor Pages project

readme.md

How to setup TailwindCSS and DaisyUI with an ASP.NET Core 9 Razor Pages project

First, create your ASP.NET Core Razor Pages / MVC / Blazor project if you haven't already.

Initialize an NPM Package

Open a terminal in your project folder (not the solution folder!) and run the following to initialize an NPM package, which in our case only serves to download tailwindcss and daisyui:

npm init -y

npm i -D tailwindcss@latest @tailwindcss/cli@latest daisyui@latest

Add TailwindCSS and DaisyUI to the CSS file

Now to setup TailwindCSS and DaisyUI in your site's CSS file, open your css file, mine was at wwwroot/css/site.css, and insert this at the top:

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

Generating the .min.css file

We are going to have Tailwind generate our final CSS file at the same place, but use the .min.css extension instead. Since I generated my ASP.NET Core Razor pages project with Rider, my CSS file will be:

wwwroot/css/site.css -> wwwroot/css/site.min.css

We will use site.css for development but our end users will receive the generated and minified site.min.css. Go to your root layout html or Razor file where your stylesheet is imported, mine was at Pages/Shared/_Layout.cshtml, and replace your stylesheet import with:

<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true"/>

Or whatever the equivalent is for your project.

By the way, asp-append-version makes the href look like /css/site.min.lc307k2hpk.css or some hash like that so browsers can cache your CSS file indefinitely and only refetch it when the hash has changed. Super convenient ASP.NET feature.

Now we just need to add a command to our NPM package, for convenience. Edit your package.json file and add the following to your scripts:

"scripts": {
  "watch": "npx @tailwindcss/cli -i wwwroot/css/site.css -o wwwroot/css/site.min.css --watch"
},

Now we can run npm run watch from a terminal, and TailwindCSS will regenerate our site.min.css file from the changes in our project, by scanning all files and detecting TailwindCSS class names. This means you can write your TailwindCSS class names like normal in your Razor pages, css, or html, and it will be added to your site.min.css. We can also use DaisyUI now:

% npm run watch

> [email protected] watch
> npx @tailwindcss/cli -i wwwroot/css/site.css -o wwwroot/css/site.min.css --watch

/*! 🌼 daisyUI 5.0.9 */
≈ tailwindcss v4.0.17

Done in 225ms
Done in 5ms
Done in 4ms
Done in 3ms
Done in 4ms
Done in 4ms

You just need to make sure you are running this command in the background while working on your project to see changes to your site styling.

---

The DaisyUI installation guide for TailwindCSS CLI was also very helpful: https://daisyui.com/docs/install/cli/

If anyone knows how to run this watch command automatically in the background when running the project in JetBrains Rider, please leave a comment!

Thanks to this blog post for helping me understand the process: https://www.billtalkstoomuch.com/2025/02/12/installing-tailwind-css-v4-in-a-blazor-webapp/