TailwindCSS production.

2026-08-19 22:22:56 +10:00
parent e8e03a855a
commit 152a998311
7 changed files with 1207 additions and 23 deletions
@@ -285,6 +285,9 @@ FakesAssemblies/
 .ntvs_analysis.dat
 node_modules/
 # Tailwind CSS build output (generated by `npm run build:css`)
 plushealthtech/wwwroot/css/tailwind.css
 # Visual Studio 6 build log
 *.plg
@@ -12,14 +12,15 @@ Run from the repo root (the solution directory).
 - Build: `dotnet build plushealthtech.sln`
 - Run locally: `dotnet run --project plushealthtech` → https://localhost:7070 (http: 5047, per the `https` profile in `Properties/launchSettings.json`); use `dotnet watch --project plushealthtech` for hot reload
- Docker image (build context is the repo root, not the project folder): `docker build . -t plushealthtech:latest -f plushealthtech/Dockerfile`
+- CSS: `npm install` once, then `npm run build:css` compiles the Tailwind v4 bundle into `plushealthtech/wwwroot/css/tailwind.css` (use `npm run watch:css` while editing pages). The layout links this local file — never load the Tailwind Play CDN from markup.
 - Docker image (build context is the repo root, not the project folder): `docker build . -t plushealthtech:latest -f plushealthtech/Dockerfile` — the Dockerfile's node stage builds the CSS itself, so no local `npm run build:css` is needed before a Docker build.
 - There is no test project and no linter/formatter configuration.
 ## Architecture
 - `plushealthtech/` is the only project. `Program.cs` is the entire pipeline: `AddRazorPages()`, HTTPS redirect, static files — new services would be registered there.
 - Pages use the Razor Pages convention: `Pages/<Name>.cshtml` + `<Name>.cshtml.cs` (a PageModel). Existing: `Index` (logo hero), `Privacy`, `Error`, and the shared `Shared/_Layout.cshtml`. There are no areas or controllers.
- Shared chrome and branding: `Pages/Shared/_Layout.cshtml` (navbar with Home + external blog link, footer) and `wwwroot/css/site.css` (CSS custom properties; `.bg-blue` = `#1c8098` is the brand color used on the navbar). The layout `<head>` loads an external analytics script from analytics.rokoh.com.
+- Shared chrome and branding: `Pages/Shared/_Layout.cshtml` (navbar with Home + external blog link, footer). Styling is a **Tailwind v4** bundle: source `wwwroot/css/tailwind.input.css` (CSS-first `@theme` with brand colors — `brand` `#1c8098`, `brand-dark` `#145f72`, `brand-light` `#e6f2f5`, `brand-accent` `#0ea5e9`, `brand-vet` `#0d9488`), built by the Tailwind CLI into `wwwroot/css/tailwind.css` and linked in the layout `<head>`. `wwwroot/css/site.css` holds legacy CSS custom properties (`.bg-blue` = `#1c8098`). The layout `<head>` also loads an external analytics script from analytics.rokoh.com.
 - Brand and UI design guidelines live in `Design.MD` (color palette with `#1c8098` as brand core, typography, component/layout conventions) — follow it when adding or restyling pages.
 - Client libraries (Bootstrap, jQuery, jquery-validation) are vendored in `wwwroot/lib`; logo and favicon are in `wwwroot/img/`.
@@ -27,5 +28,4 @@ Run from the repo root (the solution directory).
 - Pushes to Gitea (gitea.rokoh.com) run the Gitea Actions workflow: build the Docker image → push `registry.rokoh.com/plushealthtech:latest` → SSH into `10.10.0.90` and run the container with `-p 7000:80 --restart=always`. Registry and server credentials come from Gitea secrets, not the repo.
 - The workflow file exists in **two identical copies**: `.gitea/workflows/default.yml` (the one Gitea reads) and `plushealthtech/.gitea/workflows/default.yml` (referenced from the csproj as `<None Include>`). Keep them in sync when editing either.
- The Dockerfile is multi-stage (restore → build → publish → aspnet runtime), exposes 80/443, entrypoint `dotnet plushealthtech.dll`.
+- The Dockerfile is multi-stage (node frontend → restore → build → publish → aspnet runtime), exposes 80/443, entrypoint `dotnet plushealthtech.dll`. The `frontend` stage runs `npm ci && npm run build:css` and feeds the generated `wwwroot/css/tailwind.css` into the dotnet build, so the image always ships freshly compiled CSS.
 - **Known inconsistency**: the project targets `net10.0`, but the Dockerfile still pins .NET 7 base images (`mcr.microsoft.com/dotnet/{aspnet,sdk}:7.0`), so `docker build` fails as-is. When touching the Dockerfile, bump the base images to .NET 10 to match the TFM.
@@ -0,0 +1,12 @@
 {
  "name": "plushealthtech",
  "private": true,
  "scripts": {
    "build:css": "tailwindcss -i ./plushealthtech/wwwroot/css/tailwind.input.css -o ./plushealthtech/wwwroot/css/tailwind.css --minify",
    "watch:css": "tailwindcss -i ./plushealthtech/wwwroot/css/tailwind.input.css -o ./plushealthtech/wwwroot/css/tailwind.css --watch"
  },
  "devDependencies": {
    "@tailwindcss/cli": "^4.1.0",
    "tailwindcss": "^4.1.0"
  }
 }
@@ -5,11 +5,19 @@ WORKDIR /app
 EXPOSE 80
 EXPOSE 443
 FROM node:24-alpine AS frontend
 WORKDIR /src
 COPY package.json package-lock.json ./
 RUN npm ci
 COPY . .
 RUN npm run build:css
 FROM mcr.microsoft.com/dotnet/sdk:10.0 AS build
 WORKDIR /src
 COPY ["plushealthtech/plushealthtech.csproj", "plushealthtech/"]
 RUN dotnet restore "plushealthtech/plushealthtech.csproj"
 COPY . .
 COPY --from=frontend /src/plushealthtech/wwwroot/css/tailwind.css ./plushealthtech/wwwroot/css/tailwind.css
 WORKDIR "/src/plushealthtech"
 RUN dotnet build "plushealthtech.csproj" -c Release -o /app/build
@@ -4,25 +4,7 @@
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Plus Health Tech | Interoperable Clinical Decision Support & Patient Management</title>
-    <!-- Tailwind CSS CDN -->
+    <link rel="stylesheet" href="~/css/tailwind.css" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
            tailwind.config = {
                theme: {
                    extend: {
                        colors: {
                            brand: {
                                DEFAULT: '#1c8098',
                                dark: '#145f72',
                                light: '#e6f2f5',
                                accent: '#0ea5e9',
                                vet: '#0d9488'
                            }
                        }
                    }
                }
            }
    </script>
    <!-- FontAwesome for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="icon" type="image/x-icon" href="~/img/favicon.ico">
@@ -0,0 +1,9 @@
@import "tailwindcss";
@theme {
    --color-brand: #1c8098;
    --color-brand-dark: #145f72;
    --color-brand-light: #e6f2f5;
    --color-brand-accent: #0ea5e9;
    --color-brand-vet: #0d9488;
 }