From 409926a97b946632d10953730685a7dcc827e483 Mon Sep 17 00:00:00 2001
From: Mathis <avnyr@yidhra.fr>
Date: Fri, 7 Jun 2024 14:26:48 +0200
Subject: [PATCH] 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 | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/tailwind.config.ts b/tailwind.config.ts
index 84287e8..5bd0d14 100644
--- a/tailwind.config.ts
+++ b/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
\ No newline at end of file