diff --git a/web/src/lib/avatar.ts b/web/src/lib/avatar.ts
index 9dabaa7c..38f6553e 100644
--- a/web/src/lib/avatar.ts
+++ b/web/src/lib/avatar.ts
@@ -20,7 +20,27 @@ export function avatarColorIndex(id: string): number {
   return (Math.abs(stringToColorHash(id)) % AVATAR_COLOR_COUNT) + 1;
 }
 
-const AVATAR_BG_CLASSES = Array.from({ length: AVATAR_COLOR_COUNT }, (_, i) => `bg-avatar-${i + 1}`);
+/**
+ * Written out as literal strings, NOT template-generated (`bg-avatar-${i}`) -- Tailwind's build
+ * finds utility classes by statically scanning source text for complete class-name strings, so a
+ * dynamically-assembled name is invisible to it and never gets its CSS generated at all. That exact
+ * bug shipped here once already: every avatar rendered with a fully transparent background instead
+ * of its color, discovered by checking computed style, not by reading the class name off the DOM
+ * (which looked correct).
+ */
+const AVATAR_BG_CLASSES = [
+  'bg-avatar-1',
+  'bg-avatar-2',
+  'bg-avatar-3',
+  'bg-avatar-4',
+  'bg-avatar-5',
+  'bg-avatar-6',
+  'bg-avatar-7',
+  'bg-avatar-8',
+  'bg-avatar-9',
+  'bg-avatar-10',
+  'bg-avatar-11',
+];
 
 export function avatarBgClass(id: string): string {
   return AVATAR_BG_CLASSES[avatarColorIndex(id) - 1];