applies wompum color to tailwind class system

assets/css/components/wompum.css

@@ -31,7 +31,6 @@
   width: 100%;
   height: 100%;
   transition: background-color 0.3s ease;
-  background-color: var(--sand-500);
 }
 
 .wompum-cell--narrator,

assets/css/main.css

@@ -2,6 +2,10 @@ body {
   @apply font-garamond;
 }
 
+a:hover {
+  @apply text-pine-900;
+}
+
 .interviewer-question {
   font-style: italic;
   color: #444;
@@ -43,4 +47,48 @@ body {
 
 .narrator__wompum {
   @apply absolute inset-0 w-full h-full;
+}
+
+.tag {
+  @apply p-2 bg-sand-100 border border-transparent hover:border-sand-500 rounded-lg whitespace-nowrap hover:text-gray-900 hover:opacity-100
+}
+
+.tag-cloud .tag:nth-child(10n+1):hover {
+  @apply border-blue-500;
+}
+
+.tag-cloud .tag:nth-child(10n+2):hover {
+  @apply border-clay-500;
+}
+
+.tag-cloud .tag:nth-child(10n+3):hover {
+  @apply border-cyan-500;
+}
+
+.tag-cloud .tag:nth-child(10n+4):hover {
+  @apply border-gold-500;
+}
+
+.tag-cloud .tag:nth-child(10n+5):hover {
+  @apply border-red-500;
+}
+
+.tag-cloud .tag:nth-child(10n+6):hover {
+  @apply border-pine-500;
+}
+
+.tag-cloud .tag:nth-child(10n+7):hover {
+  @apply border-pink-500;
+}
+
+.tag-cloud .tag:nth-child(10n+8):hover {
+  @apply border-moss-500;
+}
+
+.tag-cloud .tag:nth-child(10n+9):hover {
+  @apply border-rust-500;
+}
+
+.tag-cloud .tag:nth-child(10n):hover {
+  @apply border-sand-500;
 }

assets/css/styles.css

@@ -1,13 +1,46 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 
+/* Add safelist for all color variations */
+@source inline("{bg,text,border}-{blue,clay,cyan,gold,moss,pine,pink,red,rust,sand}-{100,500,900}");
+
 @theme {
   --font-garamond: 'EB Garamond 12', 'Garamond', 'Baskerville', 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
   --font-iosevka: 'Iosevka', Consolas, 'Liberation Mono', Menlo, monospace;
+  --color-blue-100: #c2cfe0;
+  --color-blue-500: #6f88a3;
+  --color-blue-900: #5d7691;
+  --color-clay-100: #ead4c2;
+  --color-clay-500: #c49b6f;
+  --color-clay-900: #b17f48;
+  --color-cyan-100: #c0dadd;
+  --color-cyan-500: #6a9799;
+  --color-cyan-900: #436668;
+  --color-gold-100: #e6dac1;
+  --color-gold-500: #bca66d;
+  --color-gold-900: #a88b48;
+  --color-moss-100: #d0ddc7;
+  --color-moss-500: #919f71;
+  --color-moss-900: #69734a;
+  --color-pine-100: #c7ddd2;
+  --color-pine-500: #7b9b85;
+  --color-pine-900: #516b57;
+  --color-pink-100: #ead4d2;
+  --color-pink-500: #c0928a;
+  --color-pink-900: #a7695a;
+  --color-red-100: #e8c9c9;
+  --color-red-500: #b87977;
+  --color-red-900: #a35754;
+  --color-rust-100: #eacec4;
+  --color-rust-500: #c48a74;
+  --color-rust-900: #af6649;
+  --color-sand-100: #eee8dd;
+  --color-sand-500: #d4c5aa;
+  --color-sand-900: #b19360;
 }
 
 body {
-  @apply antialiased;
+  @apply antialiased bg-sand-100/50;
 }
 
 @import "components/wompum.css";