Fixed styles for tailwind 4

tailwind.config.js

@@ -1,57 +1,42 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
-  theme: {
-    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: '#D8D2B8',
-          400: '#cbc5af',
-          500: '#b0ab97',
-          600: '#767563',
-          700: '#4c4940',
-          800: '#3A382C',
-          900: '#2d2c21'
+    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+    theme: {
+        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: {
+            boxShadow: {
+                sharpest: '2px 2px #2d2c2150'
+            }
         }
-      },
-      boxShadow: {
-        sharpest: '2px 2px #2d2c2150'
-      }
-    }
-  },
-  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'))
-      })
-    }
-  ]
+    },
+    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'))
+            })
+        }
+    ]
 }