First layout test

tailwind.config.js

@@ -5,7 +5,50 @@ module.exports = {
     container: {
       padding: '2rem',
       center: true
+    },
+    fontFamily: {
+      sans: ['Noto Sans', 'ui-sans-serif', 'system-ui'],
+      serif: ['ui-serif', 'Georgia'],
+      mono: ['ui-monospace', 'SFMono-Regular'],
+      display: ['Oswald'],
+      body: ['Noto Sans']
+    },
+    extend: {
+      colors: {
+        'y-beige': {
+          DEFAULT: '#B0AB97',
+          50: '#FFFFFF',
+          100: '#F6F6F4',
+          200: '#E5E3DD',
+          300: '#D3D0C5',
+          400: '#cbc5af',
+          500: '#b0ab97',
+          600: '#767563',
+          700: '#4c4940',
+          800: '#3A382C',
+          900: '#2d2c21'
+        }
+      }
     }
   },
-  plugins: []
+  plugins: [
+    function ({ addBase, theme }) {
+      function extractColorVars(colorObj, colorGroup = '') {
+        return Object.keys(colorObj).reduce((vars, colorKey) => {
+          const value = colorObj[colorKey]
+
+          const newVars =
+            typeof value === 'string'
+              ? { [`--color${colorGroup}-${colorKey}`]: value }
+              : extractColorVars(value, `-${colorKey}`)
+
+          return { ...vars, ...newVars }
+        }, {})
+      }
+
+      addBase({
+        ':root': extractColorVars(theme('colors'))
+      })
+    }
+  ]
 }