From 0d516a10f93a043fe01f4988acc6d9429182118b Mon Sep 17 00:00:00 2001
From: Tom O'Dwyer <tom.odwyer@thedatalab.org>
Date: Tue, 6 Aug 2024 09:22:33 +0100
Subject: [PATCH] Add Tailwind plugin for CSS colour variables

---
 tailwind.config.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/tailwind.config.js b/tailwind.config.js
index 2929a144..dd73d644 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -187,5 +187,23 @@ export default {
   plugins: [
     tailwindTypography,
     tailwindForms,
+    ({ addBase, theme }) => {
+      function extractColorVars(colorObj, colorGroup = "") {
+        return Object.keys(colorObj).reduce((vars, colorKey) => {
+          const value = colorObj[colorKey];
+
+          const newVars =
+            typeof value === "string"
+              ? { [`--color${colorGroup}-${colorKey}`]: value }
+              : extractColorVars(value, `-${colorKey}`);
+
+          return { ...vars, ...newVars };
+        }, {});
+      }
+
+      addBase({
+        ":root": extractColorVars(theme("colors")),
+      });
+    },
   ],
 };