diff --git a/services/web-ui/Dockerfile b/services/web-ui/Dockerfile
index 6f1c9d0..a3f04c1 100644
--- a/services/web-ui/Dockerfile
+++ b/services/web-ui/Dockerfile
@@ -12,7 +12,7 @@ COPY src/ ./src/
 COPY public/ ./public/
 
 # Build into public/dist/app.css
-RUN npx tailwindcss -i ./src/css/app.css -o ./public/dist/app.css --minify
+RUN npx postcss ./src/css/app.css -o ./public/dist/app.css --env production
 
 # Stage 2: runtime
 FROM nginx:alpine
diff --git a/services/web-ui/package.json b/services/web-ui/package.json
index 0de73a4..4d7cd31 100644
--- a/services/web-ui/package.json
+++ b/services/web-ui/package.json
@@ -4,12 +4,15 @@
   "private": true,
   "description": "Build-time-only deps for the Wild Dragon web-ui Tailwind/flyon-ui pipeline. Not shipped at runtime.",
   "scripts": {
-    "build:css": "tailwindcss -i ./src/css/app.css -o ./public/dist/app.css --minify"
+    "build:css": "postcss ./src/css/app.css -o ./public/dist/app.css --env production"
   },
   "devDependencies": {
     "tailwindcss": "^3.4.0",
     "postcss": "^8.4.35",
     "autoprefixer": "^10.4.17",
-    "flyonui": "^1.0.0"
+    "flyonui": "^1.0.0",
+    "postcss-import": "^16.0.0",
+    "postcss-cli": "^11.0.0",
+    "cssnano": "^7.0.0"
   }
 }
diff --git a/services/web-ui/postcss.config.js b/services/web-ui/postcss.config.js
index 12a703d..2e9af7a 100644
--- a/services/web-ui/postcss.config.js
+++ b/services/web-ui/postcss.config.js
@@ -1,6 +1,8 @@
-module.exports = {
+module.exports = ({ env }) => ({
   plugins: {
+    'postcss-import': {},
     tailwindcss: {},
     autoprefixer: {},
+    ...(env === 'production' ? { cssnano: { preset: 'default' } } : {}),
   },
-};
+});
diff --git a/services/web-ui/src/css/app.css b/services/web-ui/src/css/app.css
index 09731e2..fa5497d 100644
--- a/services/web-ui/src/css/app.css
+++ b/services/web-ui/src/css/app.css
@@ -1,20 +1,12 @@
-/* app.css ─ Tailwind directives + primitive imports.
+/* app.css — Tailwind directives + primitive imports.
  *
- * Order matters:
- *   1. tokens (CSS custom properties for legacy callers)
- *   2. tailwind base (CSS reset)
- *   3. tailwind components
- *   4. our primitives (use tokens + can be overridden by utilities)
- *   5. tailwind utilities (highest specificity, last word)
- *   6. motion (animations + reduced-motion override)
+ * IMPORTANT: All @import must come first per CSS spec / postcss-import
+ * requirements. Tailwind directives below; cascade order in the emitted
+ * bundle is: tokens → primitives → tailwind base → tailwind components
+ * → tailwind utilities. Utilities win on specificity, primitives win
+ * over base where they share specificity.
  */
-
 @import "./components/tokens.css";
-
-@tailwind base;
-@tailwind components;
-
-/* Primitives — each one ~50-200 lines, one responsibility per file */
 @import "./components/sidebar.css";
 @import "./components/topbar.css";
 @import "./components/button.css";
@@ -27,12 +19,13 @@
 @import "./components/empty-state.css";
 @import "./components/badge.css";
 @import "./components/toast.css";
-
-@tailwind utilities;
-
 @import "./components/motion.css";
 
-/* Global base — self-hosted fonts */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Self-hosted fonts */
 @font-face {
   font-family: 'Inter';
   src: url('/fonts/inter-400.woff2') format('woff2');
diff --git a/services/web-ui/tailwind.config.js b/services/web-ui/tailwind.config.js
index a17d18d..7e55fec 100644
--- a/services/web-ui/tailwind.config.js
+++ b/services/web-ui/tailwind.config.js
@@ -4,6 +4,11 @@ module.exports = {
     './public/**/*.html',
     './src/**/*.{css,js}',
   ],
+  safelist: [
+    { pattern: /^wd-/ },
+    { pattern: /^is-/ },
+    'nav-dev-badge',
+  ],
   darkMode: 'class',
   theme: {
     extend: {