Update color definitions in Tailwind CSS config file

tailwind.config.mjs

@@ -1,5 +1,5 @@
 /** @type {import('tailwindcss').Config} */
-
+import colors from 'tailwindcss/colors';
 export default {
   content: [
     "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
@@ -12,35 +12,15 @@ export default {
       current: "currentColor",
       black: "#000000",
       white: "#ffffff",
-      gray: {
+      gray: colors.gray,
-        100: "#f3f4f6",
+      indigo: colors.indigo,
-        300: "#d1d5db",
+      neutral: colors.neutral,  // Used mainly for text color
-        500: "#6b7280",
-        600: "#4b5563",
-        800: "#1f2937",
-      },
-      indigo: {
-        200: "#c7d2fe",
-        300: "#a5b4fc",
-      },
-      neutral: {
-        50: "#fafafa",
-        100: "#f5f5f5",
-        200: "#e5e5e5",
-        300: "#d4d4d4",
-        400: "#a3a3a3",
-        500: "#737373",
-        600: "#525252",
-        700: "#404040",
-        800: "#262626",
-        900: "#171717",
-      },
       yellow: {
         50: "#fefce8",
         100: "#fef9c3",
         400: "#facc15",
         500: "#eab308",
-      },
+      }, // Accent colors, used mainly for star color, heading and buttons
       orange: {
         100: "#ffedd5",
         200: "#fed7aa",
@@ -48,20 +28,9 @@ export default {
         400: "#fa5a15",
         500: "#e14d0b",
         600: "#ea580c",
-      },
+      }, // Primary colors, used mainly for links, buttons and svg icons
-      red: {
+      red: colors.red, // Used for bookmark icon
-        400: "#f87171",
+      zinc: colors.zinc, // Used mainly for box-shadow
-        500: "#ef4444",
-      },
-      zinc: {
-        200: "#e4e4e7",
-        400: "#a1a1aa",
-        500: "#71717a",
-        600: "#52525b",
-        700: "#3f3f46",
-        800: "#27272a",
-        900: "#18181b",
-      },
     },
     extend: {},
   },