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:'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; } @@font-face { font-family:'SpaceMono'; src:url('/fonts/SpaceMono-Regular.woff2') format('woff2'); font-display:swap; }
</style> </style>
<script src="https://cdn.tailwindcss.com"></script> <!-- Tailwind: prebuilt + purged admin stylesheet (`npm run build`). No runtime CDN. -->
<script> <link rel="stylesheet" href="/css/tailwind-admin.css" />
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>
<link rel="stylesheet" href="/css/site.css" /> <link rel="stylesheet" href="/css/site.css" />
</head> </head>
<body class="min-h-screen bg-base text-slate-200 antialiased"> <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; } @@font-face { font-family:'Vazirmatn'; src:url('/fonts/Vazirmatn-Arabic.woff2') format('woff2'); font-display:swap; }
</style> </style>
<!-- Tailwind Play CDN - minimal config: one accent, neutral zinc scale is built in --> <!-- Tailwind: prebuilt + purged stylesheet (`npm run build`). No runtime CDN. -->
<script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="/css/tailwind.css" />
<script>
tailwind.config = {
theme: {
extend: {
colors: { accent: '#2563eb', accentink: '#1d4ed8' },
fontFamily: {
display: ['Syne', 'system-ui', 'sans-serif'],
fa: ['Vazirmatn', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<link rel="stylesheet" href="/css/site.css" /> <link rel="stylesheet" href="/css/site.css" />
<link rel="icon" href="/logo-mark.svg" type="image/svg+xml" /> <link rel="icon" href="/logo-mark.svg" type="image/svg+xml" />
</head> </head>
Styles/tailwind.css
+3
View File
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
package-lock.json
Generated
+1028
View File
File diff suppressed because it is too large Load Diff
package.json
+15
View File
@@ -0,0 +1,15 @@
{
"name": "soroushasadi-web",
"private": true,
"version": "1.0.0",
"description": "Tailwind CSS build for the SoroushAsadi public + admin UI (replaces the runtime Play CDN).",
"scripts": {
"build:css": "tailwindcss -c tailwind.config.js -i ./Styles/tailwind.css -o ./wwwroot/css/tailwind.css --minify",
"build:css:admin": "tailwindcss -c tailwind.admin.config.js -i ./Styles/tailwind.css -o ./wwwroot/css/tailwind-admin.css --minify",
"build": "npm run build:css && npm run build:css:admin",
"watch:css": "tailwindcss -c tailwind.config.js -i ./Styles/tailwind.css -o ./wwwroot/css/tailwind.css --watch"
},
"devDependencies": {
"tailwindcss": "^3.4.17"
}
}
tailwind.admin.config.js
+26
View File
@@ -0,0 +1,26 @@
/** @type {import('tailwindcss').Config} */
// Admin (dark) theme. Separate build so its flat custom colors do not collide
// with the public site's use of built-in color scales (e.g. emerald-600).
module.exports = {
content: [
'./Pages/Admin/**/*.cshtml',
'./Pages/Shared/_AdminLayout.cshtml',
],
theme: {
extend: {
colors: {
base: { DEFAULT: '#020510', 800: '#050a1a' },
electric: '#38bdf8',
violet: '#818cf8',
magenta: '#e879f9',
emerald: '#34d399',
},
fontFamily: {
display: ['Syne', 'system-ui', 'sans-serif'],
sans: ['Syne', 'system-ui', 'sans-serif'],
mono: ['SpaceMono', 'monospace'],
},
},
},
plugins: [],
};
tailwind.config.js
+24
View File
@@ -0,0 +1,24 @@
/** @type {import('tailwindcss').Config} */
// Public site theme. Scoped away from the admin theme (which redefines
// `emerald` as a flat color and would collide with the emerald-600 scale).
module.exports = {
content: [
'./Pages/*.cshtml',
'./Pages/Blog/**/*.cshtml',
'./Pages/Shared/_Layout.cshtml',
'./wwwroot/js/**/*.js',
],
theme: {
extend: {
colors: {
accent: '#2563eb',
accentink: '#1d4ed8',
},
fontFamily: {
display: ['Syne', 'system-ui', 'sans-serif'],
fa: ['Vazirmatn', 'system-ui', 'sans-serif'],
},
},
},
plugins: [],
};
wwwroot/css/tailwind-admin.css
+1
View File
File diff suppressed because one or more lines are too long
wwwroot/css/tailwind.css
+1
View File
File diff suppressed because one or more lines are too long