ASP.NET Core 8项目中Tailwind CSS的PostCSS无法正常工作求助

问题描述 #

在ASP.NET Core 8项目中集成Tailwind CSS与PostCSS后，页面无法加载样式，控制台报错：

GET http://localhost:5000/wwwroot/css/output.css net::ERR_ABORTED 404 (Not Found)
但wwwroot/css/output.css文件实际存在且包含Tailwind CSS类定义。

解决方案 #

1. 修正静态资源引用路径 #

ASP.NET Core中UseStaticFiles()中间件默认将wwwroot作为静态资源的根目录，浏览器请求时不需要在路径中包含wwwroot。修改Views/Home/index.cshtml中的CSS引用：

<!-- 原错误路径 -->
<link href="./wwwroot/css/output.css" rel="stylesheet">

<!-- 修正后路径 -->
<link href="/css/output.css" rel="stylesheet">

2. 验证PostCSS构建流程 #

• 手动执行npm run dev命令，检查控制台是否有构建报错（比如输入文件不存在、依赖缺失）
• 确认wwwroot/css/output.css文件是否正确生成，且文件内容包含预期的Tailwind样式代码

3. 优化Tailwind内容扫描配置 #

调整tailwind.config.js中的content路径，精准扫描视图文件，避免无效匹配：

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./Views/**/*.cshtml"], // 仅扫描Views下的cshtml文件
  theme: {
    extend: {},
  },
  plugins: [],
};

4. 确保项目构建时自动执行npm命令 #

检查.csproj中的RunNpmDev目标是否正常工作：

• 项目构建时，查看控制台是否输出npm run dev的执行日志
• 首次构建前，先手动执行npm install安装所有Node.js依赖

附用户提供的项目配置文件 #

Views/Home/index.cshtml #

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="./wwwroot/css/output.css" rel="stylesheet">
  </head>
  <body>
    <div class="bg-red-500">Bem Vindo!</div> 
  </body>
</html>

Program.cs #

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews().AddRazorRuntimeCompilation();

var app = builder.Build();

app.UseDeveloperExceptionPage();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

package.json #

{
  "name": "workload",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "dev": "postcss wwwroot/css/tailwind.css -o wwwroot/css/output.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.4.16",
    "postcss": "^8.4.31",
    "tailwindcss": "^3.3.5"
  }
}

.csproj #

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation" Version="8.0.0" />
  </ItemGroup>

  <Target Name="RunNpmDev" BeforeTargets="Build">
    <Exec Command="npm run dev" />
  </Target>

</Project>

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./**/*.{razor, cshtml}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js #

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

内容的提问来源于stack exchange，提问作者angelollima