improve overview and other things

apps/web/tailwind.config.js

@@ -14,56 +14,47 @@ const colors = [
   '#7856ff',
 ];
 
+const twColors = [
+  'rose',
+  'pink',
+  'fuchsia',
+  'purple',
+  'violet',
+  'indigo',
+  'blue',
+  'sky',
+  'cyan',
+  'teal',
+  'emerald',
+  'green',
+  'lime',
+  'yellow',
+  'amber',
+  'orange',
+  'red',
+  'stone',
+  'neutral',
+  'zinc',
+  'grey',
+  'slate',
+];
+const twColorVariants = ['50', '100', '200', '700'];
+
 /** @type {import('tailwindcss').Config} */
 const config = {
   safelist: [
     ...colors.flatMap((color) =>
       ['text', 'bg'].map((prefix) => `${prefix}-chart-${color}`)
     ),
-    'bg-rose-200',
-    'text-rose-700',
-    'bg-pink-200',
-    'text-pink-700',
-    'bg-fuchsia-200',
-    'text-fuchsia-700',
-    'bg-purple-200',
-    'text-purple-700',
-    'bg-violet-200',
-    'text-violet-700',
-    'bg-indigo-200',
-    'text-indigo-700',
-    'bg-blue-200',
-    'text-blue-700',
-    'bg-sky-200',
-    'text-sky-700',
-    'bg-cyan-200',
-    'text-cyan-700',
-    'bg-teal-200',
-    'text-teal-700',
-    'bg-emerald-200',
-    'text-emerald-700',
-    'bg-green-200',
-    'text-green-700',
-    'bg-lime-200',
-    'text-lime-700',
-    'bg-yellow-200',
-    'text-yellow-700',
-    'bg-amber-200',
-    'text-amber-700',
-    'bg-orange-200',
-    'text-orange-700',
-    'bg-red-200',
-    'text-red-700',
-    'bg-stone-200',
-    'text-stone-700',
-    'bg-neutral-200',
-    'text-neutral-700',
-    'bg-zinc-200',
-    'text-zinc-700',
-    'bg-grey-200',
-    'text-grey-700',
-    'bg-slate-200',
-    'text-slate-700',
+    ...twColors.flatMap((color) => {
+      return twColorVariants.flatMap((variant) => {
+        return [
+          `text-${color}-${variant}`,
+          `bg-${color}-${variant}`,
+          `border-${color}-${variant}`,
+        ];
+      });
+    }),
   ],
   content: [
     './pages/**/*.{ts,tsx}',