Tailwind integration in .NET Core and Blazor

[Aiken10]

It's very hard to integrate tailwind CSS into a .net core application. as a fresher, I started with tailwind CSS as my styling approach in React and many frontend frameworks It runs automatically but in .net core, I have to run 2 command consoles for working. I hope it is easy to integrate and I don't want to run 2 separate commands for watching CSS building.

[Drako01]

You don't need to manually keep two terminals open when developing an ASP.NET Core or Blazor application with Tailwind CSS.

The simplest solution is to create one development command that starts both watchers.

For Tailwind CSS v4, install the CLI:

npm install -D tailwindcss @tailwindcss/cli concurrently

Create an input stylesheet, for example Styles/app.css:

@import "tailwindcss";

Then add a development script to package.json:

{
  "scripts": {
    "css:watch": "tailwindcss -i ./Styles/app.css -o ./wwwroot/css/app.css --watch",
    "css:build": "tailwindcss -i ./Styles/app.css -o ./wwwroot/css/app.css --minify",
    "dev": "concurrently \"dotnet watch run\" \"npm run css:watch\""
  }
}

Now you only need:

npm run dev

Both processes run together in the same terminal.

For production, integrate npm run css:build into your build/publish pipeline so the generated stylesheet is always available without running a watcher.

Two details matter:

1. Make sure your Blazor application references the generated CSS file.
2. Verify that Tailwind scans the Razor and component files containing your utility classes.

For larger projects, you can also use an MSBuild target to generate CSS as part of the .NET build.

I would start with the single npm run dev command because it's straightforward, cross-platform, and requires minimal changes to your existing project.

This is a development workflow issue rather than a limitation of Tailwind itself.