Set Tailwind colors with CSS variables

app/styles/themes.scss

@@ -26,6 +26,50 @@ Examples:
 
 body,
 .site-preview {
+  // Tailwind color variables
+  --color-gray-50: 249 250 251;
+  --color-gray-100: 243 244 246;
+  --color-gray-200: 229 231 235;
+  --color-gray-300: 209 213 219;
+  --color-gray-400: 156 163 175;
+  --color-gray-500: 107 114 128;
+  --color-gray-600: 75 85 99;
+  --color-gray-700: 55 65 81;
+  --color-gray-800: 31 41 55;
+  --color-gray-900: 17 24 39;
+  --color-primary-50: 238 242 255;
+  --color-primary-100: 224 231 255;
+  --color-primary-200: 199 210 254;
+  --color-primary-300: 165 180 252;
+  --color-primary-400: 129 140 248;
+  --color-primary-500: 99 102 241;
+  --color-primary-600: 84 72 238;
+  --color-primary-700: 67 56 202;
+  --color-primary-800: 55 48 163;
+  --color-primary-900: 49 46 129;
+  --color-success-50: 240 253 244;
+  --color-success-100: 220 252 231;
+  --color-success-200: 187 247 208;
+  --color-success-300: 134 239 172;
+  --color-success-400: 74 222 128;
+  --color-success-500: 34 197 94;
+  --color-success-600: 22 163 74;
+  --color-success-700: 21 128 61;
+  --color-success-800: 22 101 52;
+  --color-success-900: 20 83 45;
+  --color-danger-50: 254 242 242;
+  --color-danger-100: 254 226 226;
+  --color-danger-200: 254 202 202;
+  --color-danger-300: 252 165 165;
+  --color-danger-400: 248 113 113;
+  --color-danger-500: 239 68 68;
+  --color-danger-600: 220 38 38;
+  --color-danger-700: 185 28 28;
+  --color-danger-800: 153 27 27;
+  --color-danger-900: 127 29 29;
+  --color-accent-300: 255 95 135;
+  --color-accent-500: 255 71 117;
+
   // Primary variables
   --brand-color: hsl(var(--brand-color_hsl));
   --accent-color: hsl(var(--accent-color_hsl));
@@ -82,7 +126,7 @@ body,
   --input-border-color: #d1d5db;
 
   // Typography
-  --font-sans: 'Inter', Arial, sans-serif;
+  --font-sans: 'Inter', arial, sans-serif;
   --font-weight-heading: 700;
   --font-weight-body: 400;
 }

tailwind.config.js

@@ -1,3 +1,38 @@
+// https://tailwindcss.com/docs/customizing-colors#using-css-variables
+function withOpacityValue(variable) {
+  return ({ opacityValue }) => {
+    if (opacityValue === undefined) {
+      return `rgb(var(${variable}))`;
+    }
+    return `rgb(var(${variable}) / ${opacityValue})`;
+  };
+}
+
+// Parse list of shades into Tailwind function with CSS variables
+const parseShades = (color, shades) => {
+  return shades.reduce((obj, shade) => {
+    obj[shade] = withOpacityValue(`--color-${color}-${shade}`);
+    return obj;
+  }, {});
+};
+
+// Parse color matrix into Tailwind colors object
+const parseColors = colors => {
+  return Object.keys(colors).reduce((obj, color) => {
+    obj[color] = parseShades(color, colors[color]);
+    return obj;
+  }, {});
+};
+
+// Define color matrix (of available colors)
+const colors = {
+  gray: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+  primary: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+  success: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+  danger: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+  accent: [300, 500],
+};
+
 module.exports = {
   content: ['./app/**/*.{html,js,ts,tsx}'],
   darkMode: 'class',
@@ -31,63 +66,11 @@ module.exports = {
           'Noto Color Emoji',
         ],
       },
-      colors: {
+      colors: Object.assign(parseColors(colors), {
-        gray: {
+        'gradient-purple': withOpacityValue('--color-gradient-purple'),
-          50: '#f9fafb',
+        'gradient-blue': withOpacityValue('--color-gradient-blue'),
-          100: '#f3f4f6',
+        'sea-blue': withOpacityValue('--color-sea-blue'),
-          200: '#e5e7eb',
+      }),
-          300: '#d1d5db',
-          400: '#9ca3af',
-          500: '#6b7280',
-          600: '#4b5563',
-          700: '#374151',
-          800: '#1f2937',
-          900: '#111827',
-        },
-        primary: {
-          50: '#eef2ff',
-          100: '#e0e7ff',
-          200: '#c7d2fe',
-          300: '#a5b4fc',
-          400: '#818cf8',
-          500: '#6366f1',
-          600: '#5448ee',
-          700: '#4338ca',
-          800: '#3730a3',
-          900: '#312e81',
-        },
-        success: {
-          50: '#f0fdf4',
-          100: '#dcfce7',
-          200: '#bbf7d0',
-          300: '#86efac',
-          400: '#4ade80',
-          500: '#22c55e',
-          600: '#16a34a',
-          700: '#15803d',
-          800: '#166534',
-          900: '#14532d',
-        },
-        danger: {
-          50: '#fef2f2',
-          100: '#fee2e2',
-          200: '#fecaca',
-          300: '#fca5a5',
-          400: '#f87171',
-          500: '#ef4444',
-          600: '#dc2626',
-          700: '#b91c1c',
-          800: '#991b1b',
-          900: '#7f1d1d',
-        },
-        accent: {
-          300: '#ff5f87',
-          500: '#ff4775',
-        },
-        'gradient-purple': '#b8a3f9',
-        'gradient-blue': '#9bd5ff',
-        'sea-blue': '#2feecc',
-      },
     },
   },
   plugins: [