I’m trying to integrate Tailwind CSS into my ASP.NET Core 8 MVC project, but I’m running into an issue with my npm script for building the Tailwind CSS. The script only runs on the first build, but doesn’t trigger again when I make changes to my CSS files, even with hot reload enabled.

Here’s my setup:

.csproj file:

<Target Name="NpmInstall" BeforeTargets="BuildCSS" Inputs="package.json" Outputs="$(NpmLastInstall)">
  <Exec Command="npm install" />
  <Touch Files="$(NpmLastInstall)" AlwaysCreate="true" />
</Target>

<Target Name="BuildCSS" BeforeTargets="Build">
  <Exec Command="npm run buildcss:dev" Condition=" '$(Configuration)' == 'Debug' " />
  <Exec Command="npm run buildcss:release" Condition=" '$(Configuration)' == 'Release' " />
</Target>

package.json:

{
    "scripts": {
        "buildcss:dev": "postcss ./wwwroot/css/input.css -o ./wwwroot/css/app.css",
        "buildcss:release": "npx tailwindcss --config tailwind.config.js --postcss postcss.config.js -i ./wwwroot/css/input.css -o ./wwwroot/css/app.css --minify",
        "watch": "npx tailwindcss --config tailwind.config.js --postcss postcss.config.js -i ./wwwroot/css/input.css -o ./wwwroot/css/app.css --watch"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.19",
        "postcss": "^8.4.38",
        "tailwindcss": "^3.4.4"
    }
}

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./Views/**/*.cshtml", "./Views/*.cshtml", "./wwwroot/css/input.css"],
    theme: {
        extend: {
            fontFamily: {
                inter: ["Inter"],
            }
        },
    },
    plugins: [],
}

I’ve tried using the --watch flag in my npm script, but it doesn’t seem to be triggering the rebuild when I make changes to my CSS files. I’ve also tried using hot reload, but that doesn’t work either.

Can anyone help me figure out what I’m missing? Thanks in advance!