TheCoderRaman · May 11, 2024 19:59 · Mar 21, 2023
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,77 @@
+function spacing () {
+  const scale = Array(201)
+    .fill(null)
+    .map((_, i) => [i * 0.5, `${i * 0.5 * 8}px`])
+  const values = Object.fromEntries(scale)
+  values.px = '1px'
+  values.xs = '2px'
+  values.sm = '4px'
+  return values
+}
+
+function opacity () {
+  const scale = Array(21)
+    .fill(null)
+    .map((_, i) => [i * 5, Math.round(i * 0.05 * 100) / 100])
+  const values = Object.fromEntries(scale)
+  return values
+}
+
+function colorify (cssVariableNames) {
+  return Object.fromEntries(cssVariableNames.map(name =>
+    [name, `rgb(var(--${name}) / <alpha-value>)`]
+  ))
+}
+
+const baseColors = colorify([
+  'bg-primary',
+  'bg-secondary',
+
+  'border-primary',
+  'border-secondary',
+  'border-tertiary',
+
+  'text-primary',
+  'text-secondary'
+])
+
+const semanticColors = colorify([
+  'accent',
+  'accent-bright',
+  'accent-light'
+])
+
+module.exports = {
+  theme: {
+    container: {
+      center: true,
+      padding: '16px'
+    },
+    spacing: spacing(),
+
+    extend: {
+      backgroundColor: Object.assign({}, {
+        primary: baseColors['bg-primary'],
+        secondary: baseColors['bg-secondary']
+      }, semanticColors),
+      borderColor: Object.assign({}, {
+        primary: baseColors['border-primary'],
+        secondary: baseColors['border-secondary'],
+        tertiary: baseColors['border-tertiary']
+      }, semanticColors),
+      boxShadowColor: Object.assign({}, semanticColors),
+      textColor: Object.assign({}, {
+        primary: baseColors['text-primary'],
+        secondary: baseColors['text-secondary']
+      }, semanticColors),
+      maxWidth: spacing(),
+      minWidth: spacing(),
+      opacity: opacity()
+    }
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography')
+  ],
+  safelist: []
+}