TailwindCSS production.

plushealthtech/Dockerfile

@@ -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
 

plushealthtech/Pages/Shared/_Layout.cshtml

@@ -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 -->
-    <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>
+    <link rel="stylesheet" href="~/css/tailwind.css" />
     <!-- 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">

plushealthtech/wwwroot/css/tailwind.input.css

@@ -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;
+}