Tailwind in ASP.NET Core

Tailwind is a composable front end CSS framework that looks great, and produces fairly minimal CSS. It comes with support for dark themes out of the box, has an easy mechanism for switching between the two, and is extremely light on JavaScript. Rather than going the Bootstrap route of btn-success classes, Tailwind lets you combine various CSS classes into a success button: text-green-600 button.

I’ve been using Tailwind for quite a while now - mostly to build static websites combined with Astro. Recently though, while doing client work, I’ve been looking at a way to use Tailwind in ASP.NET Core, but couldn’t find a clear cut solution. The default templates don’t ship with it, even in the recently released .NET 9, and I don’t find Bootstrap to be a viable option anymore entering 2025.

Fortunately, integrating Tailwind into ASP.NET Core — be it with a few quirks — isn’t too bad. This article assumes you already have a MVC web app or similar ready to go, and you have Node installed.

Node

Tailwind is a Node package, but ASP.NET doesn’t have anything to do with Node, so we can’t just install it as a NuGet package.

Therefore, we first have to create a Node package within our Web project directory (the one that contains the .csproj and Program.cs), run:

npm init

After that’s done, you’ll have a project.json file in your ASP.NET project’s directory, and we can install Tailwind:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

We use Tailwind as a PostCSS plugin so we can easily integrate it into MSBuild later on.

This will create a tailwind.config.js file. Make sure the content array looks like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './Pages/**/*.cshtml',
        './Views/**/*.cshtml'
    ],
    theme: {
        extend: {},
    },
    plugins: [
    ],
}

This ensures that all our Razor pages and views will have unused CSS pruned from them, resulting in huge size reduction of our final deployable.

In package.json, configure a build script for building your CSS and minifying it:

{
  "name": "your.app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "css": "npx tailwindcss -i ./wwwroot/css/site.css -o ./wwwroot/css/styles.css --minify"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.49",
    "tailwindcss": "^3.4.17"
  }
}

CSS

Next up, create a site.css file in wwwroot/css/ and add the following Tailwind imports:

/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

Every time you run a build, it’ll use this CSS file as a base, and complement it with the CSS styles you use in your Razor views.

MSBuild

Lastly, we’ll hook up the Node build to our MSBuild, so we can build the CSS from our IDE. In your .csproj file, add the following item group:

    <ItemGroup>
        <UpToDateCheckBuilt Include="wwwroot/css/site.css" Set="Css"/>
        <UpToDateCheckBuilt Include="tailwind.config.js" Set="Css"/>
    </ItemGroup>

And then the actual build step:

    <Target Name="Tailwind" BeforeTargets="Build">
        <Exec Command="npm run css"/>
    </Target>

Now, any time you build your Web project, Tailwind will “compile” the CSS file for your application. Simply include the resulting CSS file in your Layout:

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

And you’ll be good to go. Remember that if you are using Razor Runtime compilation, the runtime compiler won’t recompile your CSS. So if you introduce new classes, you’ll need to rebuild your project or solution to get the CSS classes to make your application look the way you’d expect it to.

Components

There are Tailwind component libraries available that provide ready to go components for your web app, in no particular order:

• Flyon UI
• Preline UI
• Daisy UI

They all provide quality components you can mix and match to build your UI, quickly.

Have fun!