Moved event and colored element logic to css variables

tailwind.config.js

@@ -68,7 +68,7 @@ module.exports = {
         "body-light": "hsl(250, 60%, 85%) 0 0 18px 3px inset",
       },
       borderRadius: {
-      	xl: "calc(var(--radius) + 4px)",
+        xl: "calc(var(--radius) + 4px)",
         lg: "var(--radius)",
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
@@ -99,25 +99,5 @@ module.exports = {
       },
     },
   },
-  plugins: [
-    animate,
-    function ({ 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"))
-      })
-    }
-  ]
+  plugins: [animate]
 }