fixes

tailwind.config.js

@@ -1,31 +1,41 @@
-import { TW_WIDTHS } from './src/constants/images';
+import { TW_WIDTHS } from './src/constants/images'
 
 /** @type {import('tailwindcss').Config} */
+
+const colors = {
+  background: {
+    DEFAULT: 'rgba(19, 21, 20, 1)',
+    light: 'rgba(28, 28, 30, 1)',
+  },
+  text: {
+    DEFAULT: '#C4C4C4',
+    muted: '#D9D9D9',
+  },
+  brand: {
+    DEFAULT: 'rgba(198, 15, 211, 1)',
+  },
+  border: {
+    DEFAULT: '#D9D9D9',
+  },
+}
+
 export default {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-  theme: { 
+  theme: {
     extend: {
       screens: {
-        xs: `${TW_WIDTHS.XS}px`, 
+        xs: `${TW_WIDTHS.XS}px`,
       },
-      colors: {
-        bg: {
-          main: 'rgba(19, 21, 20, 1)',
-          light: 'rgba(28, 28, 30, 1)',
-        },
-        card: {
-          DEFAULT: 'rgba(28, 28, 30, 1)',
-        },
-        brand: {
-          DEFAULT: 'rgba(198, 15, 211, 1)',
-        },
-        text: {
-          light: '#FFFFFF',
-          DEFAULT: '#C4C4C4',
-        },
-        border: {
-          light: '#D9D9D9',
-        },
+      colors,
+      textColor: {
+        DEFAULT: colors.text.DEFAULT,
+      },
+      backgroundColor: {
+        main: colors.background.DEFAULT,
+        light: colors.background.light,
+      },
+      borderColor: {
+        DEFAULT: colors.border.DEFAULT,
       },
       aspectRatio: {
         '3/4': '3 / 4',