feat(tailwind.config): add global CSS variables for colors

A new function, `addVariablesForColors`, has been added into the Tailwind configuration file to map each Tailwind color into a global CSS variable. This allows usage such as `var(--gray-200)` throughout the application for all Tailwind colors.

tailwind.config.ts

@@ -1,5 +1,8 @@
 import type { Config } from "tailwindcss"
 
+// @ts-ignore
+import {default as flattenColorPalette} from "tailwindcss/lib/util/flattenColorPalette";
+
 const config = {
   darkMode: ["class"],
   content: [
@@ -74,7 +77,19 @@ const config = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require("tailwindcss-animate"), addVariablesForColors],
 } satisfies Config
 
+// This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200).
+function addVariablesForColors({ addBase, theme }: any) {
+  let allColors = flattenColorPalette(theme("colors"));
+  let newVars = Object.fromEntries(
+    Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
+  );
+
+  addBase({
+    ":root": newVars,
+  });
+}
+
 export default config