fix

files/static/src/main.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+	--color-primary: 220, 38, 38;
+}
+
 @import url('https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&display=swap');
 
 @responsive {

tailwind.config.js

@@ -9,6 +9,15 @@ module.exports = {
   darkMode: 'class', // or 'media' or 'class'
   theme: {
     colors: {
+      primary: ({ opacityVariable, opacityValue }) => {
+        if (opacityValue !== undefined) {
+          return `rgba(var(--color-primary), ${opacityValue})`
+        }
+        if (opacityVariable !== undefined) {
+          return `rgba(var(--color-primary), var(${opacityVariable}, 1))`
+        }
+        return `rgb(var(--color-primary))`
+      },
       transparent: 'transparent',
       current: 'currentColor',
       black: colors.black,
@@ -20,7 +29,8 @@ module.exports = {
       blue: colors.sky
     },
     fontFamily: {
-      'heading': ['Delius Swash Caps']
+      'heading': ['Delius Swash Caps'],
+      'serif': ['Georgia']
     },
     extend: {
       boxShadow: {