assignment 1

tailwind.config.js

@@ -0,0 +1,41 @@
+import { spacing } from 'tailwindcss/defaultTheme';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [],
+  theme: {
+    extend: {},
+    spacing: {
+      ...spacing,
+      0.5: undefined,
+      1.5: undefined,
+      2.5: undefined,
+      3.5: undefined,
+    },
+  },
+  plugins: [
+    function ({ addUtilities, theme }) {
+      function extractVars(obj, group = '', prefix) {
+        return Object.keys(obj).reduce((vars, key) => {
+          const value = obj[key];
+          if (!value || typeof value === 'boolean') return vars;
+          const cssVariable = key === 'DEFAULT' ? `--${prefix}${group}` : `--${prefix}${group}-${key}`;
+          const newVars = typeof value === 'string' ? { [cssVariable]: value } : extractVars(value, `-${key}`, prefix);
+
+          return { ...vars, ...newVars };
+        }, {});
+      }
+
+      addUtilities({
+        ':root': {
+          ...extractVars(theme('colors'), '', 'color'),
+          ...extractVars(theme('boxShadow'), '', 'shadow'),
+          ...extractVars(theme('spacing'), '', 'space'),
+          ...extractVars(theme('screens'), '', 'screen'),
+          ...extractVars(theme('maxWidth'), '', 'w'),
+          ...extractVars(theme('borderRadius'), '', 'rounded'),
+        },
+      });
+    },
+  ],
+};