Replace Tailwind Play CDN with a prebuilt, purged stylesheet

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>
2026-06-26 03:06:24 +03:30
parent cfff934bdd
commit 33efeac98f
9 changed files with 1102 additions and 25 deletions
@@ -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">
@@ -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>
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
@@ -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"
+  }
+}
@@ -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: [],
+};
@@ -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: [],
+};