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")),
+      });
+    },
   ],
 };