I'm trying to implement the PostCss from tailwindcss in my ASP.NET project but it's not working. I get this on the console
GET http://localhost:5000/wwwroot/css/output.css net::ERR_ABORTED 404 (Not Found)
but this path exits and there are some tailwindcss classes there.
Here's my github repo with the configurations, it hasn't almost anything on it, just trying to implement the postcss first! Thanks!
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: {},
},
};
I switched the code below
<link href="./wwwroot/css/output.css" rel="stylesheet">for
<link rel="stylesheet" href="~/css/styles.css">It worked perfectly!