soroushdes/soroushasadi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace Tailwind Play CDN with a prebuilt, purged stylesheet
deploy / deploy (push) Successful in 37s
Details

Browse Source 
The runtime CDN (cdn.tailwindcss.com) is not production-grade: FOUC, no
purging, and an external request that is slow/blocked from some networks.

- Add Tailwind v3 build (package.json `npm run build`) with two scoped configs:
  public (accent + zinc) -> wwwroot/css/tailwind.css, and admin (dark base/
  electric/violet/emerald, separate to avoid the emerald flat-vs-scale clash)
  -> wwwroot/css/tailwind-admin.css. Both minified + content-purged.
- Layouts now link the built CSS instead of the CDN script; built artifacts
  are committed so Docker/CI need no Node step. node_modules stays ignored.
- Verified: utilities (incl. arbitrary values like aspect-[16/9], grid-cols-
  [8rem_1fr]) resolve; public + admin render; no console errors.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-26 03:06:24 +03:30
parent cfff934bdd
commit 33efeac98f
9 changed files with 1102 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Pages/Shared/_AdminLayout.cshtml
+2 -9
View File
@@ -8,15 +8,8 @@
@@font-face { font-family:'Syne'; src:url('/fonts/Syne-Variable.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
@@font-face { font-family:'SpaceMono'; src:url('/fonts/SpaceMono-Regular.woff2') format('woff2'); font-display:swap; }
</style>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: { extend: {
colors: { base:{DEFAULT:'#020510',800:'#050a1a'}, electric:'#38bdf8', violet:'#818cf8', magenta:'#e879f9', emerald:'#34d399' },
fontFamily: { sans:['Syne','system-ui','sans-serif'], mono:['SpaceMono','monospace'] }
}}
}
</script>
<!-- Tailwind: prebuilt + purged admin stylesheet (`npm run build`). No runtime CDN. -->
<link rel="stylesheet" href="/css/tailwind-admin.css" />
<link rel="stylesheet" href="/css/site.css" />
</head>
<body class="min-h-screen bg-base text-slate-200 antialiased">
Pages/Shared/_Layout.cshtml
+2 -16
View File
@@ -25,22 +25,8 @@
@@font-face { font-family:'Vazirmatn'; src:url('/fonts/Vazirmatn-Arabic.woff2') format('woff2'); font-display:swap; }
</style>
<!-- Tailwind Play CDN - minimal config: one accent, neutral zinc scale is built in -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: { accent: '#2563eb', accentink: '#1d4ed8' },
fontFamily: {
display: ['Syne', 'system-ui', 'sans-serif'],
fa: ['Vazirmatn', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<!-- Tailwind: prebuilt + purged stylesheet (`npm run build`). No runtime CDN. -->
<link rel="stylesheet" href="/css/tailwind.css" />
<link rel="stylesheet" href="/css/site.css" />
<link rel="icon" href="/logo-mark.svg" type="image/svg+xml" />
</head>