| name | Frontend Modernization (Node-Free) |
| description | Guide for converting CDN-based apps to local Tailwind 4.2, Font Awesome 7.2, and Noto Sans Variable without Node.js. |
Skill: Frontend Modernization (Node-Free)
Guide for implementing a professional, local-only frontend stack in .NET 10
without requiring Node.js or npm, achieving visual excellence ("The WOW Factor")
without "AI Slop".
1. Prerequisites (Tools)
Ensure the following tools are available:
- LibMan CLI:
dotnet tool install -g Microsoft.Web.LibraryManager.Cli
- Tailwind.MSBuild: NuGet package (v2.0.2+) for automated CSS compilation.
2. Local Asset Setup (LibMan)
Configure libman.json to download fonts (Noto Sans Variable) and icons (Font
Awesome) from unpkg.
{
"version": "1.0",
"defaultProvider": "unpkg",
"libraries": [
{
"library": "@fortawesome/fontawesome-free@7.2.0",
"destination": "wwwroot/lib/font-awesome",
"files": [
"css/all.min.css",
"webfonts/fa-solid-900.woff2",
"webfonts/fa-brands-400.woff2",
"webfonts/fa-regular-400.woff2"
]
},
{
"library": "@fontsource-variable/noto-sans@5.1.1",
"destination": "wwwroot/lib/noto-sans/",
"files": ["index.css", "files/noto-sans-latin-wght-normal.woff2"]
}
]
}
3. Tailwind CSS 4 Integration (CSS-First)
-
Add NuGet Package:
<PackageReference Include="Tailwind.MSBuild" Version="2.0.2">
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
<PrivateAssets>all</PrivateAssets>
</PackageReference>
-
Configure Properties in .csproj:
<PropertyGroup>
<TailwindCSSInputFile>wwwroot/css/input.css</TailwindCSSInputFile>
<TailwindCSSOutputFile>wwwroot/css/site.css</TailwindCSSOutputFile>
</PropertyGroup>
-
Single File Component (SFC) CSS Architecture: Organize CSS into
components to keep input.css clean.
wwwroot/css/components/theme.css: Core design tokens (@theme).wwwroot/css/components/btn.css: Button utilities (@utility).wwwroot/css/components/card.css: Card utilities (@utility).
Main Input CSS (wwwroot/css/input.css):
@import "tailwindcss";
@import "./components/theme.css";
@import "./components/btn.css";
@import "./components/card.css";
Theme Component (wwwroot/css/components/theme.css):
@theme {
--font-sans: "Noto Sans Variable", ui-sans-serif, system-ui;
--color-brand-primary: #7c3aed;
--color-brand-bg: #fafafa;
}
4. Integration into ASP.NET Core (_Layout.cshtml)
Replace CDNs with local references. Ensure Noto Sans is loaded correctly:
<head>
<link rel="stylesheet" href="~/lib/noto-sans/index.css" />
<link rel="stylesheet" href="~/lib/font-awesome/css/all.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body class="bg-brand-bg text-slate-900 font-sans antialiased"></body>
5. Tailark / UI Blocks Integration
When integrating external premium UI blocks (like Tailark):
- Copy HTML and Tailwind classes verbatim.
- Remove React specific tags (
className, {...props}).
- Translate
Lucide icons to Font Awesome tags
(<i class="fa-solid fa-*"></i>).
- Handle interaction states (e.g., mobile menu toggle) with standard Razor View
conditionals or Vanilla JS.
6. Accessiblity (BTHG/WCAG) & Privacy (DSGVO)
- Local Assets Only: As configured in LibMan, NEVER use CDNs. This is a
strict DSGVO requirement to prevent unauthorized IP data transfers to third
parties.
- Accessible UI: Ensure all custom components have visible
focus-visible
outlines, use aria-hidden="true" on decorative icons, and provide
aria-labels for icon-only buttons. Contrast ratios must meet WCAG 2.1 AA
standards even in dark mode.
For comprehensive styling and compliance rules, always refer to
.agents/rules/tailwind_css_styleguide.md,
.agents/rules/font_awesome_styleguide.md, .agents/rules/privacy_dsgvo.md,
and .agents/rules/accessibility_a11y.md.
